$(function () {
  //NOTE: This needs further changes (not too many) to work with Div's with images inside.
  var transitionLength = 350;
  var timeBetweenTransitions = 30000;

  var bannerDiv = $("#banner-slideshow");
  var bannerContent = bannerDiv.find("#banner-content");
  var bannerFrameDivs = bannerContent.find("div");
  
  var bannerFrameHtmlArray = [];
  
  bannerFrameDivs.each( 
    function( i, e ){
      bannerFrameHtmlArray.push( $(e).html() );
    }
  );

  var currentlySelectedFrameIndex = (bannerDiv.attr("class").replace("startframe-", "") * 1);
  var totalFrameCount = bannerFrameDivs.length;

  var nextDivIndex = currentlySelectedFrameIndex + 1;

  if ((nextDivIndex >= totalFrameCount)) {
    nextDivIndex = 0;
  }

  bannerFrameDivs.attr("class", "inactive");
  var firstTiming = bannerContent.find("#frame" + currentlySelectedFrameIndex).attr("class", "current").attr('rel') * 1;

  var nextPreviousDivs = $(".next-item, .previous-item").fadeIn("fast");
  
  var interval = setInterval( animateNextFrame, firstTiming );
  
  $(".next-item").click(
    function(){
      animateNextFrame();
      return false;
    }
  );
  
  $(".previous-item").click(
    function(){
      animateNextFrame(true);
      return false;
    }
  );
  
  function setCorrectInterval( frame ){
    var currentTime =  $(frame).attr('rel') * 1;      
    clearInterval(interval);
    interval = setInterval( animateNextFrame, currentTime );
  }
  
  function animateNextFrame( previous ){
    //Gets the currently displayed frame
    var currentFrame = bannerContent.find(".current");
    
    if( previous != true && previous != false ){
      previous = false;
    }
    
    var newDisplayedFrame;
    
    if( !previous ){
      newDisplayedFrame = $("#frame" + nextDivIndex);
    } else {
      var currentFrameIndex = ( currentFrame.attr("id").replace("frame","") * 1 );
      var newFrameIndex = currentFrameIndex - 1;
      if( newFrameIndex < 0 ){
        newFrameIndex = totalFrameCount - 1;
      }
      newDisplayedFrame = $("#frame" + newFrameIndex); 
      nextDivIndex = newFrameIndex;
    }
    
    newDisplayedFrame.html( "" );
    newDisplayedFrame.html( bannerFrameHtmlArray[nextDivIndex] )
                      .find('img')
                      .attr('src', '' )
                      .attr('src', $(bannerFrameHtmlArray[nextDivIndex]).find('img').attr('src') + getRandomNumberUrl() );      
                      
    newDisplayedFrame.addClass("next").css({ left: "711px" });
    
    newDisplayedFrame.animate(
      { left: 0 },
      transitionLength,
      function () {
        newDisplayedFrame.removeClass("next").removeClass("inactive").addClass("current");
        currentFrame.removeClass("current").addClass("inactive").css({ left: '712px' });
        
        nextDivIndex++;
        
        checkNextDivIndex();     

        setCorrectInterval(newDisplayedFrame);
      }
    );
  }
  
  function getRandomNumberUrl(){
    return "?" + Math.floor(Math.random()*1001);
  }
  
  function checkNextDivIndex(){
    if (nextDivIndex >= totalFrameCount){
      nextDivIndex = 0;
      return;
    }  
    if ( nextDivIndex < 0 ){
      nextDivIndex = totalFrameCount - 1;
    }
  }

});