/**
 * Usage:
 * 	$(function(){	
 *		makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
 *	});
 * @param wrapper
 * @param scrollable
 * @return
 */
var wrapper = null;
var loading = $("<div class='loading'></div>");
function makeScrollable(wrapper, scrollable){
  // Get jQuery elements
  wrapper = $(wrapper), scrollable = $(scrollable);
  firstLoad = false;
  /* Hide images until they are not loaded
  if(firstLoad && !$(wrapper).hasClass('scrollnow')){
	 ;
  	  scrollable.hide();
	  
	  loading.appendTo(wrapper);
  }
   */
  // Set function that will check if all images are loaded
  var interval = setInterval(function(){
    var images = scrollable.find("img");
    var completed = 0;

    // Counts number of images that are succesfully loaded
    if(!$(wrapper).hasClass('scrollnow')){
	    images.each(function(){
	      if (this.complete) completed++;   
	    });
    }else{
    	completed = images.length;
    }
    
    if (completed == images.length){
    	clearInterval(interval);
    	// Timeout added to fix problem with Chrome
    	setTimeout(function(){

    		loading.hide();
    		// Remove scrollbars    
    		//wrapper.css({overflow: "hidden"});

    		scrollable.slideDown("slow", function(){
    			enable(); 
    		});                 
    	}, 1000);
    	
    }
  }, 100);

  function disableNow(){
	  $(wrapper).removeClass('scrollnow');
  }
  function enableNow(){
	  $(wrapper).addClass('scrollnow');
  }
  function enable(){  
	  // height of area at the top at bottom, that don't respond to mousemove
	  var inactiveMargin = 50;     
	  // Cache for performance
	  var wrapperWidth = wrapper.width();
	  var wrapperHeight = wrapper.height();
	  // Using outer height to include padding too
	  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
	  // Do not cache wrapperOffset, because it can change when user resizes window
	  // We could use onresize event, but it's just not worth doing that 
	  // var wrapperOffset = wrapper.offset();

	  // Create a invisible tooltip
	  var tooltip = $('<div class="sc_menu_tooltip"></div>')
	    .css('opacity', 0)
	    .appendTo(wrapper);

	  // Save menu titles
	  scrollable.find('a').each(function(){             
	    // The "data" function attaches custom data to an element
	    $(this).data('tooltipText', this.title);                
	  });

	  // Remove default tooltip
	  scrollable.find('a').removeAttr('title');     
	  // Remove default tooltip in IE
	  scrollable.find('img').removeAttr('alt');

	  var lastTarget;
	  //When user move mouse over menu          
	  if($(wrapper).hasClass('scrollnow')){ 
		  wrapper.mousemove(function(e){
			  // Save target
			  lastTarget = e.target;

			  var wrapperOffset = wrapper.offset();

			  var tooltipLeft = e.pageX - wrapperOffset.left;
			  // Do not let tooltip to move out of menu.
			  // Because overflow is set to hidden, we will not be able too see it 
			  tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());

			  var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
			  // Move tooltip under the mouse when we are in the higher part of the menu
			  if (e.pageY - wrapperOffset.top < wrapperHeight/2){
				  tooltipTop  = 80;
			  }               
			  tooltip.css({top: tooltipTop, left: tooltipLeft});

			  // Scroll menu
			  var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;

			  if (top < 0){
				  top = 0;
			  }
			  wrapper.scrollTop(top);
		  });
	  

		  // Setting interval helps solving perfomance problems in IE
		  var interval = setInterval(function(){
			  if (!lastTarget) return;

			  var currentText = tooltip.text();

			  if (lastTarget.nodeName == 'IMG'){                  
				  // We've attached data to a link, not image
				  var newText = $(lastTarget).parent().data('tooltipText');

				  // Show tooltip with the new text
				  if (currentText != newText) {
					  tooltip
			          .stop(true)
			          .css('opacity', 0)    
			          .text(newText)
			          .animate({opacity: 1}, 1000);
			      }                 
			  }
		  }, 200);

		  // Hide tooltip when leaving menu
		  wrapper.mouseleave(function(){
			  lastTarget = false;
			  tooltip.stop(true).css('opacity', 0).text('');
		  });           
	  }else{
		  wrapper.mousemove(function(e){});
		  var interval = null;
		  wrapper.mouseleave(function(){});
	  }
  }
}