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.setContainerElementsDimensions();
				//this.setBackgroundImages();
				/*
				if (itemBelongsToCollection)
					this.initialiseCollectionDisplay();
				*/
				this.initialiseArticleMenuEventHandlers();
				//this.initialiseCommentForm();
				this.initialiseShadowbox();
				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.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');
		if (element != null)
		{
			element.setStyle('cursor', 'pointer');
			element.setStyle('cursor', 'hand');
			element.addEvent('click', this.showAllCollections.create({'bind':this}));
			
			var seperators = $$('#collection_list div.list_seperator');
			seperators.each(function(seperator)
			{
				seperator.setStyle('display', 'none');
			});
			
			// 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()
	{
		var map = {
			'display_about': this.showArticleAbout,
			'display_designer': this.showArticleDesigner,
			'display_studio': this.showArticleStudio,
			'display_images': this.showArticleImages,
			'display_credits': this.showArticleCredits,
			'display_links': this.showArticleLinks,
			'display_comments': this.showArticleComments,
			'display_all': this.showArticleAll
		};
		
		// Add event handlers to menu
		for (var name in map){
			var section = $(name);
			if (section){
				section.addEvent('click', map[name].create({'bind':this}));
			}
		}
		
		// Add event handlers to comments link below article title
		var element = $('details_display_comments');
		if (element){
			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();		
		$('shadowbox_container').setStyle('visibility', 'hidden');
	},
	
	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;
		$('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
		if ($('video_player')){
			$('video_player').setStyles({
				'width':videoWidth,
				'height':videoHeight
			});
		}
		
		//only add the video player if it's an oldskool article page. Otherwise, Vimeo will handle that for us.
		if ($('video_container')){
			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/FTFWTT-logoanim2.swf', 'flash_header', '755', '110', '9.0.115', '/flash/expressInstall.swf', {}, {'wmode':'transparent', 'loop':'false'});
			break;
		default:
			// Header image
			$('header_image').set('html', '<img src="/img/logo-FTFWTT.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');
		}
		
		if ($('related_items'))
			$('related_items').setStyle('margin-top', 15);
			
		var seperators = $$('#collection_list div.list_seperator');
		seperators.each(function(seperator)
		{
			seperator.setStyle('display', 'block');
		});
		
		$('collection_list').setStyle('display', 'block');
		// 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');
		}
		
		if ($('related_items'))
			$('related_items').setStyle('margin-top', 395);
			
		var seperators = $$('#collection_list div.list_seperator');
		seperators.each(function(seperator)
		{
			seperator.setStyle('display', 'none');
		});
		
		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');
		if ( $('designer_detail') )
			$('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();
	},
	
	showArticleStudio: function()
	{
		this.hideAllArticleSections();
		$('studio_at_article').setStyle('display', 'block');
		$('studio_name').setStyle('display', 'block');
		$('studio_title').setStyle('display', 'none');		
		this.setAsCurrentOption( $('display_studio') );
		this.updateArticleOptionEventHandlers();
	},
	
	showArticleImages: function()
	{
		this.hideAllArticleSections();
		$('article_images').setStyle('display', 'block');
		this.setAsCurrentOption( $('display_images'));
		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');
		$$('div.comment').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');
		//Show all separators
		$$('.separator').setStyle('display', 'block');
		
		var hide = ['designer_detail', 'commentform_link', 'designer_name', 'studio_name'];
		for (var k=0; k<hide.length; k++){
			var section = $(hide[k]);
			if (section){
				section.setStyle('display', 'none');
			}
		}
		
		var show = ['designer_title', 'about', 'designer_at_article', 'studio_at_article', 'credits', 'links', 'comments', 'commentform', 'studio_title', 'article_images'];
		for (var k=0; k<show.length; k++){
			var section = $(show[k]);
			if (section){
				section.setStyle('display', 'block');
			}
		}

		if ($('display_all'))
			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
		$$('.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
		var sections = ['about', 'designer_at_article', 'studio_at_article', 'credits', 'links', 'comments', 'commentform', 'article_images'];

		for (var k=0; k<sections.length; k++){
			var section = $(sections[k]);
			if (section){
				section.setStyle('display', 'none');
			}
		}
		$$('.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
		$$('.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);