$(window).load(function(){
    
    var block = $("#sliding-block");
    var width = 0;
    
    $("#sliding-block div.sliding-element div.normal img").each(
        function()
        {
            width = width + $(this).outerWidth(true) + 40;
        }
    );
    
    
    block.width(width);
    
    var contWidth = $("#sliding-container").width();
    var slideWidth = width - contWidth;
    
    
    
	$('#slider').draggable({
		containment:'parent',
		axis:'x',
		drag:function(e,ui){
		  
            left = -(slideWidth*ui.position.left/contWidth);
			
            block.css("left", left);
            
            $("#slider-left").width(ui.position.left);
            

		}
	});
    
    
    $("div.sliding-element").hover(
        function()
        {
            $(this).children("div.normal").css("display", "none");
            $(this).children("div.hover").css("display", "block");
        },
        function()
        {
            $(this).children("div.normal").css("display", "block");
            $(this).children("div.hover").css("display", "none");
        }
    );


});