$(document).ready(function(){
    // initialize scrollable  
    $("div.scrollable").scrollable({   
        size: 1,
        autoplay: false,
        steps: 1,
        interval: 2000,
        disabledClass: "disabled",
        hoverClass: "active",
        loop: false,
        keyboardSteps: 1,
        easing: 'swing',
        speed: 1300
    }).mousewheel();
    
    /*
    $("div.scrollable_vertical").scrollable({
        vertical: true,   
        size: 10,
        autoplay: false,
        steps: 1,
        interval: 2000,
        disabledClass: "disabled",
        hoverClass: "active",
        loop: false,
        keyboardSteps: 1,
        easing: 'easeInOutExpo'
    }).mousewheel();
    */
    
    //$('.refitem .imagecaption').hide();
    $('.refitem .imagecaption').css('opacity','0.0');
    
    /*
    $('.refitem .image').hover(function(e) {
      //console.debug(e.currentTarget);
        //$(this).find('.imagecaption').stop().delay(200).fadeIn();
        $(this).find('.imagecaption').stop().delay(200).animate({opacity: '1.0'}, 'fast');
      //$('.refitem .imagecaption').stop().delay(200).fadeIn();
    }, function() {
        //$(this).find('.imagecaption').stop().delay(200).fadeOut();
        $(this).find('.imagecaption').stop().delay(200).animate({opacity: '0.0'}, 'fast');
    });
    */
    
    $('.refitem .image').hover(function(e) {
      //console.debug(e.currentTarget);
        //$(this).find('.imagecaption').stop().delay(200).fadeIn();
        $(this).find('.imagecaption').css({opacity: '1.0'});
      //$('.refitem .imagecaption').stop().delay(200).fadeIn();
    }, function() {
        //$(this).find('.imagecaption').stop().delay(200).fadeOut();
        $(this).find('.imagecaption').css({opacity: '0.0'});
    });
    
    
    
    // Scroller
    var mouseisdown = false;

    $('#actions_vertical .prev').mousedown(function(event) {
        mouseisdown = true;
        ScrollUp();
    }).mouseup(function(event) {
        mouseisdown = false;
    });
      
     $('#actions_vertical .next').mousedown(function(event) {
        mouseisdown = true;
        ScrollDown();
    }).mouseup(function(event) {
        mouseisdown = false;
    }); 
      
    $(document).mousedown(function(event) { //This is to make sure the event stops if the mouse is no longer over the control
    }).mouseup(function(event) {
        mouseisdown = false;
    });



    function ScrollUp(){
      var topVal = $(".scrollable_vertical .items").css("top").replace(/[^-\d\.]/g, ''); //remove the px from the current top val
        topVal = parseInt(topVal);
      if(topVal < 0){ //This is to stop it when it reaches the top
      $(".scrollable_vertical .items").stop().animate({"top":topVal + 50  + 'px'},'slow');
        if (mouseisdown)
    setTimeout(ScrollUp, 100);   
      }
    }

    function ScrollDown(){ 
      var topVal = $(".scrollable_vertical .items").css("top").replace(/[^-\d\.]/g, '');
        topVal = parseInt(topVal);
      if(Math.abs(topVal) < ($(".scrollable_vertical .items").height() - $(".scrollable_vertical").height() + 60)) { //This is to limit the bottom of the scrolling - add extra to compensate for issues
          $(".scrollable_vertical .items").stop().animate({"top":topVal - 50  + 'px'},'slow');
            if (mouseisdown) setTimeout(ScrollDown, 100);
      }
    }
    
});