var TabController = function(name) {
    this.elementClassList = [];
    this.elementTargets = [];
    this.buttonTarget = "";
    this.buttonSelectedClass = "selected";
    this.name = name;
    this.intialised = false;
    this.currentElementClass = "";
    this.firstElementClass = "";
}

TabController.prototype.showHideElements = function(elementClass, selectedElementClass) {
    var show = (elementClass == selectedElementClass);
    for (var i = 0; i < this.elementTargets.length; i++) {
        $(this.elementTargets[i] + "." + elementClass).toggle(show);
    }
    $(this.buttonTarget + '.' + elementClass).toggleClass(this.buttonSelectedClass, show);
}


TabController.prototype.isValidElementClass = function(elementClass) {
    for (var i = 0; i < this.elementClassList.length; i++) {
        if (this.elementClassList[i] == elementClass) {
            return true;
        }
    }
    return false;
}

TabController.prototype.showElement = function(selectedElementClass) {
    if (this.currentElementClass != selectedElementClass) {
        if (this.isValidElementClass(selectedElementClass)) {
            this.currentElementClass = selectedElementClass;
            for (var i = 0; i < this.elementClassList.length; i++) {
                this.showHideElements(this.elementClassList[i], selectedElementClass);
            }
            return true;
        }
    }
    return false;
}

TabController.prototype.navigateTo = function(selectedElementClass) {
    if (this.showElement(selectedElementClass)) {
        var state=[];
        state[this.name]=selectedElementClass;
        $.bbq.pushState(state);
    }
}


TabController.prototype.initButtonClickEvent = function(elementClass) {
    var controller = this;
    var target = this.buttonTarget + "." + elementClass;
    var button = $(target);
    button.click(function() {
        controller.navigateTo(elementClass);
    });
    button.attr({ href: "javascript:void(0);" })
}

TabController.prototype.getInitialSelectedElement = function() {
    var startElementClass = null;
    // check the window location
    startElementClass = $.bbq.getState(this.name);
    if (this.isValidElementClass(startElementClass)) {
        return startElementClass;
    }
    // use the first in the list
    return this.elementClassList[0];

}

TabController.prototype.initialise = function() {
    if (!this.intialised) {
        if (this.elementClassList.length > 0) {
            for (var i = 0; i < this.elementClassList.length; i++) {
                this.initButtonClickEvent(this.elementClassList[i]);
            }
            this.navigateTo(this.getInitialSelectedElement());
        }
        var controller = this;
        $(window).bind("hashchange", function(e) {
            var current_hash = $.bbq.getState(controller.name);
            controller.navigateTo(current_hash);
        });
    }
    this.intialised = true;
}

TabController.prototype.getIntialStyleRules = function() {
    var style = "<style type=\"text/css\">";
    var intialElementClass = this.getInitialSelectedElement();
    for (var i = 0; i < this.elementClassList.length; i++) {
        var cls = this.elementClassList[i];
        if (cls != intialElementClass) {
            style += "th." + cls + ",td." + cls + " { display:none; }\n";
        }
    }
    style += "</style>";
    return style;
}


var FSRtabs = new TabController("fsrTabs");
FSRtabs.elementClassList = ["prices", "discounts", "performance", "overview"]; // the classes used
FSRtabs.elementTargets = ['#funds-search-results tr td', '#funds-search-results tr th']; // targets for the elements which are shown and hidden
FSRtabs.buttonTarget = '.maintabs a'; // target for the buttons to show and hide the elements