$(document).ready(function(){
 if($('#slidesContainer').length>0){
    
    //!Not connected with the rotator at all!
    
    //Using the fact that we know this is the main page to change the margin-top of the footer
    $('#FooterDivider').css('margin-top','10px');
    
    //END Not connected with the rotator at all!
    
    
    
    var currentPosition = 0;
    var slideWidth=960;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var loop_pos=0;
    var timer = self.setInterval( slide, 5500 );
    var myTimeout;
    //Set style for the first slide
    document.getElementById('A0').style.color="#000";
    document.getElementById('A0').style.backgroundColor="#fff";
    document.getElementById('A0').style.cursor="default";
  
    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');
  
    // Wrap all .slides with #slideInner div
    slides
    .wrapAll('<div id="slideInner"></div>')
  
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });
  
    // Set #slideInner width equal to total width of all slides
    $('#slideInner')
    .css('width', slideWidth * numberOfSlides);
  
    // Create event listeners for .controls clicks
    $('.control').bind('click', function (){
      // Determine new position
      var targetId,newPosition;
      targetId=$(this).attr('id');
      targetId=targetId.charAt(1);
      newPosition = parseInt(targetId);
      timer=self.clearInterval(timer);
    var i;
    i=0;
      while (newPosition!=currentPosition){
    //if(i==2){
    //  $.doTimeout(100,function() { 
    //    if (newPosition>currentPosition){
  //        slide();
    //    } else {
    //      slide_left();
    //    }  
    //  });
    //} else {
      if (newPosition>currentPosition){
        slide();
      } else {
        slide_left();
      }
    //}
    
    //i=Math.abs(newPosition-currentPosition);
      }
      if(myTimeout){
        self.clearTimeout(myTimeout);
      }
      myTimeout = self.setTimeout ( function(){timer = self.setInterval( slide, 3500 );}, 4500 );
    });  
    
      //CharCode of 65 is A. When adding to 65 the targetId you get the current letter of the current(new) slide. Then we add(string add) the targetId in it's int
      // form to get the target control in that slide.
      //document.getElementById(String.fromCharCode(65+parseInt(targetId))+targetId).style.color="red";

    }
    
  function delfirst(){
    if($('.slide:first').attr("id")=="new_id"){
      $('.slide:first').remove();    
    }
  }
  function dellast(){
    if($('.slide:last').attr("id")=="new_id"){
      $('.slide:last').remove();    
    }
  }
  function slide(){
  // Determine new position

    if(loop_pos<3){
      loop_pos++;

    }
    else{
      placeholder = $('.slide:first').clone();
      $(placeholder).attr('id', 'new_id')

      $('.slide:first').appendTo('#slideInner');

      //$('#slideInner').css({marginLeft:slideWidth*(-2)+'px'});
      $('#slideInner').css({marginLeft:slideWidth*(-2)+'px'});
      $(placeholder).prependTo('#slideInner');  

    }
    $('#slideInner').animate({'marginLeft' : slideWidth*(-loop_pos)}, delfirst());


    if (currentPosition<3){
      currentPosition++;
    }
    else {
      currentPosition=0;
    }
    var targetControl;
    switch (currentPosition){
      case 0: 
        targetControl="A";
        break;
      case 1: 
        targetControl="B";
        break;
      case 2: 
        targetControl="C";
        break;
      case 3: 
        targetControl="D";
        break;
    }
    //alert(targetControl);
    document.getElementById(targetControl+currentPosition).style.color="#000";
    document.getElementById(targetControl+currentPosition).style.backgroundColor="#fff";
    document.getElementById(targetControl+currentPosition).style.cursor="default";
  } 
  function slide_left(){
    if(loop_pos>1){
      loop_pos--;

    }
    else{
      placeholder = $('.slide:last').clone();
      $(placeholder).attr('id', 'new_id')

      $('.slide:last').prependTo('#slideInner');

      $('#slideInner').css({marginLeft:slideWidth*(-2)+'px'});
      $(placeholder).appendTo('#slideInner');  

    }
    $('#slideInner').animate({'marginLeft' : slideWidth*(-loop_pos)}, dellast());


    if (currentPosition>0){
      currentPosition--;
    }
    else {
      currentPosition=3;
    }
    var targetControl;
    switch (currentPosition){
      case 0: 
        targetControl="A";
        break;
      case 1: 
        targetControl="B";
        break;
      case 2: 
        targetControl="C";
        break;
      case 3: 
        targetControl="D";
        break;
    }
    //alert(targetControl);
    document.getElementById(targetControl+currentPosition).style.color="#000";
    document.getElementById(targetControl+currentPosition).style.backgroundColor="#fff";
    document.getElementById(targetControl+currentPosition).style.cursor="default";
  
  }
});