//current position
var pos = 0;
//number of slides
var totalslides = $('#slider-wrap ul li').length;
//get the slide width
var sliderwidth = 658;


$(document).ready(function(){
	
	
	/*****************
	 build the slider
	*****************/
	//set width to be 'x' times the number of slides
	$('#slider-wrap ul#slider').width(sliderwidth*totalslides);
	
    //next slide 	
	$('#next').click(function(){
		slideright();
	});
	
	//previous slide
	$('#previous').click(function(){
		slideleft();
	});
	
	
	
	/*************************
	 //*> optional settings
	************************/
	//automatic slider
	var autoslider = setinterval(slideright, 6000);
	
	//for each slide 
	$.each($('#slider-wrap ul li'), function() { 
	   //set its color
	   var c = $(this).attr("data-color");
	   $(this).css("background",c);
	   
	   //create a pagination
	   var li = document.createelement('li');
	   $('#pagination-wrap ul').append(li);	   
	});
	
	//counter
	countslides();
	
	//pagination
	pagination();
	
	//hide/show controls/btns when hover
	//pause automatic slide when hover
	$('#slider-wrap').hover(
	  function(){ $(this).addclass('active'); clearinterval(autoslider); }, 
	  function(){ $(this).removeclass('active'); autoslider = setinterval(slideright, 6000); }
	);
	
	

});//document ready
	


/***********
 slide left
************/
function slideleft(){
	pos--;
	if(pos==-1){ pos = totalslides-1; }
	$('#slider-wrap ul#slider').css('left', -(sliderwidth*pos)); 	
	
	//*> optional
	countslides();
	pagination();
}


/************
 slide right
*************/
function slideright(){
	pos++;
	if(pos==totalslides){ pos = 0; }
	$('#slider-wrap ul#slider').css('left', -(sliderwidth*pos)); 
	
	//*> optional 
	countslides();
	pagination();
}



	
/************************
 //*> optional settings
************************/
function countslides(){
	$('#counter').html(pos+1 + ' / ' + totalslides);
}

function pagination(){
	$('#pagination-wrap ul li').removeclass('active');
	$('#pagination-wrap ul li:eq('+pos+')').addclass('active');
}