// !A Clever Scriptaculus extention
Object.extend(Element.Methods,{
  morf: function(element, options) {
		new Effect.Morph(element.identify(), options);
  }
});
Element.addMethods();

document.observe("dom:loaded", function() {
	// !Shop Sections Thingy
	var shopTab = $('mainNav').down('.orangeStoreSelected');
	if (!shopTab) shopTab = $('mainNav').down('.orangeStore');
	
	document.observe('click', function(event) {
		event.element().fire('dom:click');
		
		if($('items_container')) {
			if(event.element() == shopTab) event.stop();
			
			$('items_container').morf({
				style: {
					height: '0px',
					opacity: '0'
				},
				duration: 0.3,
				beforeUpdate: function(info) {
					if(info.position <= 0.7 && $('items_container'))
						$('items_container').setStyle({overflow: 'hidden'});
				},
				afterFinish: function() {
					if ($('items_container')) $('items_container').remove();
				}
			});
		}
	});
	
	shopTab.observe('click', function(event) {
		// If the items_container popup gizmo is already open we actually want to hide it.
		if($('items_container')) {
			return;
		}
		
		var itemsData = this.readAttribute('items').evalJSON();
		var itemsContainer = new Element('div');
		itemsContainer.id = 'items_container'
		
		$(document.body).insert(itemsContainer);
		itemsContainer.insert(new Element('div').addClassName('bottom'));
		itemsContainer.setStyle({
			top: this.cumulativeOffset().top + this.getHeight() - 3 + 'px',
//			right: document.viewport.getWidth() - this.cumulativeOffset().left - this.getWidth() - 3 + 'px',
			left: (this.cumulativeOffset().left - this.getWidth() - 4) + 'px',
			height: '0px',
			opacity: 0
		});
		
		itemsData.each(function(itemData, index) {
			var item = new Element('a', {href: itemData.url}).addClassName('item');
			if(index % 5 == 0) item.setStyle({ 'margin-left': '20px' });
			itemsContainer.insert(item);
			item.setStyle({ 'backgroundImage': 'url('+itemData.image+')' });
		});
		
		itemsContainer.morf({
			style: {
				height: 125 * Math.ceil(itemsData.size()/4) + 'px', // This number represents the mac number of columns
				opacity: '1'
			},
			duration: 0.3,
			beforeUpdate: function(info) {
				if(info.position >= 0.7)
					itemsContainer.setStyle({overflow: 'visible'});
			}
		});
		
		event.stop();
	});
	
	// !Tabs on the Shop Page
	$$('[tabbifyWithId]').each(function(tabSet) {
		var contentContainer = $(tabSet.readAttribute('tabbifyWithId'));
		
		tabSet.childElements().each(function(tab, index) {
			tab.observe('dom:click', function(event) {
				this.addClassName('tabSelected');
				this.siblings().invoke('removeClassName', 'tabSelected');
				contentContainer.childElements()[index].show().siblings().invoke('hide');
				
				event.stop();
			});
		});
		tabSet.childElements().first().fire('dom:click');
	});
});