/// <reference name="MicrosoftAjax.js" />
/// <reference name="dnn.js" assembly="DotNetNuke.WebUtility" />
/// <reference name="dnn.xmlhttp.js" assembly="DotNetNuke.WebUtility" />

Type.registerNamespace('WinDoH.Escher');

WinDoH.Escher.View = function() {
    //Call Base Method
    WinDoH.Escher.View.initializeBase(this);
    //Member Variables
    this._msgs = {};
    this._iRows = null;
    this._iColumns = null;
    this._sImageSyntax = null;
    this._sPageChangeJS = null;
    this._bCaptionDisplayTitle = null;
    this._bCaptionDisplayInline = null;
    this._bCaptionTitle = null;
    this._bCaptionDesc = null;
    this._nextButton = null;
    this._prevButton = null;
    this._imagesPanel = null;
    //create delegates (MAKE SURE YOU CLEAN UP IN dispose!)
    this._onLoadDelegate = Function.createDelegate(this, this._onLoad);
    this._updateSuccessDelegate = Function.createDelegate(this, this._updateSuccess);
    this._updateFailDelegate = Function.createDelegate(this, this._updateFail);

    //Event Hookup
    Sys.Application.add_load(this._onLoadDelegate);
}

WinDoH.Escher.View.prototype =
{
    //Properties
    get_ns: function() { return this.get_id() + '_'; },
    get_msgs: function() { return this._msgs; },
    set_msgs: function(value) { this._msgs = Sys.Serialization.JavaScriptSerializer.deserialize(value); },
    get_name: function() {
        return $get(this.get_ns() + 'lblName').innerHTML;
    },
    get_iRows: function() { return this._iRows; },
    set_iRows: function(value) { this._iRows = value; },
    get_iColumns: function() { return this._iColumns; },
    set_iColumns: function(value) { this._iColumns = value; },
    get_sImageSyntax: function() { return this._sImageSyntax; },
    set_sImageSyntax: function(value) { this._sImageSyntax = value; },
    get_sPageChangeJS: function() { return this._sPageChangeJS; },
    set_sPageChangeJS: function(value) { this._sPageChangeJS = value; },
    get_bCaptionDisplayTitle: function() { return this._bCaptionDisplayTitle; },
    set_bCaptionDisplayTitle: function(value) { this._bCaptionDisplayTitle = value; },
    get_bCaptionDisplayInline: function() { return this._bCaptionDisplayInline; },
    set_bCaptionDisplayInline: function(value) { this._bCaptionDisplayInline = value; },
    get_bCaptionTitle: function() { return this._bCaptionTitle; },
    set_bCaptionTitle: function(value) { this._bCaptionTitle = value; },
    get_bCaptionDesc: function() { return this._bCaptionDesc; },
    set_bCaptionDesc: function(value) { this._bCaptionDesc = value; },
    //Events
    initialize: function() {
        //Call Base Method    
        WinDoH.Escher.View.callBaseMethod(this, 'initialize');

        //create UI
        this._nextButton = $get(this.get_ns() + 'bNext');
        this._prevButton = $get(this.get_ns() + 'bPrev');
        this._imagesPanel = $get(this.get_ns() + 'pImages');


        //this._nextButton.setAttribute('startIndex', 37);
        //this._helloButton.value = this.getMessage('btnHello'); //get localized value
        //$get(this.get_ns() + 'lblName').parentNode.appendChild(this._helloButton);

        //hookup event handlers
        if (this._nextButton) $addHandlers(this._nextButton, { "click": this._onPageChange }, this);
        if (this._prevButton) $addHandlers(this._prevButton, { "click": this._onPageChange }, this);
    },

    _onLoad: function(src, arg) {
        //this._imagesPanel.removeChild(this._imagesPanel.firstChild);
        //this._prevButton.disabled = true;
    },
    _onPageChange: function(src, arg) {
        src.preventDefault();
        this._displayWait(true);

        dnn.xmlhttp.callControlMethod('WinDoH.Escher.View.' + this.get_id(),
            'LoadData', { startIndex: src.target.getAttribute('startIndex'), maxResults: this._iRows * this._iColumns }, this._updateSuccessDelegate, this._updateFailDelegate);
    },

    //Methods
    getMessage: function(key) {
        return this._msgs[key];
    },

    showMessage: function(msg) {
        $get(this.get_ns() + 'lblResponse').innerHTML = msg;
    },

    //Private Methods
    _createChildControl: function(tag, id, type) {
        var ctl = document.createElement(tag);
        if (id)
            ctl.id = this.get_ns() + id;
        if (type)
            ctl.type = type;
        return ctl;
    },
    _createImage: function(thumb, full, name, desc) {
        link = this._createChildControl('a');
        link.href = full;
        //link.rel = 'gallery';
        if (this._bCaptionDisplayTitle) {
            if (name && desc && this._bCaptionTitle && this._bCaptionDesc)
                link.title = name + '&mdash;' + desc
            else if (name && this._bCaptionTitle)
                link.title = name;
            else if (desc && this._bCaptionDesc)
                link.title = desc;
        }

        link.className = this.get_sImageSyntax();  //'thickbox';
        img = this._createChildControl('img');
        img.src = thumb;
        img.border = 0;
        link.appendChild(img);

        //$addHandlers(link, { "click": this._createOverlay }, this);

        return link;

        //return document.createTextNode(String.format("<a href=\"{1}\"><img border=\"0\" src=\"{0}\"/></a>", thumb, full));
    },
    _createOverlay: function(src, arg) {
        src.preventDefault();
        tb_show(src.target.parentNode.title, src.target.parentNode.href, src.target.parentNode.rel);
    },
    _updateSuccess: function(payload, ctx, req) {


        this._prevButton.setAttribute('startIndex', payload.Start - payload.Size);
        this._nextButton.setAttribute('startIndex', payload.Start + payload.Size);
        var totalSum = payload.Start + payload.Size - 1;
        totalSum = (totalSum > payload.Total ? payload.Total : totalSum);
        $get(this.get_ns() + 'lPageInfo').innerHTML = String.format('Displaying {0}-{1} of {2} items.', payload.Start, totalSum, payload.Total);

        if (totalSum == payload.Total) {
            $(this._nextButton).hide();
        }
        else {
            $(this._nextButton).show();
        }
        if (payload.Start == 1) {
            $(this._prevButton).hide();
        }
        else {
            $(this._prevButton).show();
        }


        var table = this._createChildControl('table');
        table.className = 'escher';
        //table.setAttribute('style', 'display:none;');

        var tbody = this._createChildControl('tbody');

        var row = this._iRows;
        var col = this._iColumns;
        var c_row = 0;
        var c_col = 0;

        for (var i = 0; i < payload.Rows.length; i++) {
            var c2 = c_col % col;
            if (c2 == 0 && c_col != 0) {
                c_row++;
                c_col = 0;
                //new row?
                tbody.appendChild(row_current);
                row_current = this._createChildControl('tr');

            }
            else if (c_row == 0 && c_col == 0 && c2 == 0) {
                //first row?
                row_current = this._createChildControl('tr');
            }
            c_col++;
            cell_current = this._createChildControl('td');
            cell_current.appendChild(this._createImage(payload.Rows[i].Thumb, payload.Rows[i].Full, payload.Rows[i].Name, payload.Rows[i].Desc));
            if (this._bCaptionDisplayInline) {
                txt = this._createChildControl('span');
                
                if (payload.Rows[i].Name && payload.Rows[i].Desc && this._bCaptionTitle && this._bCaptionDesc)
                    txt.innerHTML = payload.Rows[i].Name + '&mdash;' + payload.Rows[i].Desc
                    else if (payload.Rows[i].Name && this._bCaptionTitle)
                        txt.innerHTML = payload.Rows[i].Name;
                    else if (payload.Rows[i].Desc && this._bCaptionDesc)
                        txt.innerHTML = payload.Rows[i].Desc;
                
                cell_current.appendChild(txt);
            }
            row_current.appendChild(cell_current);
        }
        tbody.appendChild(row_current);
        table.appendChild(tbody);
        //this._nextButton.appendChild(table);

        $('#' + this.get_ns() + 'pImages').empty();
        $('#' + this.get_ns() + 'pImages').append(table);
        //this._imagesPanel.appendChild(table);
        //this._imagesPanel.replaceChild(table, this._imagesPanel.firstChild);

        eval(this.get_sPageChangeJS()); //fix plugins that might need it...
        this._displayWait(false);
    },

    _updateFail: function(payload, ctx, req) {
        this._displayWait(false);
        alert('error: ' + payload);
    },
    _displayWait: function(show) {
        $get(this.get_ns() + 'imgAjax').className = (show ? '' : 'ceHidden');
        if (show)
            $(this._imagesPanel).fadeOut("slow");
        else
            $(this._imagesPanel).fadeIn("slow");
        //dnn.dom.doTween('outAnim', this._imagesPanel, 'top', dnn.easing.easeOutBounce, -100, 50, 1);
        //dnn.dom.doTween(id, ctl, 'top', dnn.easing.easeOutBounce, -100, 50, 1);
    },

    dispose: function() {
        if (this._nextButton) $clearHandlers(this._nextButton);
        if (this._prevButton) $clearHandlers(this._prevButton);
        this._nextButton = null;
        this._prevButton = null;
        this._imagesPanel = null;
        this._onLoadDelegate = null;
        this._updateSuccessDelegate = null;
        this._updateFailDelegate = null;
    }
}

//register class and inherit from Sys.Component
WinDoH.Escher.View.registerClass('WinDoH.Escher.View', Sys.Component);