$(function () {
    //the loading image
    var $loader = $('#st_loading');
    //the ul element 
    var $list = $('#st_nav');

    //calculates the width of the div element 
    //where the thumbs are going to be displayed
    buildThumbs();

    function buildThumbs() {
        $list.children('li.album').each(function () {
            var $elem = $(this);
            var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
            var $thumbs = $thumbs_wrapper.children(':first');
            //each thumb has 180px and we add 3 of margin
            var finalW = $thumbs.find('a').length * 226;
            $thumbs.css('width', finalW + 'px');
            //make this element scrollable
            makeScrollable($thumbs_wrapper, $thumbs);
        });
    }

    //clicking on a thumb, replaces the large image
    $list.find('.st_thumbs img').bind('mouseenter', function () {
        $(this).stop().animate({ 'opacity': '1' });
        $(this).next(".description").fadeIn();
    }).bind('mouseleave', function () {
        $(this).stop().animate({ 'opacity': '0.7' });
        $(this).next(".description").fadeOut();
    });

    //makes the thumbs div scrollable
    //on mouse move the div scrolls automatically
    function makeScrollable($outer, $inner) {
        var extra = 800;
        //Get menu width
        var divWidth = $outer.width();
        //Remove scrollbars
        $outer.css({
            overflow: 'hidden'
        });
        //Find last image in container
        var lastElem = $inner.find('a:last');
        $outer.scrollLeft(0);
        //When user move mouse over menu
        $outer.unbind('mousemove').bind('mousemove', function (e) {
            var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2 * extra;
            var left = (e.pageX - $outer.offset().left) * (containerWidth - divWidth) / divWidth - extra;

            //            if (console) {
            //                console.log(lastElem[0].offsetLeft);
            //            }

            $outer.scrollLeft(left);
        });
    }
});