/*************CHANGE!!!! for strict validation*******************/
//<![CDATA[
 
 
 
//sets the indexes for stopping
	var indexes=document.createElement('div');
	indexes.style.position="absolute";
	indexes.style.top="237px";/*************CHANGE!!!!*******************/
	indexes.style.left="10px";
	indexes.setAttribute("id","indexes");
	
	var mspans=new Array();
	
 
 
var outCP=0;//i use this variable for the autoscrolling feauture,you dont have to change it 
var outnOS=0;//shame as above
 
//when document is ready the function declared is excecuted
$(document).ready(function(){
  var currentPosition = 0;//the current position of the slider
  var slideWidth = 570;//the width we have set in the css.We could get it back programaticaly if we want to,instead of just typing it,but sometimes it takes some time until all elements are positioned
			//if not,remember to set it everytime you use it.
  var slides = $('.slide');//the slides are all divs of class slide
  var numberOfSlides = slides.length;//how many slides we got
	outnOS=numberOfSlides;//just for autoscroller
	
	//we fix the indexes area
	for(var i=0;i<numberOfSlides;i++)
	{
		var separator="&nbsp;";
		if(i==0)
			separator="";
		mspans[i]=document.createElement('span');
		mspans[i].setAttribute("class","index");
		var myA=document.createElement('a');
		myA.setAttribute("href","javascript:stopAndScroll("+i+");void(0);");
		myA.innerHTML=(i+1);
		//myA.style.verticalAlign="center";
		//myA.style.marginBottom="50%";
		mspans[i].appendChild(myA);
		
		mspans[i].style.backgroundImage="url(\'../images/black.png\')";
		//IE fix
		if(navigator.userAgent.match("MSIE"))
		{
		mspans[i].style.display="inline-block";
		mspans[i].style.width="24px";
		mspans[i].style.height="24px";
		
		myA.style.display="inline-block";
		myA.style.width="24px";
		myA.style.height="24px";
		myA.style.paddingTop="25%";
		}
		//End of IE fix
		var tspan=document.createElement('span');
		tspan.innerHTML=separator;
		indexes.appendChild(tspan);
		indexes.appendChild(mspans[i]);
		
	}
	indexes.style.zIndex="10000";
	document.getElementById('slideshow').appendChild(indexes);
	mspans[outCP].style.backgroundImage="url(\'images/red.png\')";/*************CHANGE!!!!*******************/
 
	//spans[0].style.backgroundColor="#770000";
  // remove scrollbar (slides are next to each other)
  $('#slidesContainer').css('overflow', 'hidden');//we set overflow hidden so we can hide the hiden slides 
 
  // Wrap all .slides with #slideInner div
	//that means we insert an HTML structure around the slides
  slides
    .wrapAll('<div id="slideInner"></div>')
    // float left to display horizontally, and we readjust .slides width=slideWidth
	.css({
      'float' : 'left',
      'width' : slideWidth
    });
	
  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
 
//////controls/////////////
  // Insert right-left arrow in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
	 $('#leftControl').css('left', '5px');
	$('#rightControl').css('left', ''+(slideWidth-20)+'px');
  //We should hide the left arrow control on first load
 
  manageControls(currentPosition);
 
  // create event listeners for .controls clicks
//these controls will be used for the autoscrolles also
  $('.control')
    .bind('click', function(){
	
		
    // determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;//if it is rightcontrol move right,else move left
    	outCP=currentPosition;
 
		
		//we change the right color to index
		clearSpansBack(mspans);
		mspans[outCP].style.backgroundImage="url(\'images/red.png\')";/*************CHANGE!!!!*******************/
		
 
	//we should manage (hide or show) our controls after every move
    manageControls(currentPosition);
 
	
 
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
 
  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
 
	
		
 
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
 
 
	
	//autoscrolling
	
 
	scrollIt();	
});
var tim;
var into=false;
 
function clearSpansBack(sp)//makes all index background black
{
	
	for(var i=0;i<sp.length;i++)
		//sp[i].style.backgroundColor="#000000";
		sp[i].style.backgroundImage="url(\'images/black.png\')";/*************CHANGE!!!!*******************/
}
 
function stopAndScroll(to)//moves the slider to the given place (to)
{
	 stoper=true;//stops the scrollit;
	clearTimeout(tim);//clear timeout in case its still alive
	if(outCP==to)
		return;//we are on the right place
	else if(outCP>to)//we have to scroll left
	{
		for(var i=outCP;i>to;i--)
			$("#leftControl").click();
		
	}
	else if(outCP<to)//we have to scroll right
	{
		for(var i=outCP;i<to;i++)
			$("#rightControl").click();
		
	}
		outCP=to;
}
 
function scrollIt()//autoscrolls the slider
{
 
	
	if(stoper)
		return;
	
	if(into)
	{
	$('#rightControl').click();
	}
	else
	{
		into=true;
	}
	if(outCP==outnOS-1)//turn the slider back to 0
	{
		
		for(var i=outCP;i>0;i--)
			setTimeout('$("#leftControl").click()',3500);
		into=false;
	
	
			
	}
	
	tim=setTimeout('scrollIt()',5500);//3,5 sec between scrolls
}
var stoper=false;
 
/*************CHANGE!!!! for strict validation*******************/
//]]>