var formatImg = function(elCell, oRecord, oColumn, oData) {
        var name = oData;
        var img = oRecord.getData("image_path");
        var url = oRecord.getData("url");
        var id = oRecord.getData("id");
        elCell.innerHTML = '<div id="pcon_' + id + '"><div class="stitle">' + name + '</div><div><a href="http://www.a1supplements.com/'+ url + '" /><img src="http://www.a1supplements.com/' + img +'" border="0" /></a></div></div><div style="text-align:right;"><a href="http://www.a1supplements.com/' + url + '"> More Info </a></div>';
    };
    
var formatProt = function(elCell, oRecord, oColumn, oData) {
        var protein = oData;
        elCell.innerHTML = '<span class="prot">' + protein + '</span>';
    };
var formatFat = function(elCell, oRecord, oColumn, oData) {
        var fat = oData;
        elCell.innerHTML = '<span class="fat">' + fat + '</span>';
    };
var formatPrice = function(elCell, oRecord, oColumn, oData) {
        var price = oData;
        elCell.innerHTML = '<span class="dol">$</span><span class="money">' + price + '</span>';
    };
    
var formatPackaging = function(elCell, oRecord, oColumn, oData) {
        var pack = oData;
        elCell.innerHTML = '<div><img src="' + _baseURL + 'images/icons/' + pack + '.gif"></div>';
    };
    
var formatType = function(elCell, oRecord, oColumn, oData) {
        var type = oData;
        if(type != 'other')
        {
            elCell.innerHTML = '<div><a href="' + _baseURL + 'learn/protein/' + type +'" /><img src="' + _baseURL + '/images/icons/' + type + '.gif" border="0"></a></div>';
        }
        else
        {
            elCell.innerHTML = '<div><img src="' + _baseURL + '/images/icons/' + type + '.gif" border="0"></div>';
        }
        
    };
var debugCon = '';    
var formatYN = function(elCell, oRecord, oColumn, oData) {
        var data = oData;
        if(data == 'yes')
        {
            elCell.innerHTML = '<div><img src="' + _baseURL + 'images/icons/check.gif"></div>';
        }
        else
        {
            elCell.innerHTML = '<div><img src="' + _baseURL + 'images/icons/slash.gif"></div>';
        }
    };

    
var myFloatFormat = function(elCell, oRecord, oColumn, oData)
{
    elCell.innerHTML = parseFloat(oData);
}

var test = false;
    
var formatStar = function(elCell, oRecord, oColumn, oData){
        var rating = oData;
        var width = '';
        //var per = rating * 20;
        //per = Math.round(per);
        
        var per = (parseFloat(rating) * 20);
        per = Math.round(per);
        
        width = 'width:' + per + "%";
        
        var html = '<span class="inline-rating">';
            html += '<ul class="star-rating small-star">';
                html += '<li class="current-rating" style="'+ width + '"></li>';
                html += '<li></li>';
                html += '<li></li>';
                html += '<li></li>';
                html += '<li></li>';
                html += '<li></li>';
            html += '</ul></span>';
            
        /*var html = '<span class="inline-rating">';
            html += '<ul class="star-rating">';
                html += '<li class="current-rating" style="'+ width + '"></li>';
                html += '<li><a href="#" title="1 star out of 5" class="one-star"></a></li>';
                html += '<li><a href="#" title="2 stars out of 5" class="two-stars"></a></li>';
                html += '<li><a href="#" title="3 stars out of 5" class="three-stars"></a></li>';
                html += '<li><a href="#" title="4 stars out of 5" class="four-stars"></a></li>';
                html += '<li><a href="#" title="5 stars out of 5" class="five-stars"></a></li>';
            html += '</ul></span>';*/
            elCell.innerHTML = html;
}
    
var myFloatFormat = function(elCell, oRecord, oColumn, oData)
{
    elCell.innerHTML = parseFloat(oData);
}                  

var _FLAVOR_CONTAINER = false;
    
