function ViewerScreenControls(photoViewer){
    this.photoViewer = photoViewer;
    this.timeout = null;
}

ViewerScreenControls.prototype.init = function (){
    var self = this;
    var $previousButton = $('<a href="#" class="button previousPhoto" />');
    $previousButton.bind("click", function(){
        self.photoViewer.showPreviousPhoto();
        return false;
    });

    var $nextButton = $('<a href="#" class="button nextPhoto" />');
    $nextButton.bind("click", function(){
        self.photoViewer.showNextPhoto();
        return false;
    });

    var $slideshowButton = $('<a href="#" class="button slideshow" />');
    $slideshowButton.bind("click", function(){
        self.photoViewer.startSlideshow();
        return false;
    });


    var $downloadButton = $('<a href="#" class="button download" />');
    $downloadButton.bind("click", function(){
        window.location.href = self.photoViewer.currentPhoto.downloadUrl;
        return false;
    });

    var $fullscreenButton = $('<a href="#" class="button fullscreen" />');
    $fullscreenButton.bind("click", function(){
		if (self.photoViewer.fullscreen){
			self.photoViewer.stopFullscreen();
		} else {
			self.photoViewer.startFullscreen();
		}
        return false;
    });

    var $lSlideshowControls = $('<div id="slideshowControls" />');

    var $stopSlideshowButton = $('<a href="#" class="button stopSlideshow" />');
    $stopSlideshowButton.bind("click", function(){
        self.photoViewer.stopSlideshow();
        return false;
    });

    var $pauseSlideshowButton = $('<a href="#" class="button pauseSlideshow" />');
    $pauseSlideshowButton.bind("click", function(){
        if (self.photoViewer.slideshow.isPaused()){
            self.photoViewer.slideshow.resume();
        } else {
            self.photoViewer.slideshow.pause();
        }
        return false;
    });
    
    $('#thumbs li').each(function(index){
        $(this).bind("click", function(){
        	self.photoViewer.showPhotoWithIndex(index);
            Thumbs.hidePhotoTooltip();
            return false;
        });

        $(this).bind("mouseenter", function(){
            Thumbs.showPhotoTooltip(self.photoViewer.album.photos[index], $(this).offset().left);
        });

        $(this).bind("mouseleave", function(){
            Thumbs.hidePhotoTooltip();
        });
    });

    var $loadingIndicator = $('<div class="loadingIndicator"><img src="/inc/css/images/aperture.gif"/></div>');

    $("body").append($previousButton);
    $("body").append($nextButton);
    $("body").append($lSlideshowControls);
    $("#bottomPanel").append($slideshowButton);

    if(allowPublicDownload){
        $("#bottomPanel").append($downloadButton);
    }

    $("#bottomPanel").append($fullscreenButton);
    $lSlideshowControls.append($stopSlideshowButton);
    $lSlideshowControls.append($pauseSlideshowButton);
    $('#photo').append($loadingIndicator);
}

ViewerScreenControls.prototype.reposition = function (){
    $("#body").css({"height": View.innerHeight + "px", "width": View.innerWidth + "px"});
    $("#head").css({"height": View.area.head.height + "px", "width": View.area.head.width + "px"});
    $("#thumbs").css({"height": View.area.thumbs.height + "px", "width": View.area.thumbs.width + "px"});
    $("#slideshowControls").css({"left": View.area.slideshowControls.left + "px"});

    $("#thumbs a.button").remove();
    $("#thumbs .scroller").css({"left": View.area.scroller.left + "px", "width": View.area.scroller.width + "px"});

    $(".button.download").css({
        "right": "69px",
        "top": "5px"
    });

    $(".button.fullscreen").css({
        "right": "5px",
        "top": "5px"
    });

    $(".button.slideshow").css({
        "left": "5px",
        "top": "5px"
    });

    $(".button.stopSlideshow").css({
        "left": "5px",
        "top": "5px"
    });

    $(".button.pauseSlideshow").css({
        "left": "64px",
        "top": "5px"
    });

    $("a.previousPhoto").css({
        "left": 5,
        "top": View.area.slideButton.top
    });

    $("a.nextPhoto").css({
        "right": 5,
        "top": View.area.slideButton.top
    });

    $(".loadingIndicator").css({
        "top": View.area.loadingIndicator.top + "px",
        "left": View.area.slide.left + View.area.loadingIndicator.left + "px",
        "opacity": 0.7
    });


    if(View.showThumbsButtons){
        var $lLeftButton = $('<a class="button scrollerLeft" href="#" />');
        var $lRightButton = $('<a class="button scrollerRight" href="#" />');

        $lLeftButton.css({"left": "5px"});
        $lRightButton.css({"right": "5px"});

        $lLeftButton.bind("click", function(){
            Thumbs.scrollLeft();
            return false;
        });

        $lRightButton.bind("click", function(){
            Thumbs.scrollRight();
            return false;
        });

        $("#thumbs").append($lLeftButton);
        $("#thumbs").append($lRightButton);
    }

    Thumbs.update();
}

