// JavaScript Document
//Jquery Slider like apple.com 
//created by Elco Jongejans - 24 november 2010


//randomly show on of the three panels
   var panelnr = Math.floor(Math.random()*3)+4; 
   var panel = '#sliderwrap'+panelnr;



$(document).ready(function(){
   
   //get the panel to show
   $(panel).css('display','block');
   
   //get the hover effect of the control items
  
  
  $('.controldot').mouseover(function() {
  		$(this).css('background-image','url(slider/controldotwhite.png)');
	});
   $('.controldot').mouseout(function() {
  		$(this).css('background-image','url(slider/controldotgrey.png)');
	});
   
   //make the first image active since the first image is always shown
   $('#controldot1').css('background-image','url(slider/controldotwhite.png)');
   
   

	
	 //reset all the controldots when a thing is called when a controldot is clicked. Cancel the slideshow
   
   $('.controldot').click(function() {
		cancelshow();
  		 $('#controldiv ul li a').css('background-image','url(slider/controldotgrey.png)');
		 $('#controldiv ul li a').mouseout(function() {
  			$(this).css('background-image','url(slider/controldotgrey.png)');
		});
   });
   
   //write the animationcode for the controlbuttons
   $('#controldot1').click(function() {
		
  		$(panel).animate({left: '-0' }, 500);
		
		$(this).css('background-image','url(slider/controldotwhite.png)');
		$(this).mouseout(function() {
  			$(this).css('background-image','url(slider/controldotwhite.png)');
		});
	});
   $('#controldot2').click(function() {
  		$(panel).animate({left: '-683' }, 500);
		
		$(this).css('background-image','url(slider/controldotwhite.png)');
		$(this).mouseout(function() {
  			$(this).css('background-image','url(slider/controldotwhite.png)');
		});
	});
   $('#controldot3').click(function() {
  		$(panel).animate({left: '-1366' }, 500);
		
		$(this).css('background-image','url(slider/controldotwhite.png)');
		$(this).mouseout(function() {
  			$(this).css('background-image','url(slider/controldotwhite.png)');
		});
	});
   $('#controldot4').click(function() {
  		$(panel).animate({left: '-2049' }, 500);
		
		$(this).css('background-image','url(slider/controldotwhite.png)');
		$(this).mouseout(function() {
  			$(this).css('background-image','url(slider/controldotwhite.png)');
		});
	});
   $('#controldot5').click(function() {
  		$(panel).animate({left: '-2732' }, 500);
		
		$(this).css('background-image','url(slider/controldotwhite.png)');
		$(this).mouseout(function() {
  			$(this).css('background-image','url(slider/controldotwhite.png)');
		});
	});
});


var timeout = 0;

//start the initial slideshow
timeout = setInterval ( "slidepanel()", 5000 );

function slidepanel()
	{
		if($(panel).css('left')=='-2732px')
		{
			$(panel).animate({left: '0' }, 500);
			$('#controldot5').css('background-image','url(slider/controldotgrey.png)');
			$('#controldot1').css('background-image','url(slider/controldotwhite.png)');
		}
		else
		{
			
			if($(panel).css('left')=='0px')
			{
				$('#controldot1').css('background-image','url(slider/controldotgrey.png)');
				$('#controldot2').css('background-image','url(slider/controldotwhite.png)');	
			}
			else if($(panel).css('left')=='-683px')
			{
				$('#controldot2').css('background-image','url(slider/controldotgrey.png)');
				$('#controldot3').css('background-image','url(slider/controldotwhite.png)');
			
			}
			else if($(panel).css('left')=='-1366px')
			{
				$('#controldot3').css('background-image','url(slider/controldotgrey.png)');
				$('#controldot4').css('background-image','url(slider/controldotwhite.png)');
			
			}
			else if($(panel).css('left')=='-2049px')
			{
				$('#controldot4').css('background-image','url(slider/controldotgrey.png)');
				$('#controldot5').css('background-image','url(slider/controldotwhite.png)');
			
			}
			//slide the panel
			$(panel).animate({left: '-=683' }, 500);
		
		}
			
	}

function cancelshow()
{
	clearInterval ( timeout );
}