var TheLooks = new Class({
		initialize: function()
		{
			this.lookTypes = new Array();
			this.lookTypes[0] = "bold";
			this.lookTypes[1] = "edgy";
			this.lookTypes[2] = "vibrant";
			this.lookTypes[3] = "multiDimensional";
			
			// created for multi category looks
			this.lookTypes[4] = "vibrantedgy";
			this.lookTypes[5] = "boldmultiDimensional";
			this.lookTypes[6] = "boldedgy";
			this.lookTypes[7] = "all";
			
			// Change link image to its on state
			this.currentSelected = $('link_all');
			new ImageSwap($('link_all').getElement('img'), 'images/all_on.gif');
			
			//Set up the looks nav
			this.setLooksEvents();
			
			//Set up the thumbnail events
			this.createThumbnailListeners();
			
			// Close Button
			$('closeButton').addEvent('click', function() { $('lookOverlay').setStyle('display', 'none'); });
		},
		
		clearOverState: function(element)
		{
			elment = new Element(element);
			
			if (element.getParent() != this.currentSelected)
			{
				var re = new RegExp('.*src=\'(.*)_on.(png|jpg|gif)\'.*');
				var offImage = (window.ie6 && element.getStyle('filter') != '') ? element.getStyle('filter').replace(re, '$1.$2') : element.getAttribute('src').replace("_on", "");
				
				new ImageSwap(element, offImage);
			}
		},
		
		setOverState: function(element)
		{
			elment = new Element(element);
			
			if (element.getParent() != this.currentSelected)
			{
				var re = new RegExp('.*src=\'(.*).(png|jpg|gif)\'.*');
				var reAlt = new RegExp('(.*).(png|jpg|gif)');
				var onImage;
				if (window.ie6 && element.getStyle('filter') != '')
				{
					onImage = element.getStyle('filter').replace(re, '$1_on.$2');
				}
				else
				{
					onImage = element.getAttribute('src').replace(reAlt, "$1_on.$2");
				}
				
				onImage = onImage.replace("_on_on", "_on");
				
				new ImageSwap(element, onImage);
			}
		},
			
		setLooksEvents : function()
		{	
			$ES('li','looksLinks').addEvent('mouseenter', function(event) {
				event = new Event(event);
				
				var target = new Element(event.target);
				
				this.setOverState(target);
			}.bind(this));
			
			$ES('li','looksLinks').addEvent('mouseleave', function(event) {
				event = new Event(event);
				
				var target = new Element(event.target);
				
				this.clearOverState(target);
			}.bind(this));
				
			$ES('li','looksLinks').addEvent('click', function(event)
			{
				event = new Event(event);
				
				new Element(event.target);
				
				var previousItem = this.currentSelected;
				this.currentSelected = event.target.getParent();
				
				// once something is clicked, display 'all option'
				$('link_all').setStyle('display', 'inline');
				
				if (previousItem)
				{
					previousItem.removeClass('selected');
					this.clearOverState(previousItem.getElement('img'));
				}
				event.target.getParent().addClass('selected');
	
				// used at bottom of function to change link image to its on state
				var linkId = event.target.id;
				var linkParent = linkId.substr(0,linkId.length-5);
				
				if(linkParent != 'all') {
					$('bottomLookText').setHTML($(linkParent + 'StyleText').innerHTML);
					$('bottomLookText').setStyle('display', 'inline');
				} else {
					$('bottomLookText').setStyle('display', 'none');
				}
	
				//Close the overlay if we click a look category
				if($('lookOverlay').getProperty('class') == 'expandedLook') {
					this.closeOverlay();
				}
				
				// Filter Thumbnails
				for (i=0; i < this.lookTypes.length; i++)
				{
					 // Handle multiple category classes
					 // TODO: Simplify with better $$ references 
					 if (linkParent == "all" ||
					 	this.lookTypes[i] == (linkParent + 'edgy') ||
						this.lookTypes[i] == (linkParent + 'multiDimensional') ||
						this.lookTypes[i] == ('bold' + linkParent) ||
						this.lookTypes[i] == ('vibrant' + linkParent)) {
						//turn on
						$$('a.' + this.lookTypes[i] + 'Off').addClass(this.lookTypes[i]);
						$$('a.' + this.lookTypes[i]).removeClass(this.lookTypes[i] + 'Off');
						
					} else if(this.lookTypes[i] != linkParent) {
						// turn on
						$$('a.' + this.lookTypes[i]).addClass(this.lookTypes[i] + 'Off');
						$$('a.' + this.lookTypes[i] + 'Off').removeClass(this.lookTypes[i]);
					} else {
						$$('a.' + this.lookTypes[i] + 'Off').addClass(this.lookTypes[i]);
						$$('a.' + this.lookTypes[i]).removeClass(this.lookTypes[i] + 'Off');
					}
				}
				
				urchinTracker("the_looks/" + linkParent);
			}.bind(this));
			
		},
		
		createThumbnailListeners: function()
		{
			$ES('a[href=javascript:void(0);]', 'looksThumbnails').each(function(item, index) {
				item.addEvents({
					'click': function(event)
					{
						var idNum = index + 1;
						
						var lookDescHTML = $('lookDesc' + idNum).innerHTML;
						var lookImageHTML = $('lookImage' + idNum).innerHTML;
						var lookVideoHTML = $('lookVideo' + idNum).innerHTML;
						var lookProductDownload = $('lookDownload' + idNum).innerHTML;
						
						var lookProductName1HTML = $('lookProductName1_' + idNum).innerHTML;
						var lookProductLink1HTML = $('lookProductLink1_' + idNum).innerHTML;
						var lookProductImage1HTML = $('lookProductImage1_' + idNum).innerHTML;
						var lookProductName2HTML = $('lookProductName2_' + idNum).innerHTML;
						var lookProductLink2HTML = $('lookProductLink2_' + idNum).innerHTML;
						var lookProductImage2HTML = $('lookProductImage2_' + idNum).innerHTML;

						// $('lookVideo').setHTML('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" title="Download Flash Player"><img src="/ru_RU/the_looks/images/flash_player.jpg" alt="Download Flash Player" /></a>');
						var target = $('lookVideo');
						
						if (!window.ie)
						{
							target.replaceWith(new Element('div', {'id': 'lookVideo'}));	
						}
						else
						{
							target.empty();
						}
						
						var flashWarning = $E('DIV.noFlashWarning').clone();
						flashWarning.injectInside(target);

						$('getTheLookDetails').setHTML(lookDescHTML);
				
						$E('img', 'lookImage').src = $E('img', 'lookImage' + idNum).src;
						// $E('DIV#lookImage img', 'lookOverlay').alt = $E('img', 'lookImage' + idNum).alt; 
						
						$('downloadPhoto').setAttribute('href', lookProductDownload);

						// Product One
						if (lookProductName1HTML != "null")
						{
							$('productOne').setStyle('display', 'block');
							
							$E('a.overlayProductLink', 'productOne').setAttribute('href', lookProductLink1HTML);
							
							$E('img.productImage', 'productOne').src = $E('img', 'lookProductImage1_' + idNum).src;
							// $E('img.productImage', 'productOne').alt = $E('img', 'lookProductImage1_' + idNum).alt;
							$E('span.productName', 'productOne').setHTML(lookProductName1HTML);
						}
						else
						{
							$('productOne').setStyle('display', 'none');
						}
						
						// Product Two
						if (lookProductName2HTML != "null")
						{
							$('productTwo').setStyle('display', 'block');
							
							$E('a.overlayProductLink', 'productTwo').setAttribute('href', lookProductLink2HTML);
							
							$E('img.productImage', 'productTwo').src = $E('img', 'lookProductImage2_' + idNum).src;
							// $E('img.productImage', 'productTwo').alt = $E('img', 'lookProductImage2_' + idNum).alt;
							$E('span.productName', 'productTwo').setHTML(lookProductName2HTML);
						}
						else
						{
							$('productTwo').setStyle('display', 'none');
						}

						// Use VideoPlayer of Fallback Image?
						var flvMoviePath = lookVideoHTML;
						var extensionName = flvMoviePath.substr(flvMoviePath.length - 3);
						
						if (extensionName == "flv")
						{
							var newLookVideo = new Element('div', {id: 'lookVideo'});
							var newLookVideoContent = new Element('div', {id: 'lookVideoContent'});
							newLookVideoContent.injectInside(newLookVideo);
							
							$('lookVideo').replaceWith(newLookVideo);
							
							swfobject.embedSWF("/ru_RU/flash/VideoPlayer_small.swf", "lookVideoContent", "261", "225", "9.0.115", "/global/flash/expressInstall.swf", {flvPath: flvMoviePath}, {allowFullScreen: 'true'});
						}
						else
						{
							var newLookVideo = new Element('div', {id: 'lookVideo'});								
							$E('img', 'lookVideo' + idNum).clone().injectInside(newLookVideo);
							
							$('lookVideo').replaceWith(newLookVideo);
						}
						
						// Show Overlay
						$('lookOverlay').setStyle('display', 'block');
					}
				});
			});
		},
		
		closeOverlay: function()
		{
			$('lookOverlay').setStyle('display', 'none');
		},
		
		addTracking: function()
		{
			var downloadLink = $$('DIV.overlayDesc A.overlaySecHeading');
			downloadLink.addEvent('click', function(event) {
				event = new Event(event);
				
				var targetURL = event.target.getParent().getAttribute('href');
				var downloadTarget = targetURL.substr(targetURL.lastIndexOf("/") + 1);
				
				urchinTracker("the_looks/download/" + downloadTarget);
			});
		}
	});
	TheLooks.implement(new Events);
	
	window.addEvent('domready', function()
	{
		var theLooks = new TheLooks();
	});