var Stylists = new Class({

	// Initializer
	initStylists : function()
	{
		this.initMouseOvers();
		
		// Preload Over Images
		var preloaded = this.preloadOverImages.attempt([$$('ul#stylistLinks li img')]);
		
		if (preloaded == false)
		{
			console.log("[FAIL] UNABLE TO PRELOAD OVER IMAGES");
		}
		
		$$("UL#stylistLinks LI A").addEvent('click', function(event) {
			new Event(event).stop();
			
			// Find the Parent for the element clicked
			var parent = event.target.getParent().getParent();
			
			if (parent == $('stylistLinks'))
			{
				parent = event.target.getParent()
			}
			
			// If the parent is not the currentSelected element (and currentSelected is set)
			if ((this.currentSelected && this.currentSelected != event.target) || !this.currentSelected)
			{
				// Find the name value for the item clicked by getting everything after 'link_'
				var targetId = parent.id.substr(5);
				
				if(targetId != 'team') {
					// Show Stylist Bio
					$('teamRow1').setStyle('display','none');
					$('teamRow2').setStyle('display','none');
					$('bioColumn1').setStyle('display','inline');
					$('bioColumn2').setStyle('display','inline');
					$('bioColumn1').setHTML($(targetId + 'BioColumn1').innerHTML);
					$('bioColumn2').setHTML($(targetId + 'BioColumn2').innerHTML);
				} else {
					// Show 'The Team'
					$('bioColumn1').setStyle('display','none');
					$('bioColumn2').setStyle('display','none');
					$('teamRow1').setStyle('display','block');
					$('teamRow2').setStyle('display','block');
				}
				
				urchinTracker("design_team/" + targetId);
				
				this.setSelected(parent);
			}
		}.bind(this));
		
		if ($ES('li.selected', 'stylistLinks').length == 0)
		{
			this.setSelected($('link_team'));
		}
		else
		{
			this.currentSelected = $E('li.selected', 'stylistLinks');
		}
	},
	
	// Preload Images for Design Team Links
	preloadOverImages: function(elements)
	{
		elements.each(function(element)
		{
			if (window.ie6)
			{
				var filtersrc = element.getStyle('filter'); 
				var re = new RegExp('.*src=\'(.*).(png|jpg|gif)\'.*');
				var assetSrc = filtersrc.replace(re, '$1_on.$2');
				
				var overImageSrc = new Asset.image(assetSrc);
			}
			else
			{
				var imgsrc = element.getAttribute('src'); 
				var re = new RegExp('(.*).(png|jpg|gif)');
				var assetSrc = imgsrc.replace(re, '$1_on.$2');
				
				var overImageSrc = new Asset.image(assetSrc);
			}
		})
	},
	
	// Handles the arrow above each of the Design Team links
	initMouseOvers: function()
	{
		$$('ul#stylistLinks li img').addEvent('mouseover', function(event)
		{
			event = new Event(event)
			
			var parent = event.target.getParent().getParent();
			if (!parent.hasClass('selected'))
			{
				this.setOverState(event.target);
			}
		}.bind(this));
		
		$$('ul#stylistLinks li img').addEvent('mouseout', function(event) {
			event = new Event(event)
			
			var parent = event.target.getParent().getParent();
			
			if (!parent.hasClass('selected'))
			{
				this.clearOverState(event.target);
			}
		}.bind(this));
	},
	
	// Stores the current selected element value
	// Accepts the parent LI with children: A > IMG
	setSelected: function(element)
	{
		element = new Element(element);
		
		if (this.currentSelected)
		{
			// Clear Selected/RollOver Image
			this.currentSelected.removeClass('selected');
			this.clearOverState($E('img', this.currentSelected));
		}
		
		element.addClass('selected');
		this.setOverState($E('img', element));
		this.currentSelected = element;
	},
	
	// Sets the Over image (also used for selected state)
	setOverState: function(element)
	{
		if (window.ie6)
		{
			var filtersrc = element.getStyle('filter');
			var re = new RegExp('.*src=\'(.*)_on.(png|jpg|gif)\'.*');
			if (!filtersrc.match(re))
			{
				re = new RegExp('.*src=\'(.*).(png|jpg|gif)\'.*');				 
				// element.setStyle('filter', filtersrc.replace(re, 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'$1_on.$2\');'));
				new ImageSwap(element, filtersrc.replace(re, '$1_on.$2'));
			}
		}
		else
		{
			var imgsrc = element.getAttribute('src');
			var re = new RegExp('(.*)_on.(png|jpg|gif)');
			if (!imgsrc.match(re))
			{
				re = new RegExp('(.*).(png|jpg|gif)');
				// element.getParent().setStyle('background', 'url(images/arrow.png) no-repeat');
				new ImageSwap(element, imgsrc.replace(re, '$1_on.$2'));
			}
		}
	},
	
	// Clears the Over image (also used for selected state)
	clearOverState: function(element)
	{
		if (window.ie6)
		{
			var filtersrc = element.getStyle('filter');
			var re = new RegExp('.*src=\'(.*)_on.(png|jpg|gif)\'.*');
			if (filtersrc.match(re))
			{
				// element.getParent().setStyle('filter', 'none');
				new ImageSwap(element, filtersrc.replace(re, '$1.$2'));
			}
		}
		else
		{
			var imgsrc = element.getAttribute('src');
			var re = new RegExp('(.*)_on.(png|jpg|gif)');
			if (imgsrc.match(re))
			{
				new ImageSwap(element, imgsrc.replace(re, '$1.$2'));
			}
		}
	}
});

Stylists.implement(new Events);

var stylists = new Stylists();


window.addEvent('domready',
	function()
	{
		stylists.initStylists();
	}
);