var Titlesequences = new Class({

	// Is a long collection description present?
	mHasLongCollectionDescription: false,
	// Current visible short collection description (if any)
	mCurrentCollection: null,
	// Current selected article menu option
	mCurrentArticleOption: null,
	// List of fields in comment form we need to check
	mCommentFields: [],

	// Called from mootools
	initialize: function()
	{
		// Check page type (for initialisation of event handlers)
		if (typeof(pageType) != "undefined")
		{
			switch (pageType)
			{
			case 'article':
				this.initialiseCollectionDisplay();
				this.initialiseArticleMenuEventHandlers();
				this.initialiseCommentForm();
				this.setBackgroundImages();
				this.setContainerElementsDimensions();
				this.writePlayer();
				this.writeHeader('image');
				break;
			case 'collection':
				this.mHasLongCollectionDescription = true;
				this.initialiseCollectionDisplay();
				this.writeHeader('image');
				break;
			case 'designer':
				this.initialiseShadowbox();
				this.writeHeader('image');
				this.initDesignerMenuHandlers();
			}
		}
		else
		{
			this.writeHeader('flash');
		}
		
		this.initialiseSearchField();
	},
	
	/* Initialises event handler for display of collection list. */
	initialiseCollectionDisplay : function()
	{
		// Selection link at top of list
		var element = $('collection_display_option');
		element.setStyle('cursor', 'pointer');
		element.setStyle('cursor', 'hand');
		element.addEvent('click', this.showAllCollections.create({'bind':this}));
		
		// Store current collection (if any)
		// Store current visible element, so we can revert
		var elements = $$('#collection_list div.collection');
		elements.each(function(element)
		{
			if (element.getProperty('id') == 'current_collection')
			{
				this.mCurrentCollection = element;
				element.setStyle('display', 'block');
			}
			else
			{
				element.setStyle('display', 'none');
			}
		});
	},
	
	initDesignerMenuHandlers: function()
	{
		
		if ($('display_madeBy') != null) $('display_madeBy').addEvent('click', this.showDesignerMadeBy.create({'bind':this}));
		if ($('display_images') != null) $('display_images').addEvent('click', this.showDesignerImages.create({'bind':this}));
		if ($('display_designer_about') != null) $('display_designer_about').addEvent('click', this.showDesignerAbout.create({'bind':this}));
		if ($('display_studios') != null) $('display_studios').addEvent('click', this.showDesignerStudios.create({'bind':this}));
		if ($('display_all_designer') != null) $('display_all_designer').addEvent('click', this.showDesignerAll.create({'bind':this}));
		
		this.showDesignerAll();
	},
	
	/*
	Initialises event handlers for menu below video player,
	display comment form & comment form button.
	*/
	initialiseArticleMenuEventHandlers: function()
	{
		// Add event handlers to menu
		$('display_about').addEvent('click', this.showArticleAbout.create({'bind':this}));
		$('display_designer').addEvent('click', this.showArticleDesigner.create({'bind':this}));
		$('display_credits').addEvent('click', this.showArticleCredits.create({'bind':this}));
		$('display_links').addEvent('click', this.showArticleLinks.create({'bind':this}));
		$('display_comments').addEvent('click', this.showArticleComments.create({'bind':this}));
		$('display_all').addEvent('click', this.showArticleAll.create({'bind':this}));
		
		// Add event handlers to comments link below article title
		var element = $('details_display_comments');
		element.addEvent('click', this.showArticleComments.create({'bind':this}));
		element.addEvent('mouseenter', function()
		{
			this.setStyle('color', '#00d6d6');
		});
		element.addEvent('mouseleave', function()
		{
			this.setStyle('color', '#00afaf');
		});
		element.setStyle('color', '#00afaf');
		element.setStyle('cursor', 'pointer');
		element.setStyle('cursor', 'hand');
		
		// We want to start with the display of all info
		this.showArticleAll();
	},
	
	/* Sets up the comment form in the article page. */
	initialiseCommentForm: function()
	{
		$('commentform').addEvent('submit', this.validateCommentForm.create({'bind':this}));
		this.mCommentFields = $$('#commentform input[type!=submit]');
		this.mCommentFields.push($$('#commentform textarea'));
		// Initialise captcha reload
		$('captcha_reload').addEvent('click', this.reloadCaptchaImage.create({'bind':this}));
		// Clear captcha field
		$('CaptchaCaptcha').set('value', '');
	},
	
	initialiseShadowbox: function()
	{
		Shadowbox.init();
	},
	
	initialiseSearchField: function()
	{
		$('searchfield').setProperty('value', 'Search...');
		$('searchfield').addEvent('focus', function(event)
		{
			if (event.target.getProperty('value') == 'Search...')
			{
				event.target.setProperty('value', '');
			}
		});
		$('searchfield').addEvent('blur', function(event)
		{
			if (!event.target.getProperty('value'))
			{
				event.target.setProperty('value', 'Search...');
			}
		});
	},
	
	setBackgroundImages: function()
	{
		$('wrapper').setStyle('background-image', 'url(/img/background-right-side-less.gif)');
		$('background-right').setStyle('right', 0);
		
		var width = videoWidth > 550 ? (videoWidth > 640 ? 720 : 640) : 550;
		$('footer').setStyle('background-image', 'url(/img/background-footer-' + width + '.gif)');
	},
	
	setContainerElementsDimensions: function()
	{
		// Update the following divs: wrapper, content, content_right (css class .right_wide), footer, header_image
		var width = videoWidth > 550 ? (videoWidth > 640 ? 720 : 640) : 550;
		var width = videoWidth > 550 ? (videoWidth > 640 ? 720 : 640) : 550;
		$('wrapper').setStyle('width', (984 - 550) + width);
		$('content').setStyle('width', (984 - 550) + width);
		$('footer').setStyle('width',  (984 - 550) + width);
		$('header_image').setStyle('width', (585 - 550) + width);
		$('content_right').setStyle('width', (597 - 550) + width);
	},
	
	/* Writes the flash player in the article page. */
	writePlayer: function()
	{
		// Update width and left-margin of video_player div
		$('video_player').setStyles({
			'width':videoWidth,
			'height':videoHeight
		});
		swfobject.embedSWF('/flash/player12.swf', 'video_container', videoWidth, videoHeight, '10.0.0', '/flash/expressInstall.swf', {autoplay:'true', video_url:videoFile, width:videoWidth, height:videoHeight}, {bgcolor:"#000000", allowFullScreen:'true', allowNetworking:'all', wmode:'opaque', scale:'noscale'});
	},
	
	writeHeader: function(type)
	{
		switch (type)
		{
		case 'flash':
			// Header animation
			swfobject.embedSWF('/flash/header_gradient.swf', 'flash_header', '750', '110', '9.0.115', '/flash/expressInstall.swf', {}, {'wmode':'transparent'});
			break;
		default:
			// Header image
			$('header_image').set('html', '<img src="/img/titles-logo.gif"/>');
			break;
		}
	},

	/*
	Displays all collections in the collection list on the left side. Hides
	The arrow in the collection display option and changes textual content of
	this element as well.
	*/
	showAllCollections: function()
	{
		if (this.mHasLongCollectionDescription)
		{
			// Hide long collection description
			this.mCurrentCollection = $$('#collections div.long');
			this.mCurrentCollection.setStyle('display', 'none');
		}
		
		// Set display style property of all elements to block
		var elements = $$('#collection_list div.collection');
		elements.each(function(element)
		{
			element.setStyle('display', 'block');
		});
		
		// Change text of display option and flip arrow
		$$('#collection_display_option h3').set('text', 'show current collection');
		$$('#collection_display_option img').set('src', '/img/arrow-up.gif');
		
		// Update event handler
		$('collection_display_option').removeEvents('click');
		$('collection_display_option').addEvent('click', this.showCurrentCollection.create({'bind':this}));
	},
	
	showCurrentCollection: function()
	{
		if (this.mHasLongCollectionDescription)
		{
			// Hide long collection description
			this.mCurrentCollection.setStyle('display', 'block');
		}
		
		var elements = $$('#collection_list div.collection');
		elements.each(function(element)
		{
			// Do not hide short current collection if 
			if (element != this.mCurrentCollection)
			{
				element.setStyle('display', 'none');
			}
		});
		
		// Change text of display option and flip arrow
		$$('#collection_display_option h3').set('text', 'show all collections');
		$$('#collection_display_option img').set('src', '/img/arrow-down.gif');
		
		// Update event handler
		$('collection_display_option').removeEvents('click');
		$('collection_display_option').addEvent('click', this.showAllCollections.create({'bind':this}));
	},
	
	/* Displays 'about' section of article */
	showArticleAbout: function()
	{
		this.hideAllArticleSections();
		$('about').setStyle('display', 'block');
		$('designer_detail').setStyle('display', 'block');
		this.setAsCurrentOption($('display_about'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* Displays 'about the designer' section of article */
	showArticleDesigner: function()
	{
		this.hideAllArticleSections();
		$('designer_at_article').setStyle('display', 'block');
		$('designer_name').setStyle('display', 'block');
		$('designer_title').setStyle('display', 'none');
		this.setAsCurrentOption($('display_designer'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* Displays 'full credits' section of article */
	showArticleCredits: function()
	{
		this.hideAllArticleSections();
		$('credits').setStyle('display', 'block');
		$$('#credits p.title').setStyle('display', 'none');
		this.setAsCurrentOption($('display_credits'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* Displays 'links' section of article */
	showArticleLinks: function()
	{
		this.hideAllArticleSections();
		$('links').setStyle('display', 'block');
		$$('#links p.title').setStyle('display', 'none');
		this.setAsCurrentOption($('display_links'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* Displays 'comments' section of article */
	showArticleComments: function()
	{
		this.hideAllArticleSections();
		// Show post you comment in comment section
		$('commentform_link').setStyle('display', 'block');
		$('comments').setStyle('display', 'block');
		$('commentform').setStyle('display', 'block');
		this.setAsCurrentOption($('display_comments'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* Displays all sections of article */
	showArticleAll: function()
	{
		// Show all section titles
		$$('#article p.title').setStyle('display', 'block');
		// Hide designer detail in about section
		$('designer_detail').setStyle('display', 'none');
		// Hide post you comment in comment section
		$('commentform_link').setStyle('display', 'none');
		// Update designer section title
		$('designer_name').setStyle('display', 'none');
		$('designer_title').setStyle('display', 'block');
		
		// Show all sections
		$('about').setStyle('display', 'block');
		$('designer_at_article').setStyle('display', 'block');
		$('credits').setStyle('display', 'block');
		$('links').setStyle('display', 'block');
		$('comments').setStyle('display', 'block');
		$('commentform').setStyle('display', 'block');
		// Show all section separators
		$$('img.separator').setStyle('display', 'block');
		this.setAsCurrentOption($('display_all'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* displays 'made by' on designer page */
	showDesignerMadeBy: function()
	{
		this.hideAllDesignerSections();
		$('madeBy').setStyle('display', 'block');
		this.setAsCurrentOption($('display_madeBy'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* displays 'images' on designer page */
	showDesignerImages: function()
	{
		this.hideAllDesignerSections();
		$('designerImages').setStyle('display', 'block');
		this.setAsCurrentOption($('display_images'));
		this.updateArticleOptionEventHandlers();
	},	
	
	/* displays 'images' on designer page */
	showDesignerAbout: function()
	{
		this.hideAllDesignerSections();
		$('designerAbout').setStyle('display', 'block');
		this.setAsCurrentOption($('display_designer_about'));
		this.updateArticleOptionEventHandlers();
	},	
	
	/* displays 'images' on designer page */
	showDesignerStudios: function()
	{
		this.hideAllDesignerSections();
		$('studio').setStyle('display', 'block');
		this.setAsCurrentOption($('display_studios'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* Displays all sections of article */
	showDesignerAll: function()
	{
		// Show all section titles
		//$('#article p.title').setStyle('display', 'block');
		
		// Show all sections
		if($('madeBy') !=null) $('madeBy').setStyle('display', 'block');
		if($('designerImages') !=null) $('designerImages').setStyle('display', 'block');
		if($('designerAbout') !=null) $('designerAbout').setStyle('display', 'block');
		if($('studio') !=null) $('studio').setStyle('display', 'block');
		// Show all section separators
		$$('img.separator').setStyle('display', 'block');
		this.setAsCurrentOption($('display_all_designer'));
		this.updateArticleOptionEventHandlers();
	},
	
	/* Helper function to set the current article option to the given element. */
	setAsCurrentOption: function(element)
	{
		if (this.mCurrentArticleOption)
		{
			this.mCurrentArticleOption.removeClass('current_option');
			this.mCurrentArticleOption.setStyle('color', '#00afaf');
		}
		element.addClass('current_option');
		element.setStyle('color', '#ffffff');
		this.mCurrentArticleOption = element;
	},
	
	/* Helper function to update the event handler of the article options. */
	updateArticleOptionEventHandlers: function()
	{
		var elements = $$('.option');
		elements.each(function(element)
		{
			// Remove all elements
			element.removeEvents('mouseenter');
			element.removeEvents('mouseleave');
			
			// Add elements
			element.addEvents({
				'mouseenter':function(){
					this.setStyle('text-decoration', 'underline');
					if (!this.hasClass('current_option'))
					{
						this.setStyle('color', '#00d6d6');
					}
				},
				'mouseleave':function(){
					this.setStyle('text-decoration', 'none');
					if (!this.hasClass('current_option'))
					{
						this.setStyle('color', '#00afaf');
					}
				}
			});
		});
	},
	
	/* Helper function to hide all sections of article. */
	hideAllArticleSections: function()
	{
		// Hide all sections
		$('about').setStyle('display', 'none');
		$('designer_at_article').setStyle('display', 'none');
		$('credits').setStyle('display', 'none');
		$('links').setStyle('display', 'none');
		$('comments').setStyle('display', 'none');
		$('commentform').setStyle('display', 'none');
		// Hide all section separators
		$$('img.separator').setStyle('display', 'none');
	},
	
	/* hide all designer info*/
	hideAllDesignerSections: function()
	{
		if($('madeBy') !=null) $('madeBy').setStyle('display', 'none');
		if($('designerImages') !=null) $('designerImages').setStyle('display', 'none');
		if($('designerAbout') !=null) $('designerAbout').setStyle('display', 'none');
		if($('studio') !=null) $('studio').setStyle('display', 'none');
		// Hide all section separators
		$$('img.separator').setStyle('display', 'none');
	},
	
	/*
	Validates the comment form.
	Form is also validate server-side, but this saves the server a little bit of work.
	*/
	validateCommentForm: function(event)
	{
		// Stop event propagation
		event = new Event(event);
		//event.stop();

		var errors = [];
		
		// Check if name, email & message are set
		this.mCommentFields.each(function(field)
		{
			var id = field.getProperty('id');
			var value = field.getProperty('value');
			
			value = value.toString();
			if (value.trim() == '')
			{
				errors.push(id);
			}
		}, this);

		
		// Check if valid email is provided
		// Note the element id and name, these are generated by cakephp
		if (!errors.contains('CommentEmail') && !$('CommentEmail').value.trim().test(/^[a-z0-9]+(?:[-._][a-z0-9]+)*@[a-z0-9]+(?:[-.][a-z0-9]+)*(?:[.-][a-z0-9]{2,4})$/i))
		{
			errors.push('CommentEmail');
		}
		
		// Reset labels
		$$('#commentform label').setStyle('color', '#ffffff');
		// Display errors
		errors.each(function(error)
		{
			var label = $$('label[for=' + error + ']');
			if (label)
			{
				label.setStyle('color', '#ff0000');
			}
		}, this);

		// Stop event if errors occured
		if (errors.length != 0)
		{
			event.stop();
		}
	},
	
	/* Called when user clicks on captcha image reload. */
	reloadCaptchaImage: function(event)
	{
		// Obtain new image
		$('captcha_image').set('src', '/articles/captcha/image.gif?' + Math.round(Math.random(0) * 1000) + 1);
		// Clear also the text in the captcha field
		$('CaptchaCaptcha').set('value', '');
	}
});

initialise = function()
{
	new Titlesequences();
}

window.addEvent('domready', initialise);