// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var guest_panel = {
  state: "closed",
  
  show: function() {
    guest_panel.expand();
  },

  persist: function() {  
    if(typeof guest_panel.hide_panel_timeout == "number") {
      window.clearTimeout(guest_panel.hide_panel_timeout);
      delete guest_panel.hide_panel_timeout;
    }
  },

  hide: function() {
    guest_panel.hide_panel_timeout = window.setTimeout(function() { guest_panel.contract(); }, 500);
  },

  expand: function() {
    
    this.persist();
    
    if (this.state == "closed") {
      new Effect.Parallel(
        [new Effect.Morph('header_panel', { style: 'height: 150px', sync: true }),
         new Effect.Appear('hidden_login_fields', { sync: true })
        ], { duration: 0.2, beforeStart: function() { $('header_panel').style.position = "fixed" }, afterFinish: function() { 
            $('header_panel').hide(); $('header_panel').show();
            $('header_panel').style.backgroundImage = "url(/images/header_panel_background_darker.png)";    
            $('customer_login_token').focus(); 
          } }
      );

      this.state = "open";
    };
    

  },

  contract: function() {
    if (this.state == "open") {
      new Effect.Parallel(
        [new Effect.Morph('header_panel', { style: 'height: 60px;', sync: true }),
         new Effect.Fade('hidden_login_fields', { sync: true })
        ], { duration: 0.2, afterFinish: function() { $('header_panel').style.position = "static" }  }
      );

      $('header_panel').style.backgroundImage = "url(/images/header_panel_background.png)";
      
      this.state = "closed";
    };
  }
}



// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var _edit_tab_switcher = {
  previousTabId: null,
  currentTabId: null,

  targetTab: function() { return $(this.currentTabId + "_container"); },
  bumTab: function() { return $(this.previousTabId + "_container"); },


  //
  //
  //
  init: function(tab_name) {
    this.currentTabId = tab_name;
    this.updateTabView();

    $(this.currentTabId + "_selector").highlight({ startcolor: '#C1F0B0', duration: 0.5 })

    new Effect.Parallel([
      new Effect.Morph('aspect_container_view', { style: 'height: ' + this.targetTabHeight() + 'px;', sync: true }),
      new Effect.Appear(this.targetTab(), { sync: true }),
    ], { duration: 0.5, afterFinish: function() { $('aspect_container_view').writeAttribute('style', ''); } });
  },

  //
  //
  //
  updateTabView: function() {
    if(this.previousTabId != null) {
      $$('#aspect_switcher li').each(function(li) { li.writeAttribute('style', '') });
      $$('#aspect_switcher li.active').first().removeClassName('active');
    }

    $(this.currentTabId + "_selector").addClassName('active');
  },

  //
  //
  //
  switchTo: function(tab_name) {
    if(tab_name == this.currentTabId) {
      return false;
    } else {

      $('aspect_container_view').style.height = $('aspect_container_view').offsetHeight + 'px';

      this.previousTabId = this.currentTabId;
      this.currentTabId = tab_name;

      this.updateTabView();

      this.bumTab().hide();

      new Effect.Parallel([
        new Effect.Morph('aspect_container_view', { style: 'height: ' + this.targetTabHeight() + 'px;', sync: true }),
        new Effect.Appear(this.targetTab(), { sync: true }),
      ], { duration: 0.5, afterFinish: function() { $('aspect_container_view').writeAttribute('style', '') } });
    }
  },


  // the DOM is wacky
  targetTabHeight: function() {

    this.targetTab().style.visibility = "hidden";
    this.targetTab().style.display = "block";
    _height = parseInt(this.targetTab().offsetHeight);
    this.targetTab().style.display = "none";
    this.targetTab().style.visibility = "visible";

    return _height;
  }
}




// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var plan_option_form_change_tracker = {

  parentContainer: null,
  initialized: false,
  hasChanges: false,

  init: function(parent_id) {
    this.parentContainerId = parent_id;
    this.hookToForm();
    this.initialized = true;
  },

  reInit: function() {
    if(this.initialized) {
      this.hookToForm();
    }
  },

  hookToForm: function() {
    $(this.parentContainerId).select("input").each(function(i) {
      i.onchange = function() { plan_option_form_change_tracker.dirty(); }
    });
  },

  dirty: function() { this.hasChanges = true }
}


function remove_placeholder_row(tbody_id) {
  if((typeof $(tbody_id) != undefined) && ($(tbody_id).select("tr.blankrow").size() > 0))
  {
    $(tbody_id).select("tr.blankrow").first().remove();
  }
}


