// Sider JS

$(document).ready(function() {

	// Slider function

	$('div.sliderGallery').each(function () {
	 
		var ul = $('ul', this);
		var itemsLen = $('li',ul).size();
		var itemWidth = $('li',ul).outerWidth({margin:true}); // Single item
		var itemsWidth = (itemsLen * itemWidth) - $(this).outerWidth(); // All items
		
		// TESTING
		//console.log(itemsLen);
		//console.log(itemWidth);
		//console.log(itemsWidth);
				
		var slider = $('.slider', this).slider({
				handle: '.handle',
				minValue: 0,
				maxValue: itemsWidth,
				slide: function (event, ui) {
						ul.css('left', '-' + ui.value + 'px');
						//console.log(ui.value);						
				},                                
				stop: function (event, ui) {
					ul.animate({'left' : '-' + ui.value + 'px' }, 500, 'linear');
				}
		});
		
	
		var left = $('#left_slider_btn');
		var right = $('#right_slider_btn');
		var startPosition = '10px'; // The position of the ul when the page loads see TEST below:

		ul.css('left', '10px'); // Force start position for IE and Chrome
		$(".handle").css('left', '0px'); // Force start position for IE and Chrome
		
		//console.log(ul.css('left')); // TEST to show start position of ul
		
		
		left.click(function()
		{		
			if(ul.css('left') != startPosition)
      {      	
				$('.slider').slider('moveTo', '-=' + itemWidth)
				//console.log(ul.css('left'));
			}
		});			
		right.click(function()
		{
			$('.slider').slider('moveTo', '+=' + itemWidth)
			//console.log("Right click");
		});

	});	
	
	
	// Swap content function
	
	$('div#displayPanel > div').each(function(i){
   this.id = "display_" + i;
 	});	
 	
	$('div#sliderPanel > ul > li > a').each(function(i){
		this.id = "item_" + i;
		$(this).click(function(){
			$('div#displayPanel > div').hide();
			$("div#sliderPanel > ul > li > a").removeClass("active");
			$(this).addClass("active");
			var show = 'div#display_' + i;
			$(show).show();			
			return false; // de-activates <a> link
		});		
	});
			
	$('div#displayPanel > div').hide();
	$('div#display_0').show();
	$("a#item_0").addClass("active");


   
});