﻿
function loadGallery(src) {

    /* mode is small or expanded, depending on the picture size  */
    //var mode = 'small';
    /* this is the index of the last clicked picture */
    var current = 0;
    /*conteggio foto*/
    var count = 0;
    
    /*src delle immagini*/

    /*tipologia di gallery*/
    /* se full screen oppure in finestra... (full, window)*/

    /*variabile per la hide delle thumb*/
    var th = 1;

    buildFirst();

    /*function to build the thumbs container*/
    function buildFirst() {
        var id_first_img = 0;
        current = 1;

        $('#imageWrapper').empty();
        $('#loading').show();
        var $elem = $("#thumbsContainer");
        $elem.find('img').each(function (i) {
            var $img = $(this);
            if (i == 0) {
                $thumb = $img;
                id_first_img = $img.attr('id');
            }
            count++;
        });
        $('<img id="displayed" title="' + $thumb.attr('title') + '" style="display:none;"/>').load(function () {
            var $this = $(this);
            $('#loading').hide();
//            if (type_gallery == "full")
//                resize($this, 0);
            if (!$('#imageWrapper').find('img').length) {
                $('#imageWrapper').append($this.fadeIn(1000));
                $('#description_text').html($this.attr('title'));
            }
            thumbsDim();
            makeScrollable($('#thumbsWrapper'), $('#thumbsContainer'), 15);
        }).attr('src', src + id_first_img);

        //resize($('#displayed'), 0);

        /*$('.count').html("1/" + count);*/

        

        /*se full allora abilito il thumb_hide*/
//        if (type_gallery == "full")
//        {
//            $("#hide_thumbs").addClass('icon_hide_th');    
//        }
    }

    /* adjust the size (width) of the scrollable container
    - this depends on all its images widths
    */
    function thumbsDim() {
        var finalW = 0;
        var $elem = $("#thumbsContainer");
        $elem.find('img').each(function (i) {
            var $img = $(this);
            finalW += $img.width() + 5;
            //plus 5 -> 4 margins + 1 to avoid rounded calculations
        });
        $elem.css('width', finalW + 'px').css('visibility', 'visible');
    }

    //Get our elements for faster access and set overlay width
    function makeScrollable($wrapper, $container, contPadding) {
        //Get menu width
        var divWidth = $wrapper.width();

        //Remove scrollbars
        $wrapper.css({
            overflow: 'hidden'
        });

        //Find last image container
        var lastLi = $container.find('img:last-child');
        $wrapper.scrollLeft(0);
        //When user move mouse over menu
        $wrapper.unbind('mousemove').bind('mousemove', function (e) {

            //As images are loaded ul width increases,
            //so we recalculate it each time
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + contPadding;

            var left = (e.pageX - $wrapper.offset().left) * (ulWidth - divWidth) / divWidth;
            $wrapper.scrollLeft(left);
        });
    }

    /*
    clicking on a thumb loads the image
    (alt attribute of the thumb is the source of the large image);
    mouseover and mouseout for a nice spotlight hover effect
    */
    $('#thumbsContainer img').live('click', function () {
        loadImg($(this), 'cursorPlus');
    }).live('mouseover', function () {
        var $this = $(this);
        $this.stop().animate({
            'opacity': '1.0'
        }, 200);
    }).live('mouseout', function () {
        var $this = $(this);
        $this.stop().animate({
            'opacity': '0.6'
        }, 200);
    });

    /*
    loads a picture into the imageWrapper
    the image source is in the thumb's alt attribute
    */
    function loadImg($thumb, cursorClass) {
        current = $thumb.index() + 1;
        $('.count').html(current + "/" + count);
        $('#imageWrapper').empty();
        $('#loading').show();
        $('<img id="displayed" title="' + $thumb.attr('title') + '" style="display:none;"/>').load(function () {
            var $this = $(this);
            $('#loading').hide();
//            if (type_gallery == "full")
//                resize($this, 0);
            if (!$('#imageWrapper').find('img').length) {
                $('#imageWrapper').append($this.fadeIn(1000));
                $('#description_text').html($this.attr('title'));
            }
        }).attr('src', src + $thumb.attr('id'));

        //resize($('#displayed'), 0);
    }

    /* when resizing the window resize the picture */
//    $(window).bind('resize', function () {
//        if (type_gallery == "full") {
//            resize($('#displayed'), 0);
//            thumbsDim();
//            makeScrollable($('#thumbsWrapper'), $('#thumbsContainer'), 15);
//        }
//    });

    /* function to resize an image based on the windows width and height */
//    function resize($image, type) {
//        var widthMargin = 0;
//        var heightMargin = 0;
//        var windowH = $(window).height();
//        var windowW = $(window).width() - widthMargin;
//        var theImage = new Image();
//        theImage.src = $image.attr("src");
//        var imgwidth = theImage.width;
//        var imgheight = theImage.height;

//        if ((imgwidth > windowW) || (imgheight > windowH)) {
//            if (imgwidth > imgheight) {
//                var newwidth = windowW;
//                var ratio = imgwidth / windowW;
//                var newheight = imgheight / ratio;
//                theImage.height = newheight;
//                theImage.width = newwidth;
//                if (newheight > windowH) {
//                    var newnewheight = windowH;
//                    var newratio = newheight / windowH;
//                    var newnewwidth = newwidth / newratio;
//                    theImage.width = newnewwidth;
//                    theImage.height = newnewheight;
//                }
//            }
//            else {
//                var newheight = windowH;
//                var ratio = imgheight / windowH;
//                var newwidth = imgwidth / ratio;
//                theImage.height = newheight;
//                theImage.width = newwidth;
//                if (newwidth > windowW) {
//                    var newnewwidth = windowW;
//                    var newratio = newwidth / windowW;
//                    var newnewheight = newheight / newratio;
//                    theImage.height = newnewheight;
//                    theImage.width = newnewwidth;
//                }
//            }
//        }
//        if ((type == 1) && (!$.browser.msie))
//            $image.stop(true).animate({
//                'width': theImage.width + 'px',
//                'height': theImage.height + 'px'
//            }, 1000);
//        else
//            $image.css({
//                'width': theImage.width + 'px',
//                'height': theImage.height + 'px'
//            });

//            if (imgwidth > imgheight) {
//                $image.css({
//                    'width': '100%'
//                });    
//            }
//            else
//            {
//                $image.css({
//                    'height': '100%'
//                });
//            }

//        }

    function resize($image) {

//        var theImage = new Image();
//        theImage.src = $image.attr("src");

//        var imgwidth = theImage.width;
//        var imgheight = theImage.height;

//        var winwidth = $(window).width();
//        var winheight = $(window).height();

//        var widthratio = winwidth / imgwidth;
//        var heightratio = winheight / imgheight;

//        var widthdiff = heightratio * imgwidth;
//        var heightdiff = widthratio * imgheight;

//        var aspectratio = imgwidth / imgheight;

//        if (aspectratio > 1) {
//            if (heightdiff > winheight) {
//                $image.css({
//                    width: winwidth + 'px',
//                    height: heightdiff + 'px'
//                });
//            } else {
//                $image.css({
//                    width: widthdiff + 'px',
//                    height: winheight + 'px'
//                });
//            }
//        }
//        else {
//            $image.css({
//                    'height': '100%'
//                });    
        //        }

        var theImage = new Image();
        theImage.src = $image.attr("src");

        var imgwidth = theImage.width;
        var imgheight = theImage.height;

        var winwidth = $(window).width();
        var winheight = $(window).height() - offset_bottom;

        var widthratio = winwidth / imgwidth;
        var heightratio = winheight / imgheight;

        var widthdiff = heightratio * imgwidth;
        var heightdiff = widthratio * imgheight;

        var aspectratio = imgwidth / imgheight;
        var aspectratio_win = winwidth / winheight;

        //foto orizzontale
        /*if (aspectratio > 1) {
        if (aspectratio > aspectratio_win) {
        $image.css({
        width: winwidth + 'px'
        //height: winheight + 'px'
        });
        }
        else {
        $image.css({
        //width: winwidth + 'px'
        height: winheight + 'px'
        });
        }

        }
        //foto verticale
        else {
        $image.css({
        height: winheight + 'px'
        });
        }*/

        $image.css({
            //width: winwidth + 'px'
            height: winheight + 'px'
        });
    }

    /*se clicco sull'immagine vado avanti*/
    $('#displayed').live('click', function () {
        var $thumb = $('#thumbsContainer img:nth-child(' + parseInt(current + 1) + ')');
        if ($thumb.length) {
            ++current;
            loadImg($thumb, 'cursorRight');
        }
    }); 

    /**/  
    $('#hide_thumbs').live('click', function () {
        var $this = $(this);
        if (th == 1) {
            $('#thumb_cont').stop().animate({
                'bottom': '-103px'
            }, 500);
            $this.addClass('icon_view_th').removeClass('icon_hide_th');
            th = 0;
        }     
        else {
            $('#thumb_cont').stop().animate({
                'bottom': '95px'
            }, 500);
            $this.addClass('icon_hide_th').removeClass('icon_view_th');
            th = 1;    
        } 
    });


    /*
    when hovering the main image change the mouse icons (left,right,plus,minus)
    also when clicking on the image, expand it or make it smaller depending on the mode
    
    $('#displayed').live('mousemove', function (e) {
        var $this = $(this);
        var imageWidth = parseFloat($this.css('width'), 10);

        var x = e.pageX - $this.offset().left;
        if (x < (imageWidth / 3))
            $this.addClass('cursorLeft')
        .removeClass('cursorPlus cursorRight cursorMinus');
        else if (x > (2 * (imageWidth / 3)))
            $this.addClass('cursorRight')
        .removeClass('cursorPlus cursorLeft cursorMinus');
        else {
            if (mode == 'expanded') {
                $this.addClass('cursorMinus')
            .removeClass('cursorLeft cursorRight cursorPlus');
            }
            else if (mode == 'small') {
                $this.addClass('cursorPlus')
            .removeClass('cursorLeft cursorRight cursorMinus');
            }
        }
    }).live('click', function () {
        var $this = $(this);
        if (mode == 'expanded' && $this.is('.cursorMinus')) {
            mode = 'small';
            $this.addClass('cursorPlus')
            .removeClass('cursorLeft cursorRight cursorMinus');
            $('#thumbsWrapper').stop().animate({
                'bottom': '0px'
            }, 300);
            resize($this, 1);
        }
        else if (mode == 'small' && $this.is('.cursorPlus')) {
            mode = 'expanded';
            $this.addClass('cursorMinus')
            .removeClass('cursorLeft cursorRight cursorPlus');
            $('#thumbsWrapper').stop().animate({
                'bottom': '-85px'
            }, 300);
            resize($this, 1);
        }
        else if ($this.is('.cursorRight')) {
            var $thumb = $('#thumbsContainer img:nth-child(' + parseInt(current + 1) + ')');
            if ($thumb.length) {
                ++current;
                loadImg($thumb, 'cursorRight');
            }
        }
        else if ($this.is('.cursorLeft')) {
            var $thumb = $('#thumbsContainer img:nth-child(' + parseInt(current - 1) + ')');
            if ($thumb.length) {
                --current;
                loadImg($thumb, 'cursorLeft');
            }
        }
    });*/
}
