var ImageGalleryViewer = function(id) {

    this.id = null;
    this.fadeSpeed = 250;
    this.thumbs = new Array();

    this.init = function(id) {
        this.id = id;
        var image = $("#selectedGalleryImage");
        
    }

    this.handleImageLoad = function(event) {
        var image = $("#selectedGalleryImage");
        image.fadeIn(this.fadeSpeed);
    }

    this.addThumb = function(elementId, imageUrl, description) {
        var thumb = new ImageGalleryThumb(this, elementId, imageUrl, description);
        this.thumbs.push(thumb);
    }

    this.activateDefaultThumb = function() {
        if (this.thumbs.length > 0) {
            var firstThumb = this.thumbs[0];
            this.setActiveThumb(firstThumb);
        }
    }

    this.setActiveThumb = function(thumb) {
        var image = $("#selectedGalleryImage");
        var items = new Array();
        for (var key in image) {
            items.push(key);
        }
        if (image.attr("src") != thumb.imageUrl) {
            image.hide();
            image.load(this.createHandler(this.handleImageLoad));
            image.attr("src", thumb.imageUrl);
        }
        var descriptionBox = $("#selectedGalleryImageText");
        // TODO: Fade in image on load
        if (descriptionBox.html() != thumb.description) {
            descriptionBox.hide();
            descriptionBox.html(thumb.description);
            descriptionBox.height("auto");
            if (thumb.description != "") {
                descriptionBox.fadeIn(this.fadeSpeed);
            }
        }
    }

    this.createHandler = function(handlerFunction) {
        var thisObject = this;
        var handlerFunctionTemp = handlerFunction;

        var handler = function() {
            handlerFunctionTemp.apply(thisObject, arguments);
            return false;
        }

        return handler;
    }

    this.init(id);
}

var ImageGalleryThumb = function(viewer, elementId, imageUrl, description) {

    this.viewer = null;
    this.element = null;
    this.imageUrl = null;
    this.description = null;

    this.init = function(viewer, elementId, imageUrl, description) {
        this.viewer = viewer;
        var elementResult = $("#" + elementId);
        this.element = elementResult[0];
        this.imageUrl = imageUrl;
        this.description = description;
        this.element.onclick = this.createHandler(this.handleElementClick);
        this.element.onmouseover = this.createHandler(this.handleElementOver);
    }

    this.handleElementClick = function(event) {
        return false;
    }

    this.handleElementOver = function(event) {
        this.viewer.setActiveThumb(this);
    }

    this.createHandler = function(handlerFunction) {
        var thisObject = this;
        var handlerFunctionTemp = handlerFunction;

        var handler = function() {
            handlerFunctionTemp.apply(thisObject, arguments);
            return false;
        }

        return handler;
    }

    this.init(viewer, elementId, imageUrl, description);
}