/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />

// define Devarchive.Net namespace
Type.registerNamespace("Devarchive.Net");

// --------------------------------------------------------------
// Sample1 class, derived from Sys.Component
// --------------------------------------------------------------
Devarchive.Net.Sample1 = function() {
    // init base constructor
    Devarchive.Net.Sample1.initializeBase(this);
    
    this._stateBagID = null;
    this._divOutput = null;
    this._pageLoadHandlerDelegate = null;
    this._tblGraph = null;
    this._imgGraph = null;
};
Devarchive.Net.Sample1.prototype = {
    
    // --------------------------------
    // Properties
    // --------------------------------
    
    get_stateBagID : function() {
        return this._stateBagID;
    },
    set_stateBagID : function(value) {
        this._stateBagID = value;
    },
    get_divOutput : function() {
        return this._divOutput;
    },
    set_divOutput : function(value) {
        this._divOutput = value;
    },
    
    // --------------------------------
    // Overrides
    // --------------------------------
    
    initialize: function() {
        /// <summary> 
        /// Initializes Sys.Component instance
        /// <summary>
        Devarchive.Net.Sample1.callBaseMethod(this, 'initialize');
        this._pageLoadHandlerDelegate = 
            Function.createDelegate(this,this._pageLoadHandler);
        this.createGraphsTable();            
        Sys.Application.add_load(this._pageLoadHandlerDelegate);
    },
    
    dispose: function() {
        /// <summary>
        /// Dispozes Sys.Component instance
        /// </summary>
        Sys.Application.remove_load(this._pageLoadHandlerDelegate);
        Devarchive.Net.Sample1.callBaseMethod(this, 'dispose');
    },
    
    // --------------------------------
    // Event handlers
    // --------------------------------
    
    _pageLoadHandler : function(sender, args) {
        /// <summary>
        /// Fires after each async postback
        /// </summary>
        
    },
    
    createGraphsTable : function() {
        var div = $get(this._divOutput);
        div.innerHTML = "";
        this._tblGraph = document.createElement("table");
        this._tblGraph.style.width = "100%";
        div.appendChild(this._tblGraph);
    },
    
    clearGraphsTable : function() {
        while(this._tblGraph.rows.length>0) {
            $clearHandlers(this._tblGraph.rows[0]);
            this._tblGraph.deleteRow(this._tblGraph.rows[0]);
        }
    },
    
    updateGraphsTable : function() {
        var graph = $find(this._stateBagID).get_state().Graph;
        this.clearGraphsTable();
        var tbl = this._tblGraph;
        // create title for table
        var newRowt = tbl.insertRow(tbl.rows.length);
        newRowt.className = "headerRow";
        var cellt2 = newRowt.insertCell(newRowt, 0);
        cellt2.innerHTML = "Value";
        var cellt1 = newRowt.insertCell(newRowt, 0);
        cellt1.innerHTML = "Title";
        for(var i=0; i< graph.Values.length; i++) {
            var title = graph.Values[i].Title;
            if(!title) title = "";
            var value = graph.Values[i].Value;
            if(!value) value = "";
		    var newRow = tbl.insertRow(tbl.rows.length);
            var cell2 = newRow.insertCell(newRow, 0);
            var tbValue = document.createElement("input");
            tbValue.type = "text";
            tbValue.value = value;
            cell2.appendChild(tbValue);
            var cell1 = newRow.insertCell(newRow, 0);
            var tbTitle = document.createElement("input");
            tbTitle.type = "text";
            tbTitle.value = title;
            cell1.appendChild(tbTitle);
            var delegateKeyUpV = Function.createDelegate(
                {
                    "uc" : this, 
                    "type" : "Value",
                    "index" : i
                }, 
                this.tbValueChanged
            );
            var delegateKeyUpT = Function.createDelegate(
                {
                    "uc" : this, 
                    "type" : "Title",
                    "index" : i
                }, 
                this.tbValueChanged
            );
            $addHandler(tbValue, "keyup", delegateKeyUpV);
            $addHandler(tbTitle, "keyup", delegateKeyUpT);
        }
        var newRow = tbl.insertRow(tbl.rows.length);
        var cell = newRow.insertCell(newRow, 0);
        cell.collspan = 2;
        var graphImage = document.createElement("img");
        cell.appendChild(graphImage);
        this._imgGraph = graphImage;
        this.showChartData(graph);
    },
    
    showChartData : function() {
        var graph = $find(this._stateBagID).get_state().Graph;
        var img = this._imgGraph;
        if(graph && img) {
            var sb = new Sys.StringBuilder();
            var sbT = new Sys.StringBuilder();
            var sbV = new Sys.StringBuilder();
            sb.append("http://chart.apis.google.com/chart?");
            sb.append("chs=450x200");
            sb.append("&cht=p3");
            var lastValueSep = "";
            var lastTitleSep = "";
            for(var i=0; i< graph.Values.length; i++) {
                if(
                    graph.Values[i].Title && 
                    graph.Values[i].Title != "" &&
                    graph.Values[i].Value &&
                    graph.Values[i].Value != ""
                   ) {
                    sbT.append(lastTitleSep);
                    lastTitleSep = "|";
                    sbV.append(lastValueSep);
                    lastValueSep = ",";
                    sbT.append(graph.Values[i].Title);
                    sbV.append(graph.Values[i].Value);
                }
            }
            sb.append("&chd=t:");
            sb.append(sbV.toString());
            sb.append("&chl=");
            sb.append(sbT.toString());
            img.src = sb.toString();
        }
    },
    
    tbValueChanged : function(args) {
        var graph = $find(this.uc._stateBagID).get_state().Graph;
        var tb = args.target;
        if(graph && graph.Values[this.index] && tb) {
            if(this.type == "Title") {
                graph.Values[this.index].Title = tb.value;
            } else if(this.type == "Value") {
                graph.Values[this.index].Value = tb.value;
            }
            this.uc.showChartData();
        }
    },
    
    newGraphLine : function(title, value) {
        return {
            "Title" : title,
            "Value" : value
        };
    },
    
    newGraph : function(value){
        var graph = $find(this._stateBagID).get_state().Graph;
        var length = parseInt(value);
        if(length && length<30) {
            graph.Values = new Array();
            for(var i = 0; i<length; i++) {
                graph.Values[i] = this.newGraphLine("", "");
            }
            this.updateGraphsTable();
        } else {
            alert("length can not be parsed, or it is too large value");
        }
    }
};
Devarchive.Net.Sample1.registerClass('Devarchive.Net.Sample1', Sys.Component);