/**
 * ProductDialog
 *
 * @access public
 * @return void
 */
function ProductDialog() {
    var me = this;

    this.view         = $('#productDialog');
    this.view.title   = this.view.find('.title');
    this.view.content = this.view.find('.content');
    this.arrow        = $('#productArrow');
    this.view.close   = this.view.find('.close');
    this.view.close.click(function() {
        me.closeDialog();
    });

    this.dialogWidth = 400;
    this.imageWidth = 100;
    this.arrowWidth = 20;

    this.allProducts    = $('.product');
    this.currentlyShown = $('.curShown');

    this.images = {
        left:  '/img/arrow.png',
        right: '/img/arrow-right.png'
    };


    this.isOpen     = false;
    this.isDragged  = false;

    this.view.draggable({
        start: function() {
            me.isDragged = false;
            me.arrow.hide();
        }
    });

    /**
     * Show merch of a certain product tag.
     */
    this.showMerch = function(tag) {
        this.closeDialog();
        this.allProducts.hide();
        this.allProducts.filter('.'+tag).show();
        this.currentlyShown.html($('.showable.'+tag).text());
    }

    /**
     * Show product
     *
     * @param   {integer}   product     Product id
     * @param   {string}    title       The title of this product
     * @param   {dom}       obj         The image object that was clicked.
     */
    this.showProduct = function(product, title, obj) {
        var image = $('#'+obj);
        this.view.content.empty();
        this.view.content.load('/merch/view/'+product);
        if (!this.isOpen) {
            this.openDialog();
        }
        if (!this.isDragged) {
            this.positionDialog(image);
        }
        this.view.title.text(title);
    }

    /**
     * Closes the dialog
     */
    this.closeDialog = function() {
        this.view.hide();
        this.arrow.hide();
        this.isOpen = false;
        $(document).unbind('keydown');
    }

    this.positionDialog = function(image) {
        if (image[0]) {
            var offset = image.offset();
            this.view.css('top', (offset.top-40)+'px');

            this.arrow.show();
            this.arrow.css('top', (offset.top+40)+'px');

            // Are we on the left half of the page or the 
            // right?
            thisPage.getPagePosition();
            var half = thisPage.windowEdgeX / 2;
            if (offset.left < half) {

                // Width;
                var width = (this.imageWidth+offset.left);
                this.arrow.css('left', width+'px');

                width += this.arrowWidth;
                this.view.css('left', width+'px');
                this.arrow.css('background-image', 'url("'+this.images.left+'")');
            } else {
                var width = (offset.left - this.arrowWidth);
                this.arrow.css('left', width+'px');

                width -= (10+this.dialogWidth);
                this.view.css('left', width+'px');
                this.arrow.css('background-image', 'url("'+this.images.right+'")');
            }

        }
    }

    /**
     * Opens the dialog
     */
    this.openDialog = function() {
        var me = this;
        if (this.isOpen) {
            return;
        }

        $(document).keydown(function(evt) {
            var key = (evt.charCode || evt.keyCode);
            if (key == 27) {
                
                me.closeDialog();
            }
        });

        this.isDragged = false;
        this.view.show();
        this.isOpen = true;
    }

}