/*
 * manages a carousel, dynamically controled via three book-staples incl. ajax-calls
 * 
 * needs: jquery.carousel3d.js
 *        Tween.js
 * 
 */

var staple_animated = false; 
var animation_delay = 120; //time to wait if a button(+/-) is hold down to animate the next step
var xhr = null; //actual ajax-request
var hTimer = null; 
var carousel_timeout = 500; // time to wait before sending ajax-call
var images_ok = 0; //var for callback when images are completely loaded

/*
 * starting position of the carousel, when the page is loaded
 */
window.onload=(function($){
  jQuery('#staple_1_val').val(5);
  jQuery('#staple_2_val').val(5);
  render_staple(1, 5)
  render_staple(2, 5)

  start_timer();
})

/*
 * function to get a new carousel with books according to the 3 values
 * 
 * when the user changed the values a timer that waits 'carousel_timeout'[ms] is started before the
 * ajax-request is sent. if meanwhile the values are changed again the old ajax-request will
 * be aborted or, if not sent, the timeout will be deleted so it won't be done
 */
function start_timer(){
		if (xhr != null){
      xhr.abort();
    }
    stop_timer();
    jQuery('#carousel').fadeOut("slow");
    jQuery('#bookstage_ajax_wrapper').fadeIn("slow");  
    hTimer = setTimeout("new_carousel()", carousel_timeout);
	}

/*
 * stops/deletes the timer for an ajax-request
 */
function stop_timer(){
  if (hTimer != null) {
    window.clearTimeout(hTimer);
    hTimer = null;
  }
  images_ok = 0;
}

/*
 * does the ajax-request for the books
 */
function new_carousel() {      
    jQuery('#carousel *').remove().hide();
    
    xhr = jQuery.ajax({
      url: "/buecher/carousel",      
      data: "val1=" + jQuery('#staple_1_val').val()
            +"&val2=" + jQuery('#staple_2_val').val(),
      cache: false,
      success: function(html){        
        jQuery("#carousel").append(html);
        //callbacks when images are loaded
        for (var i = 0; i <=6; i++){
          jQuery('#car_img_' + i).load(function() {            
            image_loaded(i) ;
          }); 
        }       
      }
    });  
}



/*
 * checks if all seven images are loaded completely
 */
function image_loaded(i) { 
  images_ok++;
  if (images_ok == 7)  {
    jQuery('#bookstage_ajax_wrapper').fadeOut("slow");
    change_car();
  }
}

/*
 * if everything is prepared - init the new carousel
 */
function change_car(){ 
    jQuery('#carousel').fadeIn("slow");// fadeIn the images
    jQuery("#carousel").carousel3d({ 
      radiusX: 100, 
      control: 'buttons',          
      padding: 30,
      centerX: 0 }); 
}


jQuery(function($){
  $('#carousel_left').hover(carousel_hover, carousel_hover);
  $('#carousel_right').hover(carousel_hover, carousel_hover);
 
  $('#staple_1_up').hover(carousel_hover, carousel_hover);
  $('#staple_1_down').hover(carousel_hover, carousel_hover);
  $('#staple_1_up').mousedown(staple_1_inc);  
  $('#staple_1_up').mouseup(staple_animate_stop); 
  $('#staple_1_down').mouseup(staple_animate_stop);
  $('#staple_1_down').mousedown(staple_1_dec);
  $('#staple_1 > div').mouseover(staple_1_over);
  $('#staple_1').bind('mouseleave', staple_1_out);
  $('#staple_1 > div').click(set_val_staple_1);
  
  $('#staple_2_up').hover(carousel_hover, carousel_hover);
  $('#staple_2_down').hover(carousel_hover, carousel_hover);
  $('#staple_2_up').mousedown(staple_2_inc);  
  $('#staple_2_up').mouseup(staple_animate_stop);
  $('#staple_2_down').mouseup(staple_animate_stop);
  $('#staple_2_down').mousedown(staple_2_dec);
  $('#staple_2 > div').mouseover(staple_2_over);
  $('#staple_2').bind('mouseleave', staple_2_out);
  $('#staple_2 > div').click(set_val_staple_2);
})

function carousel_hover(){
  jQuery(this).toggleClass("hover");  
}

/*
 * animated inc/dec of of a staple stops
 */
