var Header = Class.create({
	SLIDESHOW_INTERVAL: 8 * 1000,
						  
	current: null,
	
	timer: null,
	paused: false,
	
	x: null,
	y: null,
						  
	items: null,
	images: null,
	
	initialize: function()
	{
		// Set the current item
		this.current = 0;
		
		// Get the items
		this.items = $('head-container').select('.head-item');
		
		// Get the images
		this.images = $('head-container').select('.head-icons img');
		
		// Initialize the display and attach event listeners
		var image = null;
		
		for ( var i = 0, length = this.images.length; i < length; i++ )
		{
			image = this.images[i];
			
			if ( i == this.current ) // Current item
			{
				// Change the mouse pointer
				image.setStyle({cursor: 'default'});
			}
			else // Other item
			{
				// Hide the item
				this.items[i].setStyle({display: 'none'});
				
				// Make the image opaque
				image.setStyle({opacity: 0.6});
			}
			
			// Attach click listener
			this.images[i].observe('click', this.show.bind(this, i));
		}
		
		// Watch for the cursor entering the header to pause the slideshow
		Element.observe(document, 'mousemove', this.mouseMove.bind(this));
		
		this.play();
	},
	
	show: function(index)
	{
		// If the current item was clicked do nothing
		if ( index == this.current )
		{
			return;
		}
		
		// Change the highlighted image
		this.images[this.current].setStyle({cursor: 'pointer', opacity: 0.6});
		this.images[index].setStyle({cursor: 'default', opacity: 1});
		
		// Change the visible content
		Effect.Fade(this.items[this.current], {duration: 0.3});
		Effect.Appear(this.items[index], {duration: 0.3});
		
		// Set the current item
		this.current = index;
	},
	
	slideshow: function()
	{
		var next = this.current + 1;
		
		if ( next == this.images.length )
		{
			next = 0;
		}

		this.show(next);
		
		this.play();
	},
	
	pause: function()
	{
		Effect.Appear('head-pause', {duration: 0.2, to: 0.4});
		
		clearTimeout(this.timer);
		this.paused = true;
	},
	
	play: function()
	{
		Effect.Fade('head-pause', {duration: 0.2, from: 0.4});
		
		this.timer = setTimeout(this.slideshow.bind(this), this.SLIDESHOW_INTERVAL);
		this.paused = false;
	},
	
	mouseMove: function(e, count)
	{
		var x, y;
		
		// Get the cursors position
		if ( e.pageX || e.pageY )
		{
			x = e.pageX;
			y = e.pageY;
		}
		else if ( e.clientX || e.clientY )
		{
			x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
		
		if ( x == undefined || y == undefined )
		{
			return;
		}
		
		this.x = x;
		this.y = y;
		
		var mouse_in = this.mouseIn($('head-container'));
		
		if ( mouse_in && !this.paused )
		{
			this.pause();
		}
		else if ( !mouse_in && this.paused )
		{
			this.play();
		}
	},
	
	mouseIn: function(element)
	{
		element = $(element);
		
		var coords = this.getBoxCoordinates(element);
		
		if ( this.y > coords.top && this.x > coords.left && this.y < coords.bottom && this.x < coords.right )
		{
			return true;
		}
		else
		{
			return false;
		}
	},
	
	getBoxCoordinates: function(element)
	{
		var offset = $(element).cumulativeOffset();
		var dimensions = $(element).getDimensions();
		
		var top_y = offset.top;
		var top_x = offset.left;
		var bottom_y = offset.top + dimensions.height;
		var bottom_x = offset.left + dimensions.width;
		
		return {top: top_y, left: top_x, bottom: bottom_y, right: bottom_x};
	}
});

Prototype.Browser.IE6 = ( parseFloat(navigator.userAgent.split('MSIE')[1]) == 6 ) ? true : false;
Prototype.Browser.IE5_5 = ( parseFloat(navigator.userAgent.split('MSIE')[1]) == 5.5 ) ? true : false;

var Images = {
	transparent_image: "assets/template_images/site_2008/clear.gif",
	
	fixAll: function()
	{
		// Check if the browser is IE 5.5 or IE 6
		if ( !Prototype.Browser.IE && !Prototype.Browser.IE5_5 && !Prototype.Browser.IE6 )
		{
			return;
		}
		
		// If there is a player on the page run again on load to fix all images after the player
		if ( $$('object').length > 0 )
		{
			Event.observe(window, 'load', Images.fixAll);
		}
		
		// Get all images
		$$('img').each(Images.fix);
	},
	
	fix: function(image)
	{
		if ( !Prototype.Browser.IE5_5 && !Prototype.Browser.IE6 )
		{
			return;
		}
		
		image = $(image);
	
		var filename = image.readAttribute('src');
		if ( filename.toLowerCase().endsWith('png') )
		{
			var opacity = image.getStyle('opacity');
			
			image.setStyle({
				filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + filename + '", sizingMethod="none")'
			});
			image.writeAttribute({
				src: Images.transparent_image
			});
			
			if ( opacity != 1 )
			{
				image.setStyle({opacity: opacity});
			}
		}
	}
}

document.observe('dom:loaded', Images.fixAll);