// Reference: http://www.tetlaw.id.au/view/blog/fabtabulous-simple-tabs-using-prototype/
// 
// How to create tabs:
// 
// TAB HTML
// Create a normal unordered list with links in each list item.
// Only difference is the addition of the rel tag to specify the id of the element to show and hide when clicked
// <ul class="global_tabs">
// 	<li class="selected"><a href="" rel="first_tab_contents">First Tab</a></li>			
// 	<li class="selected"><a href="" rel="second_tab_contents">Second Tab</a></li>			
// 	<li class="selected"><a href="" rel="third_tab_contents">Third Tab</a></li>			
// </ul>

// CONTENT HTML
// <div id="first_tab_contents">
// 	<p>Contents of the first tab</p>
// </div>
// <div id="second_tab_contents">
// 	<p>Contents of the second tab</p>
// </div>
// <div id="third_tab_contents">
// 	<p>Contents of the third tab</p>
// </div>

document.observe('dom:loaded', function() { 
  // $$('#shop_tabs').each(function(tab) { new TabNavigation(tab); });
	$$('.tabs').each(function(tab) { new TabNavigation(tab); });
	$$('.side_tabs').each(function(tab) { new TabNavigation(tab); });
	$$('.mini_tabs').each(function(tab) { new TabNavigation(tab); });
	if ($('product_viewer_tabs')) new TabNavigation('product_viewer_tabs');
	
	if ($('shop_tabs')) {
	  $$('a[rel="shop_tab_contents"]').first().observe('click', shopClick);
	  $$('a[rel="gallery_tab_contents"]').first().observe('click', galleryClick);
	  $$('a[rel="info_tab_contents"]').first().observe('click', infoClick);
	}
});

var TabNavigation = Class.create();

TabNavigation.prototype = {
	
	initialize : function(element) {	  
		this.element = $(element);
		// get all the anchors in the <ul> that have a rel attribute, the rel attribute signifies that
		// the link is related to a .tab_contents area
		this.menu = $A(this.element.select("a[rel]"));

		// add the onclick event to all the tabs
		this.menu.each(this.setupTab.bind(this));
	},

	setupTab : function(elm) {
		Event.observe(elm,'click',this.activate.bindAsEventListener(this),false)
	},

	activate :  function(ev) {
		var elm = Event.findElement(ev, "a");
		Event.stop(ev);
		if (elm.readAttribute('rel') == "none") {
			// redirect to the page
			window.location = elm.readAttribute('href').gsub(/_(path|url)$/, '');
		} else {
			this.show(elm);			
			this.menu.without(elm).each(this.hide.bind(this));
		}
	},
	
	hide : function(elm) {
		li_class_name = $(elm).up().readAttribute('class');
		if (li_class_name && li_class_name.startsWith('left')) {
			// left side tab navigation
			$(elm).up().removeClassName('left_selected');
			$(elm).up().addClassName('left_unselected');
		}
		
		if (li_class_name && li_class_name.startsWith('right')) {
			// right side tab navigation
			$(elm).up().removeClassName('right_selected');			
			$(elm).up().addClassName('right_unselected');
		}
		
		$(elm).up().removeClassName('selected');			
		if ($(elm).readAttribute('rel') != "none") 
			$($(elm).readAttribute('rel')).hide();
	},
	
	show : function(elm) {
		li_class_name = $(elm).up().readAttribute('class');
		if (li_class_name && li_class_name.startsWith('left')) {
			// left side tab navigation
			$(elm).up().addClassName('left_selected');
			$(elm).up().removeClassName('left_unselected');
		}
		
		if (li_class_name && li_class_name.startsWith('right')) {
			// right side tab navigation
			$(elm).up().addClassName('right_selected');
			$(elm).up().removeClassName('right_unselected');		
		}
		
    var shop_nav_class_name = $w($(elm).up('ul').className).select(function(n){return n.match(/navigation_selected/)});
		if (shop_nav_class_name.size() > 0) {
			// change the class name for the <ul> in the website navigation
			$(elm).up('ul').removeClassName(shop_nav_class_name);
			$(elm).up('ul').addClassName($(elm).up('li').readAttribute('id')+'_selected');
		}

		$(elm).up('li').addClassName('selected');	
		$($(elm).readAttribute('rel')).show();
	}	
}


function shopClick (e) {
  if (e) e.stop();
  if (typeof ClickTaleExec != 'undefined') { ClickTaleExec("shopClick()"); }
  $('shop_tabs').className = 'shop_navigation_selected';
  $('shop_tab_contents').show();
  $('gallery_tab_contents').hide();
  $('info_tab_contents').hide();
  return false;
}

function galleryClick (e) {
  if (e) e.stop();
  if (typeof ClickTaleExec != 'undefined') { ClickTaleExec("galleryClick()"); }
  $('shop_tabs').className = 'gallery_navigation_selected';
  $('shop_tab_contents').hide();
  $('gallery_tab_contents').show();
  $('info_tab_contents').hide();
  return false;
}

function infoClick (e) {
  if (e) e.stop();
  if (typeof ClickTaleExec != 'undefined') { ClickTaleExec("infoClick()"); }
  $('shop_tabs').className = 'info_navigation_selected';
  $('shop_tab_contents').hide();
  $('gallery_tab_contents').hide();
  $('info_tab_contents').show();
  return false;
}