function show_usage_report_tab(tab_name) {
  $$('.usage_report_tab').each(function(t) { t.hide(); });
  $(tab_name + '_tab').show();
}












// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var plan_finder_tab_controller = {
  previousName: null,
  clickedName: null,

  // returns the element representing the tab for the given name
  getTab: function(name) {
    return $(name + "_tab");
  },

  // returns the element representing the pane for the given name
  getPane: function(name) {
    return $(name + "_pane");
  },

  paneContainer: function() {
    return $('plan_finder_container');
  },

  // shortcut methods for the most common uses of the above
  previousTab: function() { return this.getTab(this.previousName) },
  previousPane: function() { return this.getPane(this.previousName) },
  clickedTab: function() { return this.getTab(this.clickedName) },
  clickedPane: function() { return this.getPane(this.clickedName) },


  // adds handlers to our tab elements and shows the initial pane that should be loaded
  bootstrap: function(names, initial_tab) {
    names.each(function(name) {
      $(name + "_tab").observe('click', plan_finder_tab_controller.clickHandler);
    });

    this.switchTab(initial_tab);
  },

  // the event handler. occours outside the context of the object (ie, "class" method)
  clickHandler: function(_event) {
    return plan_finder_tab_controller.switchTab(_event.element().id.gsub(/_[a-z]+$/, ''));
  },

  // handles the actual visual update of the tab display
  switchTab: function(_clicked) {
    this.previousName = this.clickedName
    this.clickedName  = _clicked

    if (this.previousName != null) {      
      this.previousPane().hide();
    }

    effect_stack = [
      new Effect.Morph(this.paneContainer(), { style: 'height: ' + this.targetContainerHeight() + 'px;', sync: true }),
      new Effect.Appear(this.clickedPane(), { sync: true }),
    ];

    new Effect.Parallel(effect_stack, { duration: 0.5, afterFinish: this.clearFixedHeightOnContainer });

    // once we're done...
    this.refreshTabDisplay();    
    this.clickedTabCallback();    
  },

  // updates our tab class names
  refreshTabDisplay: function() {
    if(this.previousTab() != null) {
      this.previousTab().toggleClassName('active');
    }

    this.clickedTab().toggleClassName('active');
  },

  clearFixedHeightOnContainer: function() {
    $('plan_finder_container').writeAttribute('style', '');
  },
  

  // the DOM is wacky
  targetContainerHeight: function() {
    // return this.clickedTab().getHeight();
  
    _ct = this.clickedPane();
      
    _ct.style.visibility = "hidden";
    _ct.style.display = "block";
    _height = parseInt(_ct.offsetHeight);
    _ct.style.display = "none";
    _ct.style.visibility = "visible";
      
    return _height;
  },
  
  clickedTabCallback: function() {
    switch(this.clickedName) {
      case 'browse': this.browseTabCallback();
    }
  },
  
  browseTabCallback: function() {
    new Ajax.Request('/plans', {
      asynchronous:true, 
      evalScripts:true, 
      method:'get', 
      onFailure:function(request){alert('Error.'); $('spinner_container').hide();}, 
      onLoading:function(request){$('spinner_container').show()}, 
      onSuccess:function(request){$('spinner_container').hide()}, 
      parameters:'finder_tab=browse'
    });
  }
  
  
}