ViewerScreenControls.prototype.hide = function(){
    if(this.photoViewer.fullscreen){
        this.timeout = null;
        $("#slideshowControls").css({"display": "none"});
        $("#head").css({"display": "none"});
        $("#bottomPanel").css({"display": "none"});
        $("a.button.nextPhoto, a.button.previousPhoto").css({"display": "none"});
    }
}

ViewerScreenControls.prototype.show = function(){
    if(this.timeout){
        clearTimeout(this.timeout);
        this.timeout = null;
    }

    if(this.photoViewer.slideshow){
        $("#slideshowControls").css({"display": "block"});
    } else {
        $("#slideshowControls").css({"display": "none"});
        $("#head").css({"display": "block"});
        $("#bottomPanel").css({"display": "block"});
        $("a.button.nextPhoto, a.button.previousPhoto").css({"display": "block"});
    }

    if(this.photoViewer.fullscreen){ this.timeout = setTimeout(this.hide, 1000); }
}


Thumbs = {
    speed: 0,
    position: 0,
    direction: null,
    scrollWidth: 0,
    maxLeft: 0,
    minLeft: 0,

    tooltipTimer: null,


    scroll: function(pPosition){
        this.position = pPosition;

        if (this.position < this.minLeft){ this.position = this.minLeft; }
        if (this.position > this.maxLeft){ this.position = this.maxLeft; }

        $("#thumbs .scroller ul").animate({"left": this.position + "px"}, "slow");
    },

    update: function(){
        var lThumbsCount = Math.floor(View.area.scroller.width / 59);
        this.scrollWidth = lThumbsCount * 59;

        this.minLeft = View.area.scroller.minLeft;

        if (this.position < this.minLeft){ this.position = this.minLeft; }
        if (this.position > this.maxLeft){ this.position = this.maxLeft; }

        $("#thumbs .scroller ul").css({"left": this.position + "px"});
    },

    scrollLeft: function(){
        this.scroll(this.position + this.scrollWidth);
    },

    scrollRight: function(){
        this.scroll(this.position - this.scrollWidth);
    },

    scrollToPhotoWithIndex: function(pPhotoOrder){
        if(!this.isThumbnailVisible(pPhotoOrder)){
            var lPosition = (pPhotoOrder * -59) - 27 + Math.floor(this.scrollWidth / 2);
            this.scroll(lPosition);
        }
    },

    isThumbnailVisible: function(pPhotoOrder){
        var lRet = true;
        var lPhotoPosition = pPhotoOrder * -59;
        if(lPhotoPosition > this.position){ lRet = false; }
        if(lPhotoPosition < (this.position - this.scrollWidth + 59)){ lRet = false; }
        return lRet;
    },

    showPhotoTooltip: function(photo, pOffsetLeft){
        clearTimeout(this.tooltipTimer);
        $("#tooltip").stop(true);

        var lPhoto = photo;
        $("#tooltip .content img").remove();

        $("#tooltip").css({
            "height": Math.round(lPhoto.thumbHeight()) + 10 + "px",
            "width": Math.round(lPhoto.thumbWidth()) + 4 + "px",
            "left": (pOffsetLeft - 2) - Math.round((lPhoto.thumbWidth() - 50)/2) + "px",
            "bottom": "58px",
            "opacity": 0,
            "display": "block"
        });

        $("#tooltip .content").css({
            "height": Math.round(lPhoto.thumbHeight()) + 4 + "px",
            "width": Math.round(lPhoto.thumbWidth()) + 4 + "px"
        });

        $("#tooltip .content").append($('<img src="' + lPhoto.thumbUrl + '" />'));

        $("#tooltip").animate({"bottom": "+=10px", "opacity": 1}, "fast", "swing");
    },

    hidePhotoTooltip: function(){
        this.tooltipTimer = setTimeout(function(){
            $("#tooltip").animate({"bottom": "+=10px", "opacity": 0}, "fast", "swing", function(){
                $(this).css("display", "none");
            });
        }, 500);
    }
};