// Namespace
var iOffer = iOffer ? iOffer : {};
iOffer.TabbedNav = iOffer.TabbedNav ? iOffer.TabbedNav : {};

// Navigation Class
iOffer.TabbedNav.TabbedNav = Class.create({

    // Constructor
    initialize : function(id) {
        this.id   = id;
        this.tabs = $A();
        this.loading_container = $(this.id + "_loading_container");
    },

    // Add tab to navigation tab array.
    add_tab : function(id, title, url, loaded, active) {
        var tab = new iOffer.TabbedNav.TabbedNavTab(this, id, title, url, loaded, active);
        this.tabs.push(tab);
    },

    // Display a tab or container and hide the rest
    display_tab_or_container : function(container_to_show) {
        this.all_containers().invoke('hide');
        container_to_show.show();
    },

    // Display the loading container
    display_loading : function() {
        this.display_tab_or_container(this.loading_container);
    },

    // Return an array of all containers and tabs.
    all_containers : function() {
        var containers = $A();
        containers.push(this.loading_container);
        containers.push(this.tabs);
        return containers.flatten();
    }
  
});

// Tab Class
iOffer.TabbedNav.TabbedNavTab = Class.create({

    // Constructor
    initialize : function(nav, id, title, url, loaded, active) {
        this.nav       = nav;
        this.id        = id;
        this.title     = title;
        this.url       = url;
        this.container = $(this.id + "_container");
        this.loaded    = loaded;
        this.active    = active;
        this.loading   = false;

        if (this.active == true) {
            this.activate();
        }

        this.register_on_click();
    },

    // Register on click event on tab
    register_on_click : function() {
        var onclick = function() {
            if (this.loaded == false) {
                this.nav.display_loading();
                if (this.loading == false)
                    this.get_remote_content();
            } else {
                this.nav.display_tab_or_container(this);
            }
            this.activate();
        }

        $(this.id).observe('click', onclick.bind(this));

        // Deprecated. Use Event#simulate
        $(this.id).observe('ioffer:click', onclick.bind(this));
    },

    // 'Hide' this tab
    hide : function() {
        this.deactivate();
        this.container.hide();
    },

    // 'Show' this tab
    show : function() {
        this.activate();
        this.container.show()
    },

    // Add active class
    activate : function() {
        this.active = true;
        $(this.id).addClassName('active');
    },

    // Add deactive class
    deactivate: function() {
        this.active = false;
        $(this.id).removeClassName('active');
    },

    // Perform a remote request to get this tab's container content
    get_remote_content : function() {
        this.loading = true;
        
        new Ajax.Request(this.url, {
            method : 'get',
            evalScripts : true,

            onSuccess : function(transport) {
                this.container.update(transport.responseText);
                this.loaded = true;
            }.bind(this),

            onFailure : function() {
                var error = new Element('div').setStyle({
                    fontSize : '14px',
                    padding  : '10px',
                    textAlign : 'center'
                }).update("There was an error loading the page.");
                this.container.update(error);
            }.bind(this),
            
            onComplete : function() {
                if (this.active) {
                    this.nav.display_tab_or_container(this);
                }
                this.loading = false;
            }.bind(this)
            
        });
    }
});