var plan_view_tab_controller = {
  previousName: null,
  clickedName: null,

  // returns the element representing the tab for the given name
  getTab: function(name) {
    return $(name + "_tab");
  },

  // returns the element representing the pane for the given name
  getPane: function(name) {
    return $(name + "_pane");
  },

  paneContainer: function() {
    return $('plan_view_container');
  },

  // shortcut methods for the most common uses of the above
  previousTab: function() { return this.getTab(this.previousName) },
  previousPane: function() { return this.getPane(this.previousName) },
  clickedTab: function() { return this.getTab(this.clickedName) },
  clickedPane: function() { return this.getPane(this.clickedName) },


  // adds handlers to our tab elements and shows the initial pane that should be loaded
  bootstrap: function(names, initial_tab) {
    names.each(function(name) {
      $(name + "_tab").observe('click', plan_view_tab_controller.clickHandler);
    });

    this.switchTab(initial_tab);
  },

  // the event handler. occours outside the context of the object (ie, "class" method)
  clickHandler: function(_event) {
    return plan_view_tab_controller.switchTab(_event.element().id.gsub(/_[a-z]+$/, ''));
  },

  // handles the actual visual update of the tab display
  switchTab: function(_clicked) {
    this.previousName = this.clickedName
    this.clickedName  = _clicked

    if (this.previousName != null) {      
      this.previousPane().hide();
    }

    effect_stack = [
      new Effect.Morph(this.paneContainer(), { style: 'height: ' + this.targetContainerHeight() + 'px;', sync: true }),
      new Effect.Appear(this.clickedPane(), { sync: true }),
    ];

    new Effect.Parallel(effect_stack, { duration: 0.5, afterFinish: this.clearFixedHeightOnContainer });

    // once we're done...
    this.refreshTabDisplay();
  },

  // updates our tab class names
  refreshTabDisplay: function() {
    if(this.previousTab() != null) {
      this.previousTab().toggleClassName('active');
    }

    this.clickedTab().toggleClassName('active');
  },

  clearFixedHeightOnContainer: function() {
    $('plan_view_container').writeAttribute('style', '');
  },
  

  // the DOM is wacky
  targetContainerHeight: function() {
    // return this.clickedTab().getHeight();
  
    _ct = this.clickedPane();
      
    _ct.style.visibility = "hidden";
    _ct.style.display = "block";
    _height = parseInt(_ct.offsetHeight);
    _ct.style.display = "none";
    _ct.style.visibility = "visible";
      
    return _height;
  }
}













var selection_view_tab_controller = {
  previousName: null,
  clickedName: null,

  // returns the element representing the tab for the given name
  getTab: function(name) {
    return $(name + "_tab");
  },

  // returns the element representing the pane for the given name
  getPane: function(name) {
    return $(name + "_pane");
  },

  paneContainer: function() {
    return $('selection_view_container');
  },

  // shortcut methods for the most common uses of the above
  previousTab: function() { return this.getTab(this.previousName) },
  previousPane: function() { return this.getPane(this.previousName) },
  clickedTab: function() { return this.getTab(this.clickedName) },
  clickedPane: function() { return this.getPane(this.clickedName) },


  // adds handlers to our tab elements and shows the initial pane that should be loaded
  bootstrap: function(names, initial_tab) {
    names.each(function(name) {
      $(name + "_tab").observe('click', selection_view_tab_controller.clickHandler);
    });

    this.switchTab(initial_tab);
  },

  // the event handler. occours outside the context of the object (ie, "class" method)
  clickHandler: function(_event) {
    return selection_view_tab_controller.switchTab(_event.element().id.gsub(/_[a-z]+$/, ''));
  },

  // handles the actual visual update of the tab display
  switchTab: function(_clicked) {
    this.previousName = this.clickedName
    this.clickedName  = _clicked

    if (this.previousName != null) {      
      this.previousPane().hide();
    }

    effect_stack = [
      new Effect.Morph(this.paneContainer(), { style: 'height: ' + this.targetContainerHeight() + 'px;', sync: true }),
      new Effect.Appear(this.clickedPane(), { sync: true }),
    ];

    new Effect.Parallel(effect_stack, { duration: 0.5, afterFinish: this.clearFixedHeightOnContainer });

    // once we're done...
    this.refreshTabDisplay();
  },

  // updates our tab class names
  refreshTabDisplay: function() {
    if(this.previousTab() != null) {
      this.previousTab().toggleClassName('active');
    }

    this.clickedTab().toggleClassName('active');
  },

  clearFixedHeightOnContainer: function() {
    $('selection_view_container').writeAttribute('style', '');
  },
  

  // the DOM is wacky
  targetContainerHeight: function() {
    // return this.clickedTab().getHeight();
  
    _ct = this.clickedPane();
      
    _ct.style.visibility = "hidden";
    _ct.style.display = "block";
    _height = parseInt(_ct.offsetHeight);
    _ct.style.display = "none";
    _ct.style.visibility = "visible";
      
    return _height;
  }
}





