var showTimeout = 0;
var hideTimeout = 0;
var thumbnailRibbonTimeout;
var currentPage = -1;
var albumPage = 1;
var albumId = 0;
var thumbnailRibbonLoaded = false;
var totalThumbnailsCount = 0;
var thumbnailsHash = [];
var tooltipsApplied = false;
var clicks = 0;
var imagesPerPage = 30;
var map = null;
var origW, origH;
var slideshowStarted = false;
var slideshowInterval = false;
var slideshowSpeed = getCookie('slideshowSpeed');
if(slideshowSpeed == undefined) var slideshowSpeed = 4;
var totalImages = 0;
var nowDragged = false;
var mouseOver = false;
var mouseOverSlideshowControls = false;
var hideAllTimeout;
var triggeredByHidingMouse = false;

var imagePrefix = '';

var toggleSlideshow = function() {
    if(totalImages < 3) return false;
    if(slideshowStarted) {
        clearInterval(slideshowInterval);
        slideshowStarted = false;
        $('#playPause').removeClass('pause');
        flushSpinnerMessage(Travvi.s('js.slideshow_is_stopped'));
    } else {
        slideshowStarted = true;
        if (totalImages > 2) {
            slideshowStarted = true;
            $('#playPause').addClass('pause');
            slideshowInterval = setInterval(function(){
                if ($('#arrow2_right').length) {
                    $.history.load($('#arrow2_right').attr('href').split('#')[1]);
                }
            }, slideshowSpeed * 1000);
        } else {
            slideshowStarted = false;
            flushSpinnerMessage(Travvi.s('js.too_few_images_for_slideshow'));
        }
        flushSpinnerMessage(Travvi.s('js.slideshow_is_started'));
    }
}

function imageMapInit(lat, lng, zoom) {

    map = new L.Map('map_canvas', {center: new L.LatLng(lat, lng), zoom: zoom, maxZoom: 19, dragging: true});

    map.addControl(new L.Control.Layers({
        'OSM': new L.DeferredLayer(layerdefs.osm),
        'Yandex Map': new L.DeferredLayer(layerdefs.ymap),
        'Yandex Satellite': new L.DeferredLayer(layerdefs.ysat),
        'Yandex Hybrid': new L.DeferredLayer(layerdefs.yhyb),
        'Yandex Народная': new L.DeferredLayer(layerdefs.ypub),
        'Yandex Народная Hybrid': new L.DeferredLayer(layerdefs.ypubhyb),
        'Google Roadmap': new L.DeferredLayer(layerdefs.groad),
        'Google Terrain': new L.DeferredLayer(layerdefs.gter),
        'Google Satellite': new L.DeferredLayer(layerdefs.gsat),
        'GoogleHybrid': new L.DeferredLayer(layerdefs.ghyb),
        'Bing Road': new L.DeferredLayer(layerdefs.broad),
        'Bing Aerial': new L.DeferredLayer(layerdefs.baer),
        'Bing Aerial With Labels': new L.DeferredLayer(layerdefs.baerlab),
        'MapQuest': new L.DeferredLayer(layerdefs.mqst)
    }));
    map.addControl(new L.Control.Scale({width: 100, position: 'bottomleft'}));
    var fullScreen = new L.Control.FullScreen(); 
    map.addControl(fullScreen);

    $('.leaflet-control-zoom').parent().removeClass('leaflet-left').addClass('leaflet-right');

    var count = 1; // 0 - not set
    $('#map_canvas .leaflet-control-layers-base input:radio')
        .each(function(){
            $(this).val(count);
            count++;
        });
        
    map.on('enterFullscreen', function(){
        $('#item_2, #map_expander, #map_canvas').addClass('expanded');
        setTimeout(function(){if(map) map.invalidateSize();}, 1000);
    }).on('exitFullscreen', function(){
        $('#item_2, #map_expander, #map_canvas').removeClass('expanded');
        setTimeout(function(){if(map) map.invalidateSize();}, 1000);
    });

    L.polyline([[0, 0], ]).addTo(map); // Voodoo for ZoomAnimation bug in Leaflet. 
}

