/**
* Showcase Javascript object
* [UPDATE] Modified to use jQuery instead of prototype
*
* 
* @package Stickerei-Stoiber showcase
* @subpackage Object
* @category Javascript
* @author Misa Brezanac <brezanac@gmail.com>
* @copyright Stickerei-Stoiber <www.stickerei-stoiber.de>
*/
Showcase = {
	/*
	* Showcase tabs subobject.
	*/
	Tab : {
		/*
		* Resets the tabs classes to their initiate state and selects the one that
		* has been choosen while additionally showing the requested tab content container.
		*
		* @param event The event itself that triggered this method call [click on a tab link]
		*/
		setActiveTab : function(event){			
			/*
			* Now extract the element (link) that triggered the action
			*/
			var element = $(event.target);
			
			/*
			* Before we do any content change we need to make sure that we unmark all the tabs and additionally
			* mark the selected tab.
			*/
			$('div.scTab').each(function(){
				$(this).removeClass('scSelected scSpecialSelected');
			});
			/* Don't forget the Product version */
			$('div.scTabProduct').each(function(){
				$(this).removeClass('scSelected scSpecialSelected');
			});
			
			/*
			* And remove any existing residual hover effect
			*/
			Showcase.Tab.clearHoveredTabs();
			
			/*
			* If the page contains dynamic tab pre-content containers identified by 'scTabPreContent_#'
			* the pre-content container of the selected tab is shown. Of course first all the others are hidden.
			* These dynamic containers are identified with a 'scPreContentDynamic' CSS class.
			*/
			$('div.scPreContentDynamic').each(function(){
				$(this).hide();
			});
			
			if($(element.attr('id').replace('scTabLink_','#scTabPreContent_')).length){
				$(element.attr('id').replace('scTabLink_','#scTabPreContent_')).show();
			}
			
			/*
			* Then we mark the selected one but check to see if it is a normal or a special tab.
			* Since there are two types of tabs we need to make propper class asignment in case
			* of each of them.
			*/			
			if(element.closest('.scTab.scSpecial').length || element.closest('.scTabProduct.scSpecial').length){
				/*
				* A special tab is to be selected.
				*/
				$(element.closest('.scTab')).addClass('scSpecialSelected');
				$(element.closest('.scTabProduct')).addClass('scSpecialSelected');
			} else {
				/*
				* A normal tab is to be selected.
				*/
				$(element.closest('.scTab')).addClass('scSelected');
				$(element.closest('.scTabProduct')).addClass('scSelected');
			}
			/*
			* Hiding the 'scExtractedTabText' container which containes ShowCase non specific content.
			*/
			$('scExtractedTabText').fadeOut(600);
			
			/*
			* Here we hide all of the tab content containers.
			*/
			$('div.scTabContainer').each(function(){
				$(this).fadeOut(600);
			});
			
			/*
			* While the containers are hidden during the tab switch we need to reset all of the tab containers contents 
			* to show the first container within it. But first we need to hide all of them.
			*/
			Showcase.ColorSelector.hideAllModels();
			
			/*
			* Here we unhide the first model in every tab container...
			*/
			$('div.scModelWrapper > div').each(function(){
				$(this).fadeIn(600);
			});
			
			/*
			* ...and additionally update the color name in the scColorTitle container with the name
			* of the first color in the tab container
			*/
			/*
			* First we retrieve the class name of the selected tabContainer (i.e. 'scTabContent_1')
			*/		
			var tabName = element.attr('id').replace('scTabLink_','#scTabContent_');
			
			/*
			* The name of the color for the first model container id allways displayed as currebtly
			* selected color.
			*/
			if($(tabName + ' .scColorSelectorColors > a').length){
				var firstColor = $(tabName + ' .scColorSelectorColors > a').attr('rel');
				Showcase.ColorSelector.changeColorTitle(firstColor);
			}
				
			/*
			* This is the place where the actual content is displayed for the selected tab.
			* Since during the transition both containers will be visible it is important to
			* begin the fadeIn transition after the fadeOut has finished otherwise we are going to
			* have some very nasty flicker effects.
			*/
			setTimeout(function(){$(element.attr('id').replace('scTabLink_','#scTabContent_')).fadeIn(600);}, 500);
			
			/*
			* This is the tricky part. We wait 100 milliseconds for the above container to appear properlly
			* so that no ugly flicker effect with the new content is displayed.
			*/
			setTimeout(function() {$('scExtractedTabText').show();}, 100 );
		},
		/**
		* Simulates a hover effect when a mouse has left the tab (onmouseout)
		*
		* @param event The event that triggered the call to this function
		*/
		clearHoveredTabs : function(){
			/* 
			* We clear all the possible fields that set their state to hovered during mouse overs.
			* Usually its just one tab.
			*/
			$('div.scTab').each(function(){
				$(this).removeClass('scHovered scSpecialHovered');
			});
			
			/* The produkt version */
			$('div.scTabProduct').each(function(){
				$(this).removeClass('scHovered scSpecialHovered');
			});
		},
		
		/**
		* Simulates a hover effect when a mouse is over the tab (onmouseover)
		*
		* @param event The event that triggered the call to this function
		*/
		setHoveredTab : function(event){
			/*
			* First we extract the element that triggered the call
			*/
			var element = $(event.target);
			
			/*
			* Before we set a currently hovered tab we need to "unhover" all of them.
			*/
			Showcase.Tab.clearHoveredTabs();
			
			/*
			* The final step would be to see if the targeted tab is of special or normal type and assign an appropriate
			* hovered class to it. The selected containers are not hovered!
			*/
			if(!element.closest('.scTab.scSelected').length  && !element.closest('.scTab.scSpecialSelected').legth && !element.closest('.scTabProduct.scSelected').length  && !element.closest('.scTabProduct.scSpecialSelected').legth){
				/*
				* If the hovered element is not already selected (special or normal) 
				* the hover effect is produced.
				*/
				if(element.closest('.scTab.scSpecial').length || element.closest('.scTabProduct.scSpecial').length){
					/*
					* A special normal width tab or a special wide (Product) normal tab is to be made hovered.
					*/
					element.closest('div.scTab').addClass('scSpecialHovered');
					element.closest('div.scTabProduct').addClass('scSpecialHovered');
				} else {
					/*
					* A normal tab (either normah width or Product) is to be made hovered.
					*/
					element.closest('div.scTab').addClass('scHovered');
					element.closest('div.scTabProduct').addClass('scHovered');
				}
			}
		},
		/**
		* To avoid content duplication this method copies the additional content from one
		* tab to all the others
		*/
		basecapsCopyAdditionalContent : function(){
			$('div.scAdditionalContent').each(function(){
				var source = $('scCopySource').html();
				$(this).html(source);
			});
		}
	},

	/*
	* The Color Selector subobject
	*/
	ColorSelector : {
		/*
		* Switches the active model color
		*/
		changeColor : function(event){
			/*
			* First we hide all of the models
			*/
			Showcase.ColorSelector.hideAllModels();
			
			/*
			* Now the container of the selected color is shown
			*/
			var element = $(event.target);
			
			/*
			* The selected color. Since click events are fired upon images and rel are forbidden on anything else except links
			* we traverse the DOM one level up and find the rel parameter of the link.
			*/
			var color = element.closest('a').attr('rel');
			/*
			* Now we make every model container with selected color appear no matter how much there are.
			*/
			$('div.scModelContainer-' + color).each(function(){
				$(this).fadeIn(600);
			});
			
			/*
			* And finally the color name container is updated with the currentlly selected color. 
			*/
			Showcase.ColorSelector.changeColorTitle(color);
		},
		/*
		* Used to hide all of the model containers in the ShowCase. Extracted since its used in
		* several places.
		*/
		hideAllModels : function(){
			/*
			* Closing a currently active color by closing all color containers.
			* NOTE: The buggy Opera XPath requires the > operator in order for this to work!
			*/
			$('div.scModelWrapper > div').each(function(){
				$(this).fadeOut(600);
			});
		},
		/*
		* The following block handles the German umlauts contra-transliteration.
		*/
		changeColorTitle : function(color){
			switch(color){
				case 'apfelgruen' :
					$('div.scColorTitle').each(function(){
						$(this).html('Apfelgr\u00FCn');
					});
					break;
				case 'dunkelgruen' :
					$('div.scColorTitle').each(function(){
						$(this).html('Dunkelgr\u00FCn');
					});
					break;
				case 'tuerkis' :
					$('div.scColorTitle').each(function(){
						$(this).html('T\u00FCrkis');
					});
					break;
				case 'kellygruen' :
					$('div.scColorTitle').each(function(){
						$(this).html('Kelly Gr\u00FCn');
					});
					break;
				default :
					$('div.scColorTitle').each(function(){
						$(this).html(color);
					});
			}	
		}
	},
	
	/*
	* The Lightbox control subobject
	*/
	Lightbox : {
		/*
		* Contains the list of Lightbox groups which will be created on the page.
		* The actual links which will trigger the Lightbox groupping need to have 
		* a class attached to it in the format '.scLightbox-'+ lightboxGroups element
		*/
		lightboxGroups : ['Damen', 'Herren', 'Bistroschuerzen', 'Fertigmotive', 'Namenslisten'],
		/*
		* Used to attach REL attributes to Lightbox links and avoid SEO complaints about HTML
		* containig non-standard REL atribute values. I never really understood those SEO guys...
		*/
		attachRel : function(){
			/*
			* The actual REL attachment is done here
			*/
			jQuery.each(this.lightboxGroups, function(){
				$('.scLightbox-' + this).attr('rel', 'lightbox['+ this +']');
			});
		}
	},
	/*
	* The Showcase initialization stuff which executes at the very begining of the page loading.
	* This method is executed at DOM not page load (fired at DOMContentLoaded event)
	*/
	initShowCase : function(){			
		/*
		* Event handlers for hover (onmouseover) action are attached to Tab links
		*/
		$('div.scTabLink').each(
			function(){
				$(this).bind('mouseover', Showcase.Tab.setHoveredTab);
			}
		);
		/*
		* Event handlers for hover (onmouseout) action are attached to Tab Links
		*/
		$('div.scTabLink').each(
			function(){
				$(this).bind('mouseout', Showcase.Tab.clearHoveredTabs);
			}
		);
		/*
		* Event handlers for click action are attached to Tab links
		*/
		$('div.scTabLink').each(
			function(){
				$(this).bind('click', Showcase.Tab.setActiveTab);
			}
		)
		/*
		* Event handlers are attached to Color Selectors
		*/
		$('.scColor').each(
			function(){
				$(this).bind('click', Showcase.ColorSelector.changeColor);
			}
		)
	}
}