// Carousel app

$(document).ready(function() {
	
// getting the TRUE canvas width
	
	//var carouselCanvasWidth = parseInt( $('.carouselCanvas').css('width') );
	var carouselCanvasWidth = 470;
	
	//var listItemPadding = parseInt( $('.carouselCanvas ul li').css('margin-right') );
	var listItemPadding = 10;
	
	var canvasWidth = carouselCanvasWidth + listItemPadding;
	
// panels: the number of presentable canvases in the presentation chain
	//var panels = 3;
	var panels = parseInt( $('#panels').attr('value') );
	var panelsEnd = canvasWidth * (panels - 2);
	
// hiding scrollbar
	$('.carouselCanvas').css('overflow','hidden');
	
// getting complete width
	var completeCarouselWidth = (canvasWidth * panels) - listItemPadding;
	
	//alert(typeof(panels));

	$('.carouselCanvas ul').css('width', completeCarouselWidth);
	//$('.carouselCanvas ul').css('width', completeCarouselWidth);
	
// removing the right margin on the last list item
	$('ul.upperCarousel li:last').css('margin-right','0');
	$('ul.lowerCarousel li:last').css('margin-right','0');
	
// buttons title
	var buttonsLFtitle = $('.buttonsLF').attr('title');
	var buttonsRTtitle = $('.buttonsRT').attr('title');
	
	
	//var list = $('ul.upperCarousel li img');
	//var articleNumber = list.length;
	
	//var UCwidth = $('ul.upperCarousel').css('width');
	//$(".msgArea").text(UCwidth);
	
	
//  hover function for right button
	function buttonRT_hover() {
		$(".buttonsRT").hover(
			function () {
				$(this).css('background-position','-38px 0');
			}, 
			function () {
				$(this).css('background-position','0 0');
			}
		);
	}
	buttonRT_hover();
	
//  hover function for left button
	function buttonLF_hover() {
		$(".buttonsLF").hover(
			function () {
				$(this).css('background-position','-38px 0');
			}, 
			function () {
				$(this).css('background-position','0 0');
			}
		);
	}
	buttonLF_hover();



// setting the button states
	function leftBtnStateOff() {
		$('.buttonsLF').css('background-position','-19px 0');
		$('.buttonsLF').css('cursor','default');
		
		$('.buttonsLF').attr('title', '');
		$(".buttonsLF").unbind('mouseenter mouseleave');
	}
	function leftBtnStateON() {
		$('.buttonsLF').css('background-position','0 0');
		$('.buttonsLF').css('cursor','pointer');
		
		$('.buttonsLF').attr('title', buttonsLFtitle);
		
		buttonLF_hover();
	}
	function rightBtnStateOff() {
		$('.buttonsRT').css('background-position','-19px 0');
		$('.buttonsRT').css('cursor','default');
		
		$('.buttonsRT').attr('title', '');
		$(".buttonsRT").unbind('mouseenter mouseleave');
	}
	function rightBtnStateOn() {
		$('.buttonsRT').css('background-position','0 0');
		$('.buttonsRT').css('cursor','pointer');
		
		$('.buttonsRT').attr('title', buttonsRTtitle);
		
		buttonRT_hover();
	}
	
// intializing the off state on intial page load
	leftBtnStateOff();
	
// setting off states based of position of canvas
	function btnState() {
		var contentArea = $('.carouselCanvas');
		/*$(".msgArea").text("scrollLeft is: " + contentArea.scrollLeft());*/
		
		if (contentArea.scrollLeft() <= canvasWidth){
			leftBtnStateOff();
		}
		
		if (contentArea.scrollLeft() >= panelsEnd){
			rightBtnStateOff();
		}
	}

	// $('.carouselCanvas').scrollLeft(300);

	$('.buttonsLF').click(function (){
		btnState();
		
		rightBtnStateOn();
		
		$('.carouselCanvas').animate({ scrollLeft : '-=' + canvasWidth }, 'medium');	
	});
	
	$('.buttonsRT').click(function (){
		btnState();
		
		leftBtnStateON();
		
		$('.carouselCanvas').animate({ scrollLeft : '+=' + canvasWidth }, 'medium');
	});
	
	//hiding scroll buttons if there is only 1 panel
	if (panels == 1) {
		$('.buttonsLF').css('visibility','hidden');
		$('.buttonsRT').css('visibility','hidden');			
	}
	
	
});