// fullscreen image manipulation
function imgRecalculate() {
    var scrW = $('#ribbon_holder').innerWidth();
    var scrH = $('#ribbon_holder').innerHeight();
    var oldW = $('#ribbon_holder img.main').innerWidth();
    var oldH = $('#ribbon_holder img.main').innerHeight();
    var oldLeft = $('#ribbon_holder img.main').offset().left;
    var oldTop = $('#ribbon_holder img.main').offset().top;
    var navW = $('#navigator img').actual('innerWidth');
    var navH = $('#navigator img').actual('innerHeight');
    var zoomLevel = 1 - $('#thumb_size').slider('value')/100;
    var newW, newH, left, top;

    if(!fullScreenApi.isFullScreen()) return;

    if (origW == 0 || origH == 0 || scrW == 0 || scrH == 0) return;

    if ( scrW/origW < 0.9 || scrH/origH < 0.9 ) {
        $('#navigator').removeClass('hidden');
    } else {
        $('#navigator').addClass('hidden');
    }

    var maxZoom = Math.max(0, 100 - Math.round(100*Math.min(scrW/origW, scrH/origH)));
    $('#thumb_size').slider('option', 'max', maxZoom);

    origRatio = origW/origH;
    scrRatio = scrW/scrH;

    if (origW < scrW && origH < scrH) {
        newW = origW;
        newH = origH;
    } else if (scrRatio > origRatio) {
        newW = Math.floor(scrH*origRatio/zoomLevel);
        newH = Math.floor(scrH/zoomLevel);
    } else {
        newW = Math.floor(scrW/zoomLevel);
        newH = Math.floor(scrW/origRatio/zoomLevel);
    }

    if(newW > scrW && typeof pivotX !== "undefined") {
        left = Math.max(Math.min(Math.round((1 - newW/oldW)*pivotX) + oldLeft, 0), scrW-newW);
    } else {
        left = Math.floor((scrW - newW)/2);
    }

    if(newH > scrH && typeof pivotY !== "undefined") {
        top = Math.max(Math.min(Math.round((1 - newH/oldH)*pivotY) + oldTop, 0), scrH-newH);
    } else {
        top = Math.floor((scrH - newH)/2);
    }

    if($('#ribbon_holder img.main').draggable() && newW > scrW) {
        if(newH > scrH) {
            $('#ribbon_holder img.main').draggable('option', {disabled: false, axis: false, containment: [scrW-newW, scrH-newH, 0, 0] });
        } else {
            $('#ribbon_holder img.main').draggable('option', {disabled: false, axis: 'x', containment: [scrW-newW, 0, 0, scrH] });
        }
    } else {
        if(newH > scrH) {
            $('#ribbon_holder img.main').draggable('option', {disabled: false, axis: 'y', containment: [0, scrH-newH, scrW, 0] });
        } else {
            $('#ribbon_holder img.main').draggable('option', {disabled: true});
        }                        
    }

    frameLeft = Math.max(-Math.round(navW/newW*left), 1);
    frameWidth = Math.min(Math.round(navW/newW*scrW), navW);
    frameTop = Math.max(-Math.round(navW/newW*top), 1);
    frameHeight = Math.min(Math.round(navW/newW*scrH), navH);

    navigatorLeft = frameLeft - 1;
    navigatorTop = frameTop - 1;

    $('#navigator .frame').css({
        'width'  : frameWidth + 'px',
        'height' : frameHeight + 'px',
        'left'   : frameLeft + 'px',
        'top'    : frameTop + 'px'
    });
    $('#ribbon_holder img.main').css({
        'width'  : newW + 'px',
        'height' : newH + 'px',
        'left'   : left + 'px',
        'top'    : top + 'px'
    });
}

