var responseSchema=null;
var columnDefs=null;
var pictures_url = null;

var table_caption=false; //false or text
var datasource_url='index.php?mode=json';
var view_details_url='index.php?mode=details';
var sortedby_key ='id';
var sortedby_dir = 'asc';
var startindex=0;
var rowsperpage = 20;

var options_cols = 3;

var isadmin = null;

function $(id)
{
    return document.getElementById(id);
}


function ShowHideFilters()
{
    //get current state
    var state = $('filter_form').style.display;

    if (state == 'none')
        $('filter_form').style.display = 'block';
    else
        $('filter_form').style.display = 'none';
}

function formatDeleteRecord(elCell, oRecord, oColumn, sData)
{
    var id = oRecord.getData('id');
    elCell.innerHTML = "<a href=# onclick='if (confirm(\"delete?\")) xajax_xajaxDeleteRecord("+ id +");'>delete</a>";
}


function formatViewDetails(elCell, oRecord, oColumn, sData)
{
    var p_int = oRecord.getData('_element_17');
    var p_ext = oRecord.getData('_element_18');
    var id = oRecord.getData('id');

    
    elCell.innerHTML = "<a href='"+ view_details_url +"&id="+ id +"'>View details</a>";

    var opts =  'directories=yes, status=yes, titlebar=yes, toolbar=yes';
    
    if (p_int != undefined)
        elCell.innerHTML += "<br/><a href='#' onclick=\"window.open('"+ pictures_url + p_int  +"','blank', '"+ opts +"');\"> View Picture Interior</a>";

    if (p_ext != undefined)
        elCell.innerHTML += "<br/><a href='#' onclick=\"window.open('"+ pictures_url + p_ext  +"','blank', '"+ opts +"');\"> View Picture Exterior</a>";
        
    if (isadmin)
    {
        var p_firewall = oRecord.getData('element_14');
        var p_drvsd = oRecord.getData('element_15');
        var p_engn = oRecord.getData('element_16');
        var p_oth1 = oRecord.getData('element_23');
        var p_oth2 = oRecord.getData('element_24');

        if (p_firewall != undefined)
            elCell.innerHTML += "<br/><a href='#' onclick=\"window.open('"+ pictures_url + p_firewall  +"','blank', '"+ opts +"');\"> View Firewall tag Picture</a>";
    
        if (p_drvsd != undefined)
            elCell.innerHTML += "<br/><a href='#' onclick=\"window.open('"+ pictures_url + p_drvsd  +"','blank', '"+ opts +"');\"> View Drivers side door jamb tag Picture</a>";
            
         if (p_engn != undefined)
            elCell.innerHTML += "<br/><a href='#' onclick=\"window.open('"+ pictures_url + p_engn  +"','blank', '"+ opts +"');\"> View Engine Picture </a>";
    
        if (p_oth1 != undefined)
            elCell.innerHTML += "<br/><a href='#' onclick=\"window.open('"+ pictures_url + p_oth1  +"','blank', '"+ opts +"');\"> View Other / Optional Picture 1 </a>";
            
        if (p_oth2 != undefined)
            elCell.innerHTML += "<br/><a href='#' onclick=\"window.open('"+ pictures_url + p_oth2  +"','blank', '"+ opts +"');\"> View Other / Optional Picture 2 </a>";
            
    }
};


function loadYUIComponents()
{
    var loader = new YAHOO.util.YUILoader({
        require: ['selector', 'animation', 'dragdrop', 'paginator', 'connection', 'datasource', 'datatable', 'container', 'event'], // what components?
        base: 'yui/build/',//where do they live?
    		//filter: "DEBUG", 	//use debug versions (or apply some
        onSuccess: function() {
            setTablePrefs();
            createGrid();
            createGridOptions();
        },

        // should a failure occur, the onFailure function will be executed
        onFailure: function(o) {
            alert("error: " + YAHOO.lang.dump(o));
        }
     });

    // Calculate the dependency and insert the required scripts and css resources
    // into the document
    loader.insert();
}

function ApplyFilters()
{
    var request = 'sort='+ sortedby_key +'&dir='+ sortedby_dir +'&startIndex='+startindex + '&results='+rowsperpage;+YAHOO.util.Connect.setForm('search_form');
    myDataSource.sendRequest(request,{
        success : myDataTable.onDataReturnSetRows,
        failure : myDataTable.onDataReturnSetRows,
        scope : myDataTable,
        argument : {} // Pass in container for population at runtime via doBeforeLoadData
    });
}

