var $productName;
var $productDescription;
var $productLinks;

$(document).ready(function(){
	MakeArrowScroller($('#products'));
	
	//Cache some jQuery objects.
	$productName = $("#current_product #product_name");
	$productDescription = $("#current_product #product_description");
	$productLinks = $("#content #product_links");
	
	//Hide the product links
	$productLinks.children().hide();
	$productLinks.find("[data-type='SOCIAL']").show();
	
	//Preload the images
	for(var i=0; i<PRODUCTS.length; i++){
		var image = new Image(25,25);
		image.src= "static/images/products/" + PRODUCTS[i].id + "_banner.jpg";
	}
	
	//Make the Pixo logo change to the Pixo page
	$("#top #logo").click(GoHome);
	$("#top #about_us").click(GoHome);
});

function GoHome(e){
	e.preventDefault();
	ChangeProduct(PIXOFACTOR);
	$('#products .scroll_pane .selected').removeClass("selected");
	return false;
}

function ChangeProduct(newProduct){
	//Set the text
	$productName.html(newProduct.name);
	$productDescription.html(newProduct.description);
	
	//Set the banner image
	$("#banner .main_image").attr('src', "static/images/products/" + newProduct.id + "_banner.jpg");
	
	//Set the product links
	$productLinks.children().hide();
	for(var i=0; i<newProduct.links.length; i++){
		var linkData = newProduct.links[i];
		var link = $productLinks.find("[data-type='" + linkData.type + "']");
		link.show();
		if(linkData.url){
			link.attr('href', linkData.url);
		}
		if(linkData.label){
			link.text(linkData.label);
		}
	}
}

function MakeArrowScroller($element){
	
	//Cache jquery elements
	var $scrollContainer = $element.find('.scroll_container');
	var $scrollPane = $scrollContainer.find('.scroll_pane');
	var $leftArrow = $element.find('.big_arrow_left');
	var $rightArrow = $element.find('.big_arrow_right');
	
	var currItem = 0;
	var numItems = 0;
	var itemWidth;

	//Calculate the number of pages and create buttons for them
	function Init(){
		var $items = $scrollPane.find('li');
		
		itemWidth = $items.first().outerWidth(true) + 3;  //Not sure why we gotta add 3 but we do.
		numItems = $items.length;
		
		$items.click(function(){
			var pageNum = parseInt($(this).attr('data-num'));
			ShowItem(pageNum);
		});
	}
	
	//Show a given item.
	function ShowItem(itemNum){
		if(itemNum >= 0 && itemNum < numItems){
			//Limit the scrolling
			scrollTarget = itemNum - 1;
			if(scrollTarget <= 0) scrollTarget = 0;
			if(scrollTarget == numItems - 2) scrollTarget = numItems - 3;
			$scrollPane.animate({'margin-left': (-scrollTarget * itemWidth) + 'px'}, {queue:false});
			currItem = itemNum;
			
			UpdateControls();
			
			//Highlight the correct tab
			$scrollPane.find("li.selected").removeClass("selected");
			$scrollPane.find("li[data-num='" + currItem + "']").addClass('selected');
			
			ChangeProduct(PRODUCTS[itemNum]);
		}
	}
	
	//Update the state of the arrows
	function UpdateControls(){
		UpdateArrow($leftArrow, currItem == 0);
		UpdateArrow($rightArrow, currItem + 1 >= numItems);
		
	}
	
	//Update a single arrow to either enabled or disabled
	function UpdateArrow($arrow, disabled){
		if(disabled){
			$arrow.addClass('disabled');
		}else{
			$arrow.removeClass('disabled');
		}
	}
	
	//Click listeners
	$leftArrow.click(  function(){ShowItem(currItem - 1);} );
	$rightArrow.click( function(){ShowItem(currItem + 1);} );
	
	//Initialize everything
	Init();
	UpdateControls();
}