var usage_report_tab_controller = {
  previousName: null,
  clickedName: null,

  // returns the element representing the tab for the given name
  getTab: function(name) {
    return $(name + "_tab");
  },

  // returns the element representing the pane for the given name
  getPane: function(name) {
    return $(name + "_pane");
  },

  paneContainer: function() {
    return $('usage_report_container');
  },

  // shortcut methods for the most common uses of the above
  previousTab: function() { return this.getTab(this.previousName) },
  previousPane: function() { return this.getPane(this.previousName) },
  clickedTab: function() { return this.getTab(this.clickedName) },
  clickedPane: function() { return this.getPane(this.clickedName) },


  // adds handlers to our tab elements and shows the initial pane that should be loaded
  bootstrap: function(names, initial_tab) {
    names.each(function(name) {
      $(name + "_tab").observe('click', usage_report_tab_controller.clickHandler);
    });

    this.switchTab(initial_tab);
  },

  // the event handler. occours outside the context of the object (ie, "class" method)
  clickHandler: function(_event) {
    return usage_report_tab_controller.switchTab(_event.element().id.gsub(/_[a-z]+$/, ''));
  },

  // handles the actual visual update of the tab display
  switchTab: function(_clicked) {
    this.previousName = this.clickedName
    this.clickedName  = _clicked

    if (this.previousName != null) {      
      this.previousPane().hide();
    }

    effect_stack = [
      new Effect.Morph(this.paneContainer(), { style: 'height: ' + this.targetContainerHeight() + 'px;', sync: true }),
      new Effect.Appear(this.clickedPane(), { sync: true }),
    ];

    new Effect.Parallel(effect_stack, { duration: 0.5, afterFinish: this.clearFixedHeightOnContainer });

    // once we're done...
    this.refreshTabDisplay();
  },

  // updates our tab class names
  refreshTabDisplay: function() {
    if(this.previousTab() != null) {
      this.previousTab().toggleClassName('active');
    }

    this.clickedTab().toggleClassName('active');
  },

  clearFixedHeightOnContainer: function() {
    $('usage_report_container').writeAttribute('style', '');
  },
  

  // the DOM is wacky
  targetContainerHeight: function() {
    // return this.clickedTab().getHeight();
  
    _ct = this.clickedPane();
      
    _ct.style.visibility = "hidden";
    _ct.style.display = "block";
    _height = parseInt(_ct.offsetHeight);
    _ct.style.display = "none";
    _ct.style.visibility = "visible";
      
    return _height;
  }
}


var show_customer_tab_controller = {
  previousName: null,
  clickedName: null,

  // returns the element representing the tab for the given name
  getTab: function(name) {
    return $(name + "_tab");
  },

  // returns the element representing the pane for the given name
  getPane: function(name) {
    return $(name + "_pane");
  },

  paneContainer: function() {
    return $('show_customer_container');
  },

  // shortcut methods for the most common uses of the above
  previousTab: function() { return this.getTab(this.previousName) },
  previousPane: function() { return this.getPane(this.previousName) },
  clickedTab: function() { return this.getTab(this.clickedName) },
  clickedPane: function() { return this.getPane(this.clickedName) },


  // adds handlers to our tab elements and shows the initial pane that should be loaded
  bootstrap: function(names, initial_tab) {
    names.each(function(name) {
      $(name + "_tab").observe('click', show_customer_tab_controller.clickHandler);
    });

    this.switchTab(initial_tab);
  },

  // the event handler. occours outside the context of the object (ie, "class" method)
  clickHandler: function(_event) {
    return show_customer_tab_controller.switchTab(_event.element().id.gsub(/_[a-z]+$/, ''));
  },

  // handles the actual visual update of the tab display
  switchTab: function(_clicked) {
    this.previousName = this.clickedName
    this.clickedName  = _clicked

    if (this.previousName != null) {      
      this.previousPane().hide();
    }

    effect_stack = [
      new Effect.Morph(this.paneContainer(), { style: 'height: ' + this.targetContainerHeight() + 'px;', sync: true }),
      new Effect.Appear(this.clickedPane(), { sync: true }),
    ];

    new Effect.Parallel(effect_stack, { duration: 0.5, afterFinish: this.clearFixedHeightOnContainer });

    // once we're done...
    this.refreshTabDisplay();
  },

  // updates our tab class names
  refreshTabDisplay: function() {
    if(this.previousTab() != null) {
      this.previousTab().toggleClassName('active');
    }

    this.clickedTab().toggleClassName('active');
  },

  clearFixedHeightOnContainer: function() {
    $('show_customer_container').writeAttribute('style', '');
  },
  

  // the DOM is wacky
  targetContainerHeight: function() {
    // return this.clickedTab().getHeight();
  
    _ct = this.clickedPane();
      
    _ct.style.visibility = "hidden";
    _ct.style.display = "block";
    _height = parseInt(_ct.offsetHeight);
    _ct.style.display = "none";
    _ct.style.visibility = "visible";
      
    return _height;
  }
}