$(document).ready(function() {  // do this stuff when the HTML is all ready
	sidemenu();
 	makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
	$("#shadow").css("height", $(document).height()).hide();
});

function sidemenu(){

	$('.item').css('cursor','pointer');	//make whole item clickable
	$('.item').click(function(){
		window.location.href = $(this).find("a:first-child").attr('href');
	});
	
	var open = false; //sliding
	$('#sidemenu').addClass('sidemenu');
	$('#sidemenu').css('left', '-370px');
	$('.handle').click(function(){
		if (open == false) {
			$("#shadow").show();
			$("#shadow").fadeTo(500,0.7);
			$('.sidemenu').animate({ //move sideways
				"left": '0px'
			}, 'slow', function(){
			//loadNext();
			});
			open = true;
		}
		else{
			$("#shadow").fadeTo('fast',0);
			$('.sidemenu').animate({ //move sideways
				"left": '-370px'
			}, 'slow', function(){
					$("#shadow").hide();
			});
			open = false;
		}
		return false;
	});
	
}

function makeScrollable(wrapper, scrollable){
  // Get jQuery elements
  var wrapper = $(wrapper), scrollable = $(scrollable);

  // Hide images until they are not loaded
  scrollable.hide();
  var loading = $('<div class="loading">Loading...</div>').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
    images.each(function(){
      if (this.complete) completed++;
    });

    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 enable(){
	  // height of area at the top at bottom, that don't respond to mousemove
	  var inactiveMargin = 170;
	  // Cache for performance
	  var wrapperWidth = wrapper.width();
	  var wrapperHeight = wrapper.height();
	  // Using outer height to include padding too
	  var scrollableHeight = scrollable.outerHeight() + 2.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();
	
	  //When user move mouse over menu
	  wrapper.mousemove(function(e){
	    var wrapperOffset = wrapper.offset();
	    // Scroll menu
	    var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;
		top = top * 0.9;
	    if (top < 0){
	      top = 0;
		 }
	
	    wrapper.scrollTop(top);
	  });
	}
}