var _COL_DEFS = [{key:"name",per:true,def:{key:"name",label:"Product", formatter: formatImg, sortable:true}},
                    {key:"grams_protein",per:true,def:{key:"grams_protein",label:"Protein/grams", sortable:true, formatter:formatProt,parser:YAHOO.util.DataSource.parseNumber}},
                    {key:"grams_fat",per:true,def:{key:"grams_fat",label:"Fat/grams", sortable:true, formatter:formatFat,parser:"number"}},
                    {key:"grams_carbs",per:false,def:{key:"grams_carbs",label:"Carbs/grams", sortable:true, formatter:YAHOO.widget.DataTable.formatNumber,parser:"number"}},
                    {key:"grams_sugar",per:false,def:{key:"grams_sugar",label:"Sugar/grams", sortable:true, formatter:YAHOO.widget.DataTable.formatNumber,parser:"number"}},
                    {key:"grams_saturated_fat",per:false,def:{key:"grams_saturated_fat",label:"Saturated Fat/grams", sortable:true, formatter:YAHOO.widget.DataTable.formatNumber,parser:"number"}},
                    {key:"cholesterol",per:false,def:{key:"cholesterol",label:"Cholesterol", sortable:true, formatter:YAHOO.widget.DataTable.formatNumber,parser:"number"}},
                    {key:"calories",per:true,def:{key:"calories",label:"Calories", sortable:true, formatter:YAHOO.widget.DataTable.formatNumber,parser:"number"}},
                    {key:"servings_per_container",per:true,def:{key:"servings_per_container",label:"Servings", sortable:true, formatter:YAHOO.widget.DataTable.formatNumber,parser:"number"}},
                    {key:"packaging",per:false,def:{key:"packaging",label:"Packaging", formatter:formatPackaging, sortable:true}},
                    {key:"aspartame",per:false,def:{key:"aspartame",label:"Aspartame", formatter:formatYN, sortable:true}},
                    {key:"low_lactose",per:false,def:{key:"low_lactose",label:"Low Lactose", formatter:formatYN, sortable:true}},
                    {key:"gluten_free",per:false,def:{key:"gluten_free",label:"Gluten Free", formatter:formatYN, sortable:true}},
                    {key:"grams_fiber",per:false,def:{key:"grams_fiber",label:"Fiber/grams", sortable:true, formatter:YAHOO.widget.DataTable.formatNumber,parser:"number"}},
                    {key:"mgrams_sodium",per:false,def:{key:"mgrams_sodium",label:"Sodium/mgrams", sortable:true, formatter:YAHOO.widget.DataTable.formatNumber,parser:"number"}},
                    {key:"type",per:false,def:{key:"type",label:"Type", formatter:formatType, sortable:true}},
                    {key:"price",per:true,def:{key:"price",label:"Price", sortable:true,formatter:formatPrice, parser:"currency"}},
                    {key:"rating",per:true,def:{key:"rating",label:"Rating", sortable:true, formatter: formatStar}}];
                                                                    
var _SET_KEYS = false;

function checkColumn(key)
{
    if(_SET_KEYS)
    {
        searchObj = _SET_KEYS;
    }
    else
    {
        searchObj = _PRODUCT_SEARCH.fields;
    }
    
    for(var i in _COL_DEFS)
    {
        if(_COL_DEFS[i].per)
        {
            if(_COL_DEFS[i].key == key)
            {
                return false;
            }
        }
        else
        {
            for(var c in searchObj)
            {
                if(searchObj[c] == key)
                {
                    return false;
                }
            }
        
        }
    
    }
    
    return true;

}

function getDEFS(override)
{
    var searchObj;
    var container = [];
    
    if(_SET_KEYS)
    {
        searchObj = _SET_KEYS;
    }
    else
    {
        searchObj = _PRODUCT_SEARCH.fields;
    }
    
    for(var i in _COL_DEFS)
    {
        container[container.length] =  _COL_DEFS[i].def;
    }
    
    return container;
}

function get_more_info(id)
{
    please_wait('Gathering data');
    xajax_xmore_info(id);
}

