$(document).ready(function(){
  
    //make table sortable
    $("#BroadbandGrid").tablesorter({
        
        //defaults
        cancelSelection: true, 
        cssHeader: "Head",
        cssAsc: "Active SortAsc", 
        cssDesc: "Active SortDesc", 
        //sortForce: [[7,1]],
        
        
        // define a custom text extraction function    
        textExtraction: function(node) {  
        
            var classname = node.className;
            
            if(classname != null){
        
                if(classname.indexOf("S") > -1){
                    return classname.substring(classname.lastIndexOf("S")+1);
                }else{
                    return 0;
                }    
            
            }else{
                return 0;
            }
            
        }
    });

    //remove click event for unwanted columns
    $("#BroadbandGrid th.Logo").unbind("click");
    $("#BroadbandGrid th.Details").unbind("click");
    $("#BroadbandGrid th.Order").unbind("click");
    
    //set default sorting on rating column
    //$("#BroadbandGrid th.Rating").trigger("click").trigger("click");
    
    //set help popup
    $(".Help").each(function(){
    
        var helpcontents = [
            {"Speed": "This is the estimated download speed."},
            {"Limit": "This is the usage limit."},
            {"Contract": "This is the length of your contract."},
            {"Install": "This is the cost of installation."},
            {"Monthly": "This is the monthly cost."},
            { "Rating": "This is our unique 5 star rating." },
            { "Gift": "You will receive this free with your order." }
        ]
    
        var popup = $('#BroadbandPopup');
        var x = $(this).offset().left - (popup.width() + 10);
        var y = $(this).offset().top - (popup.height() + 30);
                
        $(this).bind("mouseover", function(){
        
            var classname = $(this).attr("class");
            var helpname = classname.substring(classname.lastIndexOf("Help")+4);
            
            var contents = "<p>" + helpname + "</p>";
            
            $.each(helpcontents, function(i, e){
                if(e[helpname]){
                    contents += e[helpname];
                }
            });
            
            popup.html(contents);
            
            popup.show();
            popup.css("top", y);
            popup.css("left", x);
            
        });
        
        $(this).bind("mouseout", function(){
            popup.hide();
            popup.css("top", -100);
        });
        
    });
    
});