/*
* Custom script for the banner rotator
* jQuery is in no-Conflict mode
*/

var set_stop = false;
var timer_id = -1;
var timer_stop = -1;
var position = 2;
var active = 0;
var cursor_at = 0;

jQuery(document).ready(function($){
  //function($) = use $ as selector instead of jQuery (default no-Conflict mode)
    
  //prepare the big banners
  $('#top_banner_right').children('img:not(first)').each(function(){
    $(this).attr("style","position: absolute; top: 0; left: 0;");
    $(this).fadeTo(0,0);
  });
  $('#top_banner_right').children(':first').attr("style","position: absolute; top: 0; left: 0; opacity:1");
  $('#top_banner_right').children(':first').fadeTo(0,1);
  
  //lets bind the mouseover to the arrows and change the banners
  $('#top_banner_left a').each(function(index){
    //index starts at 0!    
    //prepare the images
    $(this).children(':first').attr("style","position: absolute; top:"+index*80+"px; left: 0;");
    $(this).children(':last').attr("style","position: absolute; top:"+index*80+"px; left: 0;");
    $(this).children(':last').fadeTo(0,0);
    
    //on mouseover change the pic of the banner left and the big banner right
    $(this).mouseover(function(){
      fade_in_left(index+1, 600);
      fade_right(index+2, 600);
      cursor_at = index+1;
    });
    //on mouseout change back to the original banner left pic
    $(this).mouseout(function(){
      fade_out_left(index+1, 600);
    });
    
  });
  
  //the rotation
  
  $('#top_banner').mouseenter(function(){ 
    //if user enters with mouse, set stop variable, clear the rotation timer, clear the active element and start checking if rotation should remain stopped or start
      set_stop = true; 
      if(timer_id != -1){clearTimeout(timer_id);}
      clear_active();
      check_rotate(); 
    });
    
  $('#top_banner').mouseleave(function(){ 
    //if user exits with mouse, unset the stop variable, on next checking of stop, the rotation gets active again
      set_stop = false; 
    });
  
  //start the rotation loop
  start_rotate();
  
});

/* rotating the banner */
function rotate(){
  (function($) {
    // $() will work as an alias for jQuery() inside of this function  
    /*
    position = currently active element of the big right banner (4 big banners right, 3 small banners left)!!!
    */
      
    //if there is a currently active element, fade it out      
    if(active > 0){
      fade_out_quick_left(active)
    }
    
    //fade the new element
    if(position > 1){
      fade_in_left(position-1, 1000);
    }
    
    //fade the big banner
    fade_right(position, 1000);

    //set the position and the current active element
    if(position < 4){
      position += 1;
    }
    else{
      position = 1;
    }
    set_active_element();
    
    //check if the user entered with the mouse, if no - just rotate, if yes - stop the rotation
    if(set_stop){
      stop_rotate();
    }
    else{
      start_rotate();
    }
    
      
  })(jQuery);
}

//fades out the currently active element on the left side, based on active variable
function clear_active(){
  (function($) {
    if(active > 0 && cursor_at != active){
      fade_out_quick_left(active);
    }
  })(jQuery);  
}

//starts the rotation in 2 secs
function start_rotate(){
  timer_id = window.setTimeout('rotate()', 4000);
}

//stops the rotation for 3 secs
function stop_rotate(){
  timer_stop = window.setTimeout('check_rotate()', 3000);
}

//check if the rotation should remain stopped or should start again
function check_rotate(){
  if(set_stop){
    if(timer_stop != -1){
      clearTimeout(timer_stop);
      timer_stop = -1;
    }
    stop_rotate();
  }
  else{
    if(timer_stop != -1){
      clearTimeout(timer_stop);
      timer_stop = -1;
    }
    //position = 1;
    //active = 0;
    if(cursor_at < 3){
      position = cursor_at + 2;
    }
    else{
      position = 1;
    }
    active = 0;
    start_rotate();
  }
}

//fades in an element on the left side
function fade_in_left(pos, speed){
  (function($) {
    $('#top_banner_left').children(':nth-child('+(pos)+')').children(':first').fadeTo(speed, 0);
    $('#top_banner_left').children(':nth-child('+(pos)+')').children(':last').fadeTo(speed, 1);
  })(jQuery);
}

//fades out an element on the left side
function fade_out_left(pos, speed){
  (function($) {
    $('#top_banner_left').children(':nth-child('+(pos)+')').children(':first').fadeTo(speed, 1);
    $('#top_banner_left').children(':nth-child('+(pos)+')').children(':last').fadeTo(speed, 0);
  })(jQuery);
}

//fades out an element on the left side really quickly
function fade_out_quick_left(pos){
  (function($) {
    $('#top_banner_left').children(':nth-child('+pos+')').children(':first').fadeTo(300, 1).delay(700);
    $('#top_banner_left').children(':nth-child('+pos+')').children(':last').fadeTo(300, 0).delay(700);
  })(jQuery);
}

//fade in an element on the right side
function fade_right(pos, speed){
  (function($) {
    $('#top_banner_right').children(':not(:nth-child('+pos+'))').fadeTo(speed, 0);
    $('#top_banner_right').children(':nth-child('+pos+')').fadeTo(speed, 1);
  })(jQuery);
}

//sets the currently active element left, depending on the position variable
function set_active_element(){
  if(position == 1){active = 3;}
  if(position == 2){active = 0;}
  if(position == 3){active = 1;}
  if(position == 4){active = 2;}
}