var $j = jQuery.noConflict();

$j(document).ready(function(){
	if($j('#slider').html() == null){
		;return;
	}
	
	currentDiv  = 1;
	button   = 1;
	width    = $j('#slider').css('width').replace('px', ''); 
	
	arrDiv = $j('#slider div');//create array of product ids
	nofDivs = arrDiv.length;
	i = 1;
	
	$j.each(arrDiv, function(index, val) { 
		$j(val).attr('id', 'slider_'+i);
		//add css attributes to those divs
		//width: 329px;/*match witdh #slider width*/
		//left:329px; /*match witdh #slider width*/
		//position: absolute; /*dont change*/
		$j(val).css('position', 'absolute');
		$j(val).css('width', width+'px');
		$j(val).css('left', width+'px');
		i++;
	});
	

	//on init we have to do some basic actions
	$j('#slider_1').animate({"left": "0px"}, 400, "swing");
	/////
	
	
	$j("#nextContent").click(function() {
//		alert("I AM a retarded DOM element and I got an awesome name called: "+currentDiv);
		button = currentDiv;
		currentDiv++
		
		//reset currentDiv
		if (currentDiv == (nofDivs+1)) {
			currentDiv = 1;
		}
		
		
		animateLeft(currentDiv,button)
	});
	
	
	$j("#previousContent").click(function() {
//		alert("I AM a retarded DOM element and I got an awesome name called: "+currentDiv);
		button = currentDiv;
		currentDiv--
		
		//reset currentDiv
		if (currentDiv == 0 ){
			currentDiv = nofDivs;
		}

		
		animateRight(currentDiv,button)
	});
	
	
	
	
	function animateLeft(currentDiv,button) {
		$j('#slider_'+currentDiv).css("left",width +"px");
		$j('#slider_'+currentDiv).animate({"left": "0px"}, 400, "swing");
		$j('#slider_'+button).animate({"left": -width+"px"}, 400, "swing");
		setbutton()
	}
	
	
	function animateRight(currentDiv,button) {
		$j('#slider_'+currentDiv).css("left",-width+"px");
		$j('#slider_'+currentDiv).animate({"left": "0px"}, 400, "swing");
		$j('#slider_'+button).animate({"left": width+"px"}, 400, "swing");
		setbutton()
	}
	
	
	function setbutton () {
		$j('#b'+button).css("backgroundPosition", "left top")
		$j('#b'+button+' b').css("color","#16a");
		$j('#b'+currentDiv).css("backgroundPosition", "left bottom")
		$j('#b'+currentDiv+' b').css("color","#fff");
	}
});