/*
Name: Navigation tab
URL: http://oursky.com/
Description: A Tab system design for one content area. Content is retrieved from an URL.
Version: 1.10
Author: Rick Mak
Author URL: http://blog.rickmak.net/
Last Update: 18 Mar 2008
*/
// Associated with nav_tab.css
// Usage: Include prototype and this nav_tab.js. Than include the following suggested HTML.
// Suggested HTML
/* Configured by Tag
<!-- start navigation tab -->
<div id="tab_control" module="tabnav" name="default" module_ele="control">
    <div id="tab_control_interview" class="nav_tab_control" default_tab="true" taburl="<?php bloginfo('url'); ?>?feed=rss">Recent</div>
    <div id="tab_control_people" class="nav_tab_control" taburl="<?php bloginfo('url'); ?>?feed=rss2">Comments</div>
    <div id="tab_control_companies" class="nav_tab_control" taburl="<?php bloginfo('url'); ?>?feed=rss">Popular</div>
</div>
<div id="tab_shrink" module="tabnav" name="default" module_ele="shrink" class="nav_tab_shrink"></div>
<div style="clear: both;"></div>
<div id="nav_tab_content" module="tabnav" name="default" module_ele="content" class="nav_tab_content"><h1>Not finished!</h1><strong>Content is under development</strong>
</div>
<!-- end navigation tab -->
 */
 /* There can be various nav_tab.
 The script will find out control<div> with module="tabnav" and module_ele="control", match with corresponding content <div> with same name with the control<div>
 Upon a control<div> is clicked, ClassName "clicked" will add to the original class tag.
 */


NAVTAB = function(tabcontrolID, tabcontentID, tabshrinkID) {
    var me = this;

    this.updateContentByURL = function(url) {
	    new Ajax.Request(url, {
    		method: 'get', 
    		onSuccess: function(transport) {
    		    me.updateContent(transport.responseText);
    		}
    	});
	}
	this.updateContent = function(content) {
	    $(me.contentID).update(content);
	}
	this.removeControlClickedStyle = function() {
	    $$('div[module="tabnav"][module_ele="control"][name=' + $(me.controlID).readAttribute('name') + ']').each(function(allDiv) {
	       allDiv.childElements().each(function(child) {
    	        child.removeClassName('clicked');
    	    });
	    });
	}
	this.setClickControlStyle = function(ID) {
	    me.removeControlClickedStyle();
	    $(ID).addClassName('clicked');
	}
	this.register_control_event = function() {
	    controls_list = $(me.controlID).childElements();
	    controls_list.each(function(control) {
	        Event.observe(control, "click", me.controlOnClick);
	        if (control.readAttribute('default_tab') == 'true') {
	            me.setClickControlStyle(control.readAttribute('id'));
        	    me.updateContentByURL(control.readAttribute('taburl'));
	        }
	    });
	    Event.observe($(me.shrinkID), "click", me.shrinkOnClick);
	}
	
	this.shrinkOnClick = function(evt) {
	    var element = Event.element(evt);
	    Effect.toggle($(me.contentID).readAttribute('id'), 'blind');
	    me.setShrinkStyle(element);
	}
	this.setShrinkStyle = function(element) {
	    if (me._is_shrink) {
	        me.removeControlClickedStyle();
	        element.removeClassName('shrinked');
	        me._is_shrink = false;
	    } else {
	        element.addClassName('shrinked');
	        me._is_shrink = true;
	    }
	}
	
	this.controlOnClick = function(evt) {
	    var element = Event.element(evt);
	    me.setClickControlStyle(element.readAttribute('id'));
	    me.updateContentByURL(element.readAttribute('taburl'));
	    if (me._is_shrink) {
	        Effect.BlindDown($(me.contentID).readAttribute('id'));
	        me.setShrinkStyle($(me.shrinkID));
        }
	}
	
	this.controlID = tabcontrolID;
	this.contentID = tabcontentID;
	this.shrinkID = tabshrinkID;
	this._is_shrink = false;
	this.register_control_event();
}

Event.observe(window, 'load', TabNavInit, false);

function TabNavInit() {
    $$('div[module="tabnav"][module_ele="control"]').each(function(div) {
        contentID = $$('div[module="tabnav"][module_ele="content"][name=' + div.readAttribute('name') + ']');
        shrinkID = $$('div[module="tabnav"][module_ele="shrink"][name=' + div.readAttribute('name') + ']');
        NAVTAB[name] = new NAVTAB(div.readAttribute('id'), contentID[0].readAttribute('id'), shrinkID[0].readAttribute('id'));
    });
    
    i = 0;
    $$('div.nav_tab_control').each(
      function(item) {
          i++;
          if (i == 1) {
              new Ajax.Request(item.readAttribute('taburl'), {
                method: 'get', 
                onSuccess: function(transport) {
                  $('nav_tab_content').update(transport.responseText);
                }
              });
          }
      }
    )
}