function staple_animate_stop(){ 
  staple_animated = false; 
  start_timer();
}

/*
 * increases staple_1, updates views
 */
function staple_1_inc(){ 
  staple_animated = true;
  staple_1_animate_inc();
}

function staple_1_animate_inc() {
  var el = jQuery('#staple_1_val');
  var val = el.val();
  if (val < 0 || val > 10) el.val(0); //no hackers please
  if (val < 10 && staple_animated){
    val++;
    el.val(val);
    render_staple(1, val);
    setTimeout("staple_1_animate_inc()", animation_delay);
  } 
}

/*
 * decreases staple_1, updates views
 */
function staple_1_dec(){
  staple_animated = true;
  staple_1_animate_dec();  
}

function staple_1_animate_dec() {
  var el = jQuery('#staple_1_val');
  var val = el.val();
  if (val < 0 || val > 10) el.val(0); //no hackers please
  if (val > 0 && staple_animated){
    val--;
    el.val(val);
    render_staple(1, val);
    setTimeout("staple_1_animate_dec()", animation_delay);
  }  
}

/*
 * saves the value of the staple in the hidden-field
 */
function set_val_staple_1(){
  var val = this.id.slice(this.id.length - 2, this.id.length)
  jQuery('#staple_1_val').val(val);
  render_staple(1,val);
  start_timer();
}

/*
 * called to show hover-effect when mouse-over books in staple
 */
function staple_1_over(){
  render_staple_over(1, this.id.slice(this.id.length - 2, this.id.length));
}

/*
 * called when mouse leaves the surrounding staple_1 div
 */
function staple_1_out(){  
  render_staple(1, jQuery('#staple_1_val').val());
}



/*
 * increases staple_2, updates views
 */
function staple_2_inc(){ 
  staple_animated = true;
  staple_2_animate_inc();
}

function staple_2_animate_inc() {
  var el = jQuery('#staple_2_val');
  var val = el.val();
  if (val < 0 || val > 10) el.val(0); //no hackers please
  if (val < 10 && staple_animated){
    val++;
    el.val(val);
    render_staple(2, val);
    setTimeout("staple_2_animate_inc()", animation_delay);
  } 
}

/*
 * decreases staple_2, updates views
 */
function staple_2_dec(){
  staple_animated = true;
  staple_2_animate_dec();  
}

function staple_2_animate_dec() {
  var el = jQuery('#staple_2_val');
  var val = el.val();
  if (val < 0 || val > 10) el.val(0); //no hackers please
  if (val > 0 && staple_animated){
    val--;
    el.val(val);
    render_staple(2, val);
    setTimeout("staple_2_animate_dec()", animation_delay);
  }  
}

/*
 * saves the value of the staple in the hidden-field
 */
function set_val_staple_2(){
  var val = this.id.slice(this.id.length - 2, this.id.length)
  jQuery('#staple_2_val').val(val);
  render_staple(2,val);
  start_timer();
}

/*
 * called to show hover-effect when mouse-over books in staple
 */
function staple_2_over(){  
  render_staple_over(2, this.id.slice(this.id.length - 2, this.id.length));
}

/*
 * called when mouse leaves the surrounding staple_1 div
 */
function staple_2_out(){  
  render_staple(2, jQuery('#staple_2_val').val());   
}

/*
 * renders staple 1 or 2 with the given value between [0, 10]
 */
function render_staple(staple, val){
  var _staple = (jQuery('#staple_'+ staple +' > div').slice(1));
  _staple.slice(0,val).css('opacity', 0);
  _staple.slice(val).css('opacity', 1);
}

/*
 * renders staple 1 or 2 with the given value between [0, 10],
 * the differnce to the actual value is shown with opacity
 */
function render_staple_over(staple, val){
  var _staple = (jQuery('#staple_'+ staple +' > div').slice(1));  
  var val_act = jQuery('#staple_'+staple+'_val').val();

  if (parseInt(val_act, 10) > parseInt(val,10)){
    _staple.slice(0, val).css('opacity', 0);
    _staple.slice(val, val_act).css('opacity', 0.5);      
    _staple.slice(val_act).css('opacity', 1);
  }
  else{
    _staple.slice(0, val_act).css('opacity', 0);
    _staple.slice(val_act, val).css('opacity', 0.5);
    _staple.slice(val).css('opacity', 1);   
  }  
}