/* Copyright (c) Hoseasons Holidays Limited
* Authors: Chris O'Brien
* Date: 6 November 2008
*/

/*
 * Make sure global namespace Hos for all hoseasons JavaScript is defined.
 */
if (typeof Hos == 'undefined') {
  Hos = {};
}

/*
 * Tab Control
 * The constructor takes an array of tab panels.
 * A tab panel object should have the following properties
 * Name           Type            Description
 * id             string          This id will not be used in the dom but it must be different from the other tab panels.
 * header         DOMElement      Div container
 * content        DOMElement      Div container
 * enabled        boolean         If set to false the tab will not be displayed
 * 
 * Example 1.
 * 
 * var tabPanels = [ 
 *  { id: "tabPanel1", header: document.getElementById("tabPanel1_header"), content: document.getElementById("tabPanel1_content"), enabled: true }, 
 *  { id: "tabPanel2", header: document.getElementById("tabPanel2_header"), content: document.getElementById("tabPanel2_content"), enabled: true }, 
 *  { id: "tabPanel3", header: document.getElementById("tabPanel3_header"), content: document.getElementById("tabPanel3_content"), enabled: true }, 
 *  { id: "tabPanel4", header: document.getElementById("tabPanel4_header"), content: document.getElementById("tabPanel4_content"), enabled: true } 
 * ]; 
 *
 * var tabs = new Hos.Tabs(tabPanels);
 */
 
 /* Constructor
  */
Hos.Tabs = function(tabPanels) {

  this.tabPanels = tabPanels;

  for (var k = 0; k < tabPanels.length; k++) {
    tabPanels[k].header.tabPanel = tabPanels[k]; //Reference used for click event handler.
    tabPanels[k].header.tabs = this; //Reference used for click event handler.
    tabPanels[k].header.onclick = this._tabClick;
    if (k == 0) {
      this.activeTabPanel = tabPanels[0];
      tabPanels[0].header.className = Hos.Tabs.TAB_OUTER_ACTIVE_CSS_CLASS;
    } else {
      tabPanels[k].content.style.display = "none";
    }
    if (!tabPanels[k].enabled) {
      tabPanels[k].header.style.display = 'none';
      tabPanels[k].content.style.display = 'none';
    }
  }

};

/* static final properties
 */
Hos.Tabs.TAB_OUTER_CSS_CLASS = "tab_outer";
Hos.Tabs.TAB_OUTER_ACTIVE_CSS_CLASS = "tab_outer_active";

/* Prototype
 */
Hos.Tabs.prototype = {

  activeTabPanel: null,

  tabPanels: [],

  /* Event fired when user selects a new tab. It is also fired when the setActiveTabById method is called.
  */
  onActiveTabChange: function() { },

  setActiveTabById: function(id) {
    for (var k = 0; k < this.tabPanels.length; k++) {
      if (this.tabPanels[k].id == id) {
        if (!this.tabPanels[k].enabled) {
          return;
        }
        if (this.activeTabPanel != null) {
          this.activeTabPanel.content.style.display = "none";
          this.activeTabPanel.header.className = Hos.Tabs.TAB_OUTER_CSS_CLASS;
        }
        this.activeTabPanel = this.tabPanels[k];
        this.activeTabPanel.header.className = Hos.Tabs.TAB_OUTER_ACTIVE_CSS_CLASS;
        this.activeTabPanel.content.style.display = "block";
        this.onActiveTabChange();
        break;
      }
    }
  },

  _tabClick: function() {
    if (this.tabs.activeTabPanel != null) {
      if (this.tabs.activeTabPanel.id == this.tabPanel.id) return true; //If the user has click the same tab header as the active one then follow the hyperlink.
      this.tabs.activeTabPanel.content.style.display = "none";
      this.tabs.activeTabPanel.header.className = Hos.Tabs.TAB_OUTER_CSS_CLASS;
    }
    this.tabs.activeTabPanel = this.tabPanel;
    this.tabs.activeTabPanel.header.className = Hos.Tabs.TAB_OUTER_ACTIVE_CSS_CLASS;
    this.tabs.activeTabPanel.content.style.display = "block";
    this.tabs.onActiveTabChange();
  }
};