/*

  jQuery UI CoverFlow II App for jQueryUI 1.8.6 / core 1.4.4
  Copyright Addy Osmani 2010.
*/

  $(function() {
  

    //cache core component references
    var html = $('#demo-frame div.wrapper').html();
    var imageCaption = $('#imageCaption');
    $('#demo-frame div.wrapper').parent().append(html).end().remove();
    $sliderCtrl = $('#slider');
    $coverflowCtrl = $('#coverflow');
    $coverflowImages = $coverflowCtrl.find('img');
    $sliderVertical  = $("#slider-vertical");
    var wait = false;
      //app defaults
        var defaultItem  = 2;
    var listContent = "";
    
         
       //Set the default image index.   
     setDefault(2);
  

       //Set the default item to display on load.
       //Correct indexing
     function setDefault($n){
        defaultItem = $n-1;  
     }
     
     //set the image caption
     function setCaption($t){
       imageCaption.html($t);
     }

    
    //Initialize CoverFlow
    $coverflowCtrl.coverflow({
        item: defaultItem,
        duration:1200,
      select: function(event, sky) 
      {
      skipTo(sky.value);

      }
    });
      

       //Initialize Horizontal Slider
    $sliderCtrl.slider({
      min: 0,
      max: $('#coverflow > *').length-1,
      value: defaultItem,
      slide: function(event, ui) {
        $coverflowCtrl.coverflow('select', ui.value, true);
        $('.coverflowItem').removeClass('ui-selected');
                $('.coverflowItem:eq(' + (ui.value) +')').addClass('ui-selected');
                setCaption($('.coverflowItem:eq(' + (ui.value) +')').html());

      }
    });
    
      
     //Skip to an item in the CoverFlow  
     function skipTo($itemNumber)
       {  
          $sliderCtrl.slider( "option", "value", $itemNumber);
          $coverflowCtrl.coverflow('select', $itemNumber, true);
          $('.coverflowItem').removeClass('ui-selected');
          $('.coverflowItem:eq(' + ($itemNumber) +')').addClass('ui-selected');
          setCaption($('.coverflowItem:eq(' + ($itemNumber) +')').html());

       }


    skipTo(defaultItem);
    
    function next(){
      $current = $sliderCtrl.slider('value');
      if($current < $('#coverflow > *').length-1){
           $current++;
           skipTo($current);
      }else{
        skipTo(0);
      } 
      
    }
    
    //Assign click event for coverflow images 
    $('body').delegate('.coverflowItem','click', function(){
       skipTo($(this).data('itemlink'));
            wait = true;
    });
    
    
    
    //Handle keyboard events
    $(document).keydown(function(e){
    
      $current = $sliderCtrl.slider('value');
      wait = true;
       switch(e.keyCode){   
         case 37:
         if($current > 0){ 
           $current--;
           skipTo($current);
         }
         break;
         
         case 39: 
         next();  
         break;
       }
       
    });
    
    window.setInterval(function(){
      if (!wait){
        next();   
      }else{
        wait = false;
      }
    }, 8000);

    
    
    
    

  //change the main div to overflow-hidden as we can use the slider now
  $("#scroll-pane").css('overflow','hidden');
  
  //calculate the height that the scrollbar handle should be
  var difference = $("#sortable").height()-$("#scroll-pane").height();//eg it's 200px longer 
  var proportion = difference / $("#sortable").height();//eg 200px/500px
  var handleHeight = Math.round((1-proportion)*$("#scroll-pane").height());//set the proportional height



  //set up the slider  
  $sliderVertical.slider({
    orientation: "vertical",
    range: "max",
    min: 0,
    max: 100,
    value: 0 ,
    slide: function(event, ui) 
    {
      
      var topValue = -((100-ui.value)*difference/100);
      $("#sortable").css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
    }
  });

  
  var origSliderHeight = $sliderVertical.height();//read the original slider height
  var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height
  var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;//so the slider needs to have both top and bottom margins equal to half the difference
  
  
  /*Force the scrollers to bring the current item into view.*/
  /*This can all be commented out if not needed*/
  function setScrollPositions(item){
  
  var q =  item * 5;
  var qx = -35;

  $sliderVertical.slider('value', q);
  $('#sortable').css('top', -q + qx);
  

  }
  

  setScrollPositions(defaultItem);

  
  


    
  

    
});