$(document).ready(function(){
        var width = 0;
        if($('#content').attr('add') != ""){
            width += parseInt($('#content').attr('add'));
            };
            
        $("#content div.img_wrap").each(function(){
            var img = $(this).find(".main_img");
            var storeData = img.attr("fullWidth") * (parseInt(img.css("height"))/img.attr("fullHeight"));
            width += storeData + 5;
            img.data("expanded", storeData);
            });

        $('#imageSlider').slider({
            slide: function(event, ui) {
                $('#content').scrollTo(ui.value);
                },     
            animate: 100,
            max: width 
         });
      
        $('#images img').click(function(){
            $('#content').scrollTo($(this), 350, {onAfter: function(){$('#imageSlider').slider("value", $('#content').scrollLeft());}});
            });
        
        $("#content .img_wrap").css({"width": "20px"});
        $(window).load( function(){
            $('#images').css({'width': width + "px"});
            $("#content .img_wrap").each(function(){
                $(this).animate({
                    "width": $(this).find('.main_img').data("expanded") + "px"
                    }, 1000, "easeOutCubic");
            });   
        });
    });