function build_protein_data_table()
{
    YAHOO.example.ColumnShowHide = function() {
        // Define Columns
        var myColumnDefs = getDEFS(true);

        // Create DataSource
        var myDataSource = new YAHOO.util.DataSource(_PRODUCT_SEARCH.elements);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: [
                    {key:"id"},
                    {key:"name"},
                    {key:"image_path"},
                    {key:"grams_protein",parser: "number"},
                    {key:"grams_carbs",parser: "number"},
                    {key:"grams_sugar",parser: "number"},
                    {key:"grams_fat",parser: "number"},
                    {key:"grams_saturated_fat",parser: "number"},
                    {key:"cholesterol",parser: "number"},
                    {key:"calories",parser: "number"},
                    {key:"servings_per_container",parser: "number"},
                    {key:"packaging"},
                    {key:"aspartame"},
                    {key:"low_lactose"},
                    {key:"gluten_free"},
                    {key:"grams_fiber",parser: "number"},
                    {key:"mgrams_sodium",parser: "number"},
                    {key:"type"},
                    {key:"price",parser: "number"},
                    {key:"url"},
                    {key:"rating"}]
        };

        // Create DataTable
         var myPagination = {rowsPerPage:10,
                            totalRecords:myDataSource.length,
                            rowsPerPageOptions:[10,25,50,100,150,200],
                            template:"Page {PageLinks} Show {RowsPerPageDropdown} per page"};
    
        var myOptions = {sortedBy:{key:"name",dir:"asc"},
                            paginator : new YAHOO.widget.Paginator(myPagination),
                            caption : "Click on a column to sort, Click and drag a column head to reorder",
                            draggableColumns:true};
    
        var myDataTable = new YAHOO.widget.DataTable("columnshowhide", myColumnDefs, myDataSource, myOptions);
        var myColumns = myDataTable.getColumnSet().keys;
        for(var i=0,l=myColumns.length;i<l;i++) 
        {
            var tColumn = myColumns[i];
            var myDefi = tColumn.getDefinition();
            if(checkColumn(myDefi.key))
            {
                myDataTable.hideColumn(tColumn);
            }
        }
                    
        // Shows dialog, creating one when necessary
        var newCols = true;
        var showDlg = function(e) {
            YAHOO.util.Event.stopEvent(e);

            if(newCols) {
                // Populate Dialog
                // Using a template to create elements for the SimpleDialog
                var allColumns = myDataTable.getColumnSet().keys;
                var elPicker = YAHOO.util.Dom.get("dt-dlg-picker");
                var elTemplateCol = document.createElement("div");
                YAHOO.util.Dom.addClass(elTemplateCol, "dt-dlg-pickercol");
                var elTemplateKey = elTemplateCol.appendChild(document.createElement("span"));
                YAHOO.util.Dom.addClass(elTemplateKey, "dt-dlg-pickerkey");
                var elTemplateBtns = elTemplateCol.appendChild(document.createElement("span"));
                YAHOO.util.Dom.addClass(elTemplateBtns, "dt-dlg-pickerbtns");
                var onclickObj = {fn:handleButtonClick, obj:this, scope:false };
                
                // Create one section in the SimpleDialog for each Column
                var elColumn, elKey, elButton, oButtonGrp;
                for(var i=0,l=allColumns.length;i<l;i++) {
                    var oColumn = allColumns[i];
                    var myDef = oColumn.getDefinition();
                    
                    // Use the template
                    elColumn = elTemplateCol.cloneNode(true);
                    
                    // Write the Column key
                    elKey = elColumn.firstChild;
                    //elKey.innerHTML = oColumn.getKey();
                    elKey.innerHTML = myDef.label;
                    
                    // Create a ButtonGroup
                    oButtonGrp = new YAHOO.widget.ButtonGroup({ 
                                    id: "buttongrp"+i, 
                                    name: oColumn.getKey(), 
                                    container: elKey.nextSibling
                    });
                    oButtonGrp.addButtons([
                        { label: "Show", value: "Show", checked: ((!oColumn.hidden)), onclick: onclickObj},
                        { label: "Hide", value: "Hide", checked: ((oColumn.hidden)), onclick: onclickObj}
                    ]);
                                    
                    elPicker.appendChild(elColumn);
                }
                newCols = false;
            }
            myDlg.show();
        };
        var hideDlg = function(e) {
            this.hide();
        };
        var handleButtonClick = function(e, oSelf) {
            var sKey = this.get("name");
            if(this.get("value") === "Hide") {
                // Hides a Column
                myDataTable.hideColumn(sKey);
            }
            else {
                // Shows a Column
                myDataTable.showColumn(sKey);
            }
        };
        
        // Create the SimpleDialog
        YAHOO.util.Dom.removeClass("dt-dlg", "inprogress");
        var myDlg = new YAHOO.widget.SimpleDialog("dt-dlg", {
                width: "30em",
                visible: false,
                modal: true,
                buttons: [ 
                    { text:"Close",  handler:hideDlg }
                ],
                fixedcenter: true,
                constrainToViewport: true
        });
        myDlg.render();

        // Nulls out myDlg to force a new one to be created
        myDataTable.subscribe("columnReorderEvent", function(){
            newCols = true;
            YAHOO.util.Event.purgeElement("dt-dlg-picker", true);
            YAHOO.util.Dom.get("dt-dlg-picker").innerHTML = "";
        }, this, true);
        
        // Hook up the SimpleDialog to the link
        YAHOO.util.Event.addListener("dt-options-link", "click", showDlg, this, true);
        
        return {
          oDS: myDataSource,
          oDT: myDataTable
        };
    }();


}