function createGrid()
{
    if ( $('table') == null) <!--create the table if space reserved for it-->
        return;
    
    myDataSource = new YAHOO.util.DataSource(datasource_url);
    myDataSource.connMethodPost = true;

    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    myDataSource.responseSchema = {
        resultsList: "records",
        fields: responseSchema,
        metaFields: {
            totalRecords: "totalRecords",
            paginationRecordOffset : "startIndex",
            paginationRowsPerPage : "pageSize",
            sortKey: "sort",
            sortDir: "dir"
        }
    };
    
    var paginator2  = new YAHOO.widget.Paginator({ 
        containers : ["dt-pag-nav"],
        rowsPerPage: rowsperpage, 
        template : "{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}", 
        pageReportTemplate : "Records shown {startIndex} - {endIndex} of {totalRecords}", 
        //template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
        rowsPerPageOptions: [5,10,20,50,100], 
        pageLinks: 5 
        });


    var myConfigs = {
        initialRequest: 'sort='+ sortedby_key +'&dir='+ sortedby_dir +'&startIndex=0&results='+rowsperpage,
        width:(screen.width - 30) + 'px',
        caption: table_caption,
        scrollable: false,
        sortedBy:
            {
                key: sortedby_key,
                dir: (sortedby_dir == 'asc') ? YAHOO.widget.DataTable.CLASS_ASC : YAHOO.widget.DataTable.CLASS_DESC
            },
        paginator: paginator2,
        dynamicData: true,
        draggableColumns:true
    };


    myDataTable = new YAHOO.widget.DataTable(
        "table", columnDefs, myDataSource, myConfigs );        

    // Set up editing flow
    var highlightEditableCell = function(oArgs) {
        var elCell = oArgs.target;
        if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
            this.highlightCell(elCell);
        }
    };
    myDataTable.subscribe("cellMouseoverEvent", highlightEditableCell);
    myDataTable.subscribe("cellMouseoutEvent", myDataTable.onEventUnhighlightCell);
    myDataTable.subscribe("cellClickEvent", myDataTable.onEventShowCellEditor);

    myDataTable.subscribe("cellUpdateEvent", function (oArgs){
        var id = oArgs.record.getData('id');
        var key = oArgs.column.key;
        var newData = oArgs.record.getData(key);
        xajax_xajpostInlineData(id, key, newData);

        //console.log(oArgs);
        }
    );
        
    myDataTable.sortColumn = function (oColumn) {
        // Calculate next sort direction for given Column
        var sDir = this.getColumnSortDir(oColumn);
        
        //remember  values
        startindex=0;
        sortedby_key=oColumn.key;
        sortedby_dir=sDir;
        
        ApplyFilters();
    };

    var handlePagination = function(state) {
        //remember  values
        startindex=state.recordOffset;
        rowsperpage=state.rowsPerPage;
        ApplyFilters();
        ApplyFilters();//it is strange - we have to request twice to show results..
    };
    // First we must unhook the built-in mechanism...
    paginator2.unsubscribe("changeRequest", myDataTable.onPaginatorChangeRequest);
    // ...then we hook up our custom function
    paginator2.subscribe("changeRequest", handlePagination, myDataTable, true);


    myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) { 
        oPayload.totalRecords = oResponse.meta.totalRecords; 
        return oPayload; 
    }
    
     //Update payload data on the fly for tight integration with latest values from server 
    myDataTable.doBeforeLoadData = function(oRequest, oResponse, oPayload) {
        var meta = oResponse.meta;
        oPayload.totalRecords = meta.totalRecords || oPayload.totalRecords;
        oPayload.pagination = {
            rowsPerPage: meta.paginationRowsPerPage ,
            recordOffset: meta.paginationRecordOffset 
        };
        oPayload.sortedBy = {
            key: meta.sortKey || sortedby_key,
            dir: (meta.sortDir) ? "yui-dt-" + meta.sortDir : "yui-dt-asc" // Convert from server value to DataTable format
        };
        return true;
    };

}

function createGridOptions()
{
    if ( $('table') == null || $('container') == null) <!--create the table options panel if space reserved for it-->
        return;
    
    var table = myDataTable;
    var table_name = 'myDataTable';
    
    columns=table.getColumnSet().keys;

    table_options  = "<table class='table_options' CELLPADDING=0 CELLSPACING=0>";
    table_id = table.getId();

    cur_table = table;
    var ic = 0;

    table_options  += "<tr>";
       
    for (var i=0 ; i<columns.length; i++)
    {
        
        var ckey = columns[i].key;
        if ( (ckey.indexOf('_') != 0) && (ckey.indexOf('@') != 0) )
        {
            table_options  += "<td style='border-bottom: 1px dotted #CACACA;'><label for=" + columns[i].key + "    >" + columns[i].label + "</label></td>";
            table_options  += "<td style='padding-right: 10px;'><input id='" + columns[i].key + "' type='checkbox'";
            if ( ! columns[i].hidden)
                table_options  += " checked=true ";
                
            table_options  += "onclick='showHide(this,cur_table);'>&nbsp;&nbsp;</td>";
            
            ic++;
            if (ic == options_cols)
            {
                ic=0;
                table_options  += "</tr><tr>";
            }
        }
    }
    
    table_options  += "</tr>";   
    table_options  += "</table>";

    panel2 = new YAHOO.widget.Panel("panel2", {tl:"-50,-50",width:"650px", heigth: screen.height-50, visible:false, fixedcenter: 'contained',  draggable:true, close:true} );
    panel2.setHeader("Show / Hide columns ");
    panel2.setBody(table_options);
    panel2.setFooter("");
    panel2.render("container");
}


function showHide(chkbox, table)
{
    var key = chkbox.id;
    var hidden = chkbox.checked;
    
    var column= table.getColumnSet().getColumn(key);
    var col_head= column.getThEl();
    var col_id = col_head.id;
    if (table.getState().sortedBy.key == key)
    {
        chkbox.checked = true;
        alert ('Column used for sorting cannot be hidden.');
        return;
    }
    
    var hdrs_str = "'" + col_id + "-ally'";
       
    var ally_cells= YAHOO.util.Selector.query("td[headers^=" + col_id + "-a11y']", table.getTbodyEl() );
    var cells= YAHOO.util.Selector.query("td[headers='" + col_id + " ']", table.getTbodyEl() );
  
    if (! hidden)
    {
        column.hidden = true;
        YAHOO.util.Dom.addClass(col_head,'yui-dt-hidden');
        YAHOO.util.Dom.addClass(cells,'yui-dt-hidden');
        YAHOO.util.Dom.addClass(ally_cells,'yui-dt-hidden');

    }
    else
    {
        column.hidden = false;
        YAHOO.util.Dom.removeClass(cells,'yui-dt-hidden');
        YAHOO.util.Dom.removeClass(ally_cells,'yui-dt-hidden');
        YAHOO.util.Dom.removeClass(col_head,'yui-dt-hidden');
    }       
}

function ShowHideTableSettings()
{
    panel2.show();
}