jQuery(function($) {

    $.history.init(function(hash){
        if (imageDatas.length == 0) {
            Spinner.hide();
            flushSpinnerMessage(Travvi.s('js.album_is_empty'));
            return;
        }
        var urlParams = /^(\d+)?$/.exec(hash);
        if(!urlParams) return false;
        var prevPage = currentPage;
        currentPage = urlParams[1] ? urlParams[1] : imageDatas[0] ? imageDatas[0].id : 0;
        if(prevPage != currentPage) {
            var index = imageIds[currentPage]; 
            if(typeof(index) != 'undefined') {
                var getImageSrc = function(){};

                // hide historical image in objects images
                $('#image_historical').hide();

                // destroy map if exist
                if(map) {
                    map = null;
                    $('#map_canvas').remove();
                    $('item_2').remove();
                }

                $('#image_container img.main').removeAttr( 'style' );

                if(fullScreenApi.isFullScreen()) {
                    getImageSrc = function(str) {
                        return str.replace('_small.', '_large.');
                    }

                    // load navigator image
                    $('#navigator').hide();
                    $('#navigator img').attr('src', imageDatas[index].src.replace('_small.', '_thumb.'));
                    // load main image
                    $('#image_container img.main').hide();
                    $('#image_container img.main')[0].onload = function(){
                        origW = this.naturalWidth;
                        origH = this.naturalHeight;
                        imgRecalculate();
                        $('#image_container img.main').show();
                        $('#thumbnail_ribbon').mouseleave();
                    };                    
                    $('#image_container img.main')[0].src = getImageSrc(imageDatas[index].src);
                    imageDatas[index].counter++;
                } else {
                    getImageSrc = function(str) {
                        return str;
                    }

                    // load main image
                    $('#image_container img.main').attr('src', getImageSrc(imageDatas[index].src)).removeClass('hidden');
                    imageDatas[index].counter++;

                    // image dialogs data
                    $('#dialog-confirm a.ok').attr('href', '/' + imagePrefix + 'images/' + currentPage + '/delete');
                    $('#dialog-confirm #deletingFilename').text(imageDatas[index].name);

                    // clear comments dialog windows
                    if ($('#dialog-editComment').hasClass('ui-dialog-content')) $('#dialog-editComment').dialog('destroy');
                    if ($('#dialog-commentConfirmDelete').hasClass('ui-dialog-content')) $('#dialog-commentConfirmDelete').dialog('destroy');
                    if ($('#dialog-commentQuotation').hasClass('ui-dialog-content')) $('#dialog-commentQuotation').dialog('destroy');
                    if ($('#dialog-externalLink').hasClass('ui-dialog-content')) $('#dialog-externalLink').dialog('destroy');

                    // load image extended data
                    $('#bottom_right_container').empty().load('/'+ albumId +'/' + imagePrefix + 'image_details/' + currentPage);
                    $('#image_name').text(imageDatas[index].name);
                    $('#visitCounter').text(imageDatas[index].counter);

                }

                // process navigation arrows
                if(typeof(imageDatas[index + 1]) != 'undefined') {
                    $('#arrow2_right').removeClass('hidden');
                    $('#arrow2_right, #arrow1_right').attr('href', '#'+imageDatas[index + 1].id);
                    if(!fullScreenApi.isFullScreen()) {
                        $('#arrow2_right').show();
                    }
                    $('.preload_trick.next').attr('src', getImageSrc(imageDatas[index + 1].src));
                } else {
                    $('#image_container .right').hide();
                    $('#arrow2_right').addClass('hidden');
                }
                if(typeof(imageDatas[index - 1]) != 'undefined') {
                    $('#arrow2_left').removeClass('hidden');
                    $('#arrow2_left, #arrow1_left').attr('href', '#'+imageDatas[index - 1].id);
                    if(!fullScreenApi.isFullScreen()) {
                        $('#arrow2_left').show();
                    }
                    $('.preload_trick.previous').attr('src', getImageSrc(imageDatas[index - 1].src));
                } else {
                    $('#image_container .left').hide();
                    $('#arrow2_left').addClass('hidden');
                }
                
                // load thumbnail ribbon
                if (!thumbnailRibbonLoaded) {
                    $("#thumbnail_ribbon").load('/' + imagePrefix + 'thumbnail_ribbon/' + currentPage, function(){
                        if($('#arrow2_left').hasClass('hidden')) $('#arrow4_left').hide();
                        if($('#arrow2_right').hasClass('hidden')) $('#arrow4_right').hide();
                    });
                    thumbnailRibbonLoaded = true;
                } else {
                    $('#thumbnail_ribbon li.thumbnail_container:not(.hidden)').addClass('hidden');
                    if(!$('#thumb_' + currentPage).hasClass('current')) {
                        var tmp1 = $('#thumbnail_ribbon li.thumbnail_container.current').removeClass('current');
                        var tmp2 = $('#thumb_' + currentPage).addClass('current').removeClass('hidden');
                        albumPage =  Math.ceil( $(tmp2).attr('data_count') / imagesPerPage );
                        $('.counter', $(tmp1)).clone().prependTo($(tmp2));
                        $('.counter', $(tmp1)).remove();
                        $('.frame_top span', $(tmp2)).html($(tmp2).attr('data_count'));
                    }
                    $('#thumbnail_ribbon li.current').removeClass('hidden');
                    $('#thumbnail_ribbon li.current').nextAll('li').slice(0,(3+fakeCount)).removeClass('hidden');
                    $('#thumbnail_ribbon li.current').prevAll('li').slice(0,(3+fakeCount)).removeClass('hidden');

                    if($('#arrow2_left').hasClass('hidden')) {
                        $('#arrow4_left').hide();
                    } else {
                        $('#arrow4_left').show();
                    }
                    if($('#arrow2_right').hasClass('hidden')) {
                        $('#arrow4_right').hide();
                    } else {
                        $('#arrow4_right').show();
                    }

                }
            } else {
                flushSpinnerMessage(Travvi.s('js.wrong_url_loading_first_album_image'));
                $.history.load(imageDatas[0].id);
            }
            Spinner.hide();
            clicks = 0;
        }
    },
    { unescape: ",/" });

    $('#dialog-menu').dialog({
        autoOpen: false,
        width: 'auto',
        position: ['center', 'center'],
        height: 'auto',
        modal: true,
        resizable: false,
        draggable: false
    });

    $('#dialog-imageSettings').dialog({
        autoOpen: false,
        width: 'auto',
        position: ['center', 'center'],
        height: 'auto',
        modal: true,
        resizable: false,
        draggable: false
    });

    $('#dialog-quotation').dialog({
        autoOpen: false,
        width: 470,
        position: ['center', 'center'],
        height: 'auto',
        modal: true,
        resizable: false,
        draggable: false,
        open: function(){
            if(!tooltipsApplied) {
                $('#share42 a').tooltip({showURL: false});
                tooltipsApplied = true;
            }
            $('#quotationUrls a').zclip({
                path:'/skin/js/ZeroClipboard.swf',
                copy:function(){return $(this).attr('href')},
                clickAfter: false,
                setHandCursor: true,
                afterCopy: function(){
                    flushSpinnerMessage(Travvi.s('js.code_copied_in_clipboard'));
                }
            });
        }
    });

    $( "#dialog-confirm" ).dialog({
        autoOpen: false,
        resizable: false,
        width: 'auto',
        height: 'auto',
        modal: true,
        open: function(){
            $('#dialog-menu').dialog('close');
        }
    });

    $(window).resize(function() {
        $('#dialog-menu').dialog('option', {position: ['center', 'center']});
        $('#dialog-quotation').dialog('option', {position: ['center', 'center']});
        $('#dialog-confirm').dialog('option', {position: ['center', 'center']});
        if(fullScreenApi.isFullScreen()) {
            imgRecalculate();
        }
    }).scroll(function() {
        $('#dialog-menu').dialog('option', {position: ['center', 'center']});
        $('#dialog-quotation').dialog('option', {position: ['center', 'center']});
        $('#dialog-confirm').dialog('option', {position: ['center', 'center']});
    });

    $('#dialog-imageSettings .acl_select select').selectik({width: 300, exclude: 'default'});

    $('#dialog-imageSettings #imageTags').textareaCount({
        'maxCharacterSize': 200,  
        'originalStyle': 'originalDisplayInfo',  
        'displayFormat': '' 
    });

    $('#dialog-imageSettings #imageDescription').textareaCount({
        'maxCharacterSize': 200,  
        'originalStyle': 'originalDisplayInfo',  
        'displayFormat': '' 
    });


    $('.menuCaller').click(function(){
        $('#dialog-menu').dialog('open');
        return false;
    });

    $('#deleteImage').click(function(){
        $('#dialog-confirm').dialog('open');
        return false;
    });

    $('#dialog-confirm a.ok').button();
    $('#dialog-confirm a.cancel').button().click(function(){
        $('#dialog-confirm').dialog('close');
        return false;
    });

    $('#dialog-menu select').change(function(){
        flushSpinnerMessage(Travvi.s('js.this_feature_not_implemented_yet'));
    });

    $('#thumbnail_ribbon').on('mouseenter', function(){
        if(!$('#ribbon_holder').hasClass('fullscreen')) return false;
        var obj = this;
        clearTimeout(hideTimeout);
        showTimeout = setTimeout(function(){
            $('ul', obj).slideDown(150);
        }, 300);
        return false;
    }).on('mouseleave', function(){
        if(!$('#ribbon_holder').hasClass('fullscreen')) return false;
        var obj = this;
        clearTimeout(showTimeout);
        hideTimeout = setTimeout(function(){
            $('ul', obj).slideUp(200);
        }, 400);
        return false;
    });
    $('#thumbnail_ribbon').on('mousewheel',function(event, delta){
        if (delta > 0) {
            $('#arrow4_left').show();
            if(!$('#arrow4_right').parent().prev('li').hasClass('hidden')) return false;
            $('#thumbnail_ribbon .thumbnail_container:not(.hidden)').filter(':first').addClass('hidden');
            $('#thumbnail_ribbon .thumbnail_container:not(.hidden) + .hidden').removeClass('hidden');
            if(!$('#arrow4_right').parent().prev('li').hasClass('hidden')) $('#arrow4_right').hide();
        } else {
            $('#arrow4_right').show();
            if(!$('#arrow4_left').parent().next('li').hasClass('hidden')) return false;
            $('#thumbnail_ribbon .thumbnail_container:not(.hidden)').filter(':last').addClass('hidden');
            $('#thumbnail_ribbon .thumbnail_container.hidden + .thumbnail_container:not(.hidden)').prev('.hidden').removeClass('hidden');
            if(!$('#arrow4_left').parent().next('li').hasClass('hidden')) $('#arrow4_left').hide();
        }
        return false;
    });
    
    $('.map-nav a').click(function(){
        $('#bottom_right .items').hide();
        $($(this).attr('href')).show();
        $('.map-nav a, #bottom_right a.arrow5').removeClass('current');
        $(this).addClass('current');
        return false;
    });
    $('#album_link').on('click', function(){
        document.location = $(this).attr('href') + '#' + albumPage;
        return false;
    });
    $('#thumbnail_ribbon').on('click', '#arrow4_right', function(){return false;}).on('mousedown', '#arrow4_right', function(){
        $('#arrow4_left').show();
        thumbnailRibbonTimeout = setInterval(function(){
            if(!$('#arrow4_right').parent().prev('li').hasClass('hidden')) return false;
            $('#thumbnail_ribbon .thumbnail_container:not(.hidden)').filter(':first').addClass('hidden');
            $('#thumbnail_ribbon .thumbnail_container:not(.hidden) + .hidden').removeClass('hidden');
            return false;
        }, 100);
    }).on('mouseup', '#arrow4_right', function(){
        clearInterval(thumbnailRibbonTimeout);
        if(!$('#arrow4_right').parent().prev('li').hasClass('hidden')) $('#arrow4_right').hide();
        return false;
    });
    $('#thumbnail_ribbon').on('click', '#arrow4_left', function(){return false;}).on('mousedown', '#arrow4_left', function(){
        $('#arrow4_right').show();
        thumbnailRibbonTimeout = setInterval(function(){
            if(!$('#arrow4_left').parent().next('li').hasClass('hidden')) return false;
            $('#thumbnail_ribbon .thumbnail_container:not(.hidden)').filter(':last').addClass('hidden');
            $('#thumbnail_ribbon .thumbnail_container.hidden + .thumbnail_container:not(.hidden)').prev('.hidden').removeClass('hidden');
            return false;
        }, 100);
    }).on('mouseup', '#arrow4_left', function(){
        clearInterval(thumbnailRibbonTimeout);
        if(!$('#arrow4_left').parent().next('li').hasClass('hidden')) $('#arrow4_left').hide();
        return false;
    });

    $('a.left').tooltip({showURL: false});
    $('a.right').tooltip({showURL: false, positionLeft: true, left: -5});
    $('#visitCounter').tooltip({showURL: false, positionLeft: true, left: -5});
    $('#button_holder a').tooltip({showURL: false, delay: 1000});
    $('a.lock').tooltip({showURL: false, positionLeft: true, left: -5});

    $(document).bind('keydown', function(e){
        // dont't use navigation when focus in form elements
        if($(".ui-dialog").is(":visible")) return true;
        if(document.activeElement.tagName.toLowerCase() == 'input' || document.activeElement.tagName.toLowerCase() == 'textarea') return true;
        function flashThumbnailRibbon() {
            if(!$('#ribbon_holder').hasClass('fullscreen')) return;
            clearTimeout(showTimeout);
            $('#thumbnail_ribbon ul').slideDown(150);
            hideTimeout = setTimeout(function(){
                $('#thumbnail_ribbon ul').slideUp(150);
            }, 800);
        }
        switch (e.which) {
            case 27:
                // ESC
                break;
            case 37:
                // left arrow
                if ($('#arrow2_left:not(.hidden)').length) {
                    $.history.load($('#arrow2_left').attr('href').split('#')[1]);
                } else {
                    flashThumbnailRibbon();
                }
                return false;
                break;
            case 39:
                //right arrow
                if ($('#arrow2_right:not(.hidden)').length) {
                    $.history.load($('#arrow2_right').attr('href').split('#')[1]);
                } else {
                    flashThumbnailRibbon();
                }
                return false;
                break;
        }
    });

    $('#image_container').on('click', 'a.ie_trick', function(){
        if($.browser.msie) {
            document.location.href = document.location.href.replace('photos', 'fullscreen');
        } else {
            if(!$('#ribbon_holder').hasClass('fullscreen')) {
                $('#ribbon_holder').requestFullScreen();
            }
        }
        return false;
    });

    if (fullScreenApi.supportsFullScreen) {
        $(document).on(fullScreenApi.fullScreenEventName, function(){
            setTimeout(function(){
                if(fullScreenApi.fullScreenElement() && fullScreenApi.fullScreenElement().id === 'map_canvas') {
                    return;
                }
                $('#ribbon_holder').removeClass('fullscreen');
                if(fullScreenApi.fullScreenElement() && fullScreenApi.fullScreenElement().id === 'ribbon_holder') {
                    $('#ribbon_holder').addClass('fullscreen');
                }
                currentPage = -1;
                $.history.reload();
                $(window).resize();
                if($('#ribbon_holder').hasClass('fullscreen')) {
                    $('#slideshowControls').removeClass('hidden');
                    $('#ribbon_holder').mousemove();
                } else {
                    if(slideshowStarted) {
                        clearInterval(slideshowInterval);
                        slideshowStarted = false;
                        $('#playPause').removeClass('pause');
                    }
                    clearTimeout(hideAllTimeout);
                    $('#slideshowControls').hide();
                    $('html').css({cursor: 'auto'});
                    $('#thumbnail_ribbon ul').show();
                }
            }, 30);
        });
    }

    $('#fullscreen').on('click', function(){
        if($.browser.msie) {
            document.location.href = document.location.href.replace('photos', 'fullscreen');
        } else {
            $('#ribbon_holder').requestFullScreen();
        }
        return false;
    });

    $('#thumb_size').slider({
        min: 0,
        max: 0,
        slide: imgRecalculate,
        change: imgRecalculate
    });

    $('#ribbon_holder').on('mousewheel', 'img.main', function(e, delta){
        if($('#navigator').hasClass("hidden")) return false;
        delta *= 2;
        var newVal = $('#thumb_size').slider('option', 'value') + delta;
        newVal = Math.max($('#thumb_size').slider('option', 'min'), Math.min($('#thumb_size').slider('option', 'max'),newVal));
        pivotX = e.pageX - this.offsetLeft;
        pivotY = e.pageY - this.offsetTop;
        $('#thumb_size').slider('option', 'value', newVal);

        return false;
    });

    $('#ribbon_holder').on('mousewheel', '#navigator', function(e, delta){
        if($('#navigator').hasClass("hidden")) return false;
        delta *= 2;
        var newVal = $('#thumb_size').slider('option', 'value') + delta;
        newVal = Math.max($('#thumb_size').slider('option', 'min'), Math.min($('#thumb_size').slider('option', 'max'),newVal));
        pivotX = Math.round($('#ribbon_holder img.main').width()/2) + $('#ribbon_holder img.main').position().left;
        pivotY = Math.round($('#ribbon_holder img.main').height()/2) + $('#ribbon_holder img.main').position().top;
        $('#thumb_size').slider('option', 'value', newVal);

        return false;
    });

    $('#ribbon_holder img.main').draggable({disabled: true, cursor: 'move', drag: function(){
        var scrW = $('#ribbon_holder').innerWidth();
        var scrH = $('#ribbon_holder').innerHeight();
        var navW = $('#navigator img').innerWidth();
        var navH = $('#navigator img').innerHeight();
        var newW = $('#ribbon_holder img.main').innerWidth();
        var newH = $('#ribbon_holder img.main').innerHeight();
        var left = $('#ribbon_holder img.main').offset().left;
        var top = $('#ribbon_holder img.main').offset().top;

        frameLeft = Math.max(-Math.round(navW/newW*left), 1);
        frameWidth = Math.min(Math.round(navW/newW*scrW), navW);
        frameTop = Math.max(-Math.round(navW/newW*top), 1);
        frameHeight = Math.min(Math.round(navW/newW*scrH), navH);

        navigatorLeft = frameLeft - 1;
        navigatorTop = frameTop - 1;
        
        $('#navigator .frame').css({
            'width'  : frameWidth + 'px',
            'height' : frameHeight + 'px',
            'left'   : frameLeft + 'px',
            'top'    : frameTop + 'px'
        });
        
    }}).bind('mousedown', function(event) { event.preventDefault(); });

    $('#fullscreen_close').click(function(){
        fullScreenApi.cancelFullScreen();
        return false;
    });

    $('#navigator .frame').draggable({
        containment: '#navigator img',
        snap: false,
        snapMode: 'inner',
        cursor: 'move',
        start: function(){
            nowDragged = true;
        },
        stop: function(){
            nowDragged = false;
        },
        drag: function(){
            var width = $('#ribbon_holder img.main').innerWidth();
            var height = $('#ribbon_holder img.main').innerHeight();
            var left = $('#ribbon_holder img.main').position().left;
            var top = $('#ribbon_holder img.main').position().top;
            var scrW = $('#ribbon_holder').innerWidth();
            var scrH = $('#ribbon_holder').innerHeight();
            var navW = $('#navigator img').innerWidth();
            var navLeft = $('#navigator .frame').position().left - 1;
            var navTop = $('#navigator .frame').position().top - 1;

            if(navigatorLeft - navLeft != 0) {
                $('#ribbon_holder img.main').css('left', Math.min(Math.max(left + Math.round((navigatorLeft - navLeft)*width/navW), scrW - width), 0));
            }

            if(navigatorTop - navTop != 0) {
                $('#ribbon_holder img.main').css('top', Math.min(Math.max(top + Math.round((navigatorTop - navTop)*width/navW), scrH - height), 0));
            }

            navigatorLeft = navLeft;
            navigatorTop = navTop;
        }
    });

    $('#slideshowControls').hover(function(){
        mouseOverSlideshowControls = true;
    }, function(){
        mouseOverSlideshowControls = false;
    }).tooltip({showURL: false});

    $('#slideshowDelay').slider({
        min: 3,
        max: 60,
        value: slideshowSpeed,
        step: 1,
        slide: function(){
            var speed = $(this).slider('value');
            $('.sliderValue').text(speed);
            slideshowSpeed = speed; 
        },
        change: function(){
            var speed = $(this).slider('value');
            $('.sliderValue').text(speed);
            slideshowSpeed = speed;
            setCookie('slideshowSpeed', speed, {path: '/', expires: 50000 });
        }
    }).disableSelection();
    $('.sliderValue').text(slideshowSpeed);
    $('#slideshowDelay').children().addClass('ssCtrls');

    $('#playPause').click(function(){
        toggleSlideshow();
        return false;
    });

    $('#slideshow').click(function(){
        if($.browser.msie) {
            document.location.href = document.location.href.replace('photos', 'fullscreen') + '/slideshow';
        } else {
            $('#ribbon_holder').requestFullScreen();
            toggleSlideshow();
        }
        return false;
    });

    $('#ribbon_holder').mousemove(function(event){

        if(!$(this).hasClass('fullscreen')) return;

        if(triggeredByHidingMouse) {
            triggeredByHidingMouse = false;
            return false;
        }

        $('#arrow1_left:not(.hidden), #arrow1_right:not(.hidden), #navigator, #slideshowControls:not(.hidden), #fullscreen_close').show(200);
        $('html').css({cursor: 'default'});
        clearTimeout(hideAllTimeout);
        if($(event.target).hasClass('navigator') || nowDragged) {
            hideAllTimeout = setTimeout(function(){
                $('#arrow1_left, #arrow1_right,#fullscreen_close, #slideshowControls').hide(200);
            }, 800);
        } else if(mouseOverSlideshowControls) {
            hideAllTimeout = setTimeout(function(){
                $('#arrow1_left, #arrow1_right,#navigator, #fullscreen_close').hide(200);
            }, 800);
        } else if(mouseOver) {
            hideAllTimeout = setTimeout(function(){
                $('#navigator, #slideshowControls').hide(200);
            }, 800);
        } else {
            hideAllTimeout = setTimeout(function(){
                $('#arrow1_left, #arrow1_right, #navigator, #fullscreen_close, #slideshowControls').hide(200);
                triggeredByHidingMouse = true;
                $('html').css({cursor: 'none'});
            }, 800);
        }
    });
    $('#arrow1_left, #arrow1_right, #fullscreen_close').on('mouseenter', function(){
        mouseOver = true;
    }).on('mouseleave', function(){
        mouseOver = false;
    });

    $('a.dialog_quotation_opener').click(function(){
        $('#dialog-quotation').dialog('open');
        return false;
    });

    $('#setAlbumCover').click(function(){
        $.ajax({
            url: '/' + currentPage + '/' + imagePrefix + 'set_as_cover',
            type: 'post',
            dataType: 'script'
        });
        return false;
    });

    $('#settingsCaller').click(function(){
        $('#dialog-menu').dialog('close');
        $('#dialog-imageSettings').dialog('open');
        return false;
    });

    $('#dialog-imageSettings a.ok').button().click(function(){
        $.ajax({
            url: '/' + currentPage + '/properties',
            type: 'post',
            cache: false,
            dataType: 'script',
            data: $('#dialog-imageSettings form').serialize(),
            success: function(data) {
                eval(data);
            }
        });
        $('#dialog-imageSettings').dialog('close');
        return false;
    });
    $('#dialog-imageSettings a.cancel').button().click(function(){
        $('#dialog-imageSettings').dialog('close');
        return false;
    });

});