function showFlavors(id)
{
    var linkt = 'http://www.a1supplements.com/' + _MPRODUCT_CONTAINER.url;
    var out = '<div class="mtitle">' + _MPRODUCT_CONTAINER.name + '</div>';
    out += '<table><tr valign="top"><td width="200" style="padding-top:20px;">';
    //var prod = document.getElementById('pcon_' + id).innerHTML;
    var img = _MPRODUCT_CONTAINER.image_path;
    var prod = '<div><a href="'+ linkt + '" title="Click to visit the product page"><img src="http://www.a1supplements.com/' + img +'" border="0" /></a></div>';
    out += prod; 
     out += '<div><a href="' + linkt  + '">Product Page</a></div></td><td align="left">';
     
    if(_FLAVOR_CONTAINER)
    {
        out += '<div class="ftitle">Flavors</div>';
        for(var i in _FLAVOR_CONTAINER)
        {
            out += '<div style="padding-bottom:4px;"><div class="dbutton"><a href="'+ linkt + '" title="Click to visit the product page">' + _FLAVOR_CONTAINER[i].option_name + '</a></div></div>'; 
        }
    
    }
    else
    {
        out += '<div style="padding-bottom:4px;text-align:center;"><div class="dbutton"><a href="'+ linkt + '" title="Click to visit the product page">Visit the product page</a></div></div>';
    }
    out += '</td></tr></table>';
    
   set_panel_message('More Info',out);
}

function build_panel()
{
    var config = {
        width:"500px", 
        fixedcenter:true,
        draggable:false,
        modal:true, 
        underlay:"shadow", 
        close:true, 
        visible:false,
        iframe:true,
        zIndex:20};
        
    myPanel = new YAHOO.widget.Panel("myPanel",config);
    myPanel.setHeader("");
    myPanel.setBody('');
    myPanel.cfg.setProperty("underlay","matte");
    myPanel.render();
}

function set_panel_message(header,message)
{
    myPanel.setHeader(header);
    message = '<div style="text-align:center;"><div>' + message + '</div></div>';
    myPanel.setBody(message);
    myPanel.show();
}

function clear_panel()
{
    myPanel.hide();
    myPanel.setHeader("");
    myPanel.setBody("");
}

function please_wait(message)
{
    myPanel.setHeader("Please Wait");
    message = '<div style="text-align:center;"><div style="padding:10px; font-size:14px;">' + message + '</div><div><img src="' + _baseURL + '/images/loader.gif"></div></div>';
    myPanel.setBody(message);
    myPanel.show();
    //xajax_delete_product();
    
}

function init(){
build_protein_data_table();
build_panel();
}