/**
 * Header plugin.
 */

( function( $ ) {
	
	$.fn.header = function( options ) {
		var config = {
			itemLoopTime: 6550,
			readMoreTime: 2000,
			moreProjectsLink: "http://www.wantbuitengebeurthet.nl/projecten/projectlijst/"
		};
		
		// Use default configuration in case none is given.
		if ( options ) {
			config = options;
		}
		
		var currentIndex = 0;
		var intervalId = 0;
		
		return this.each( function() {
			// For each tt_news item, grab its content and save it.
			var data = new Array();
			var children = $(this).children().slice(0, 5);
			children.each( function( index ) {
				
				data[index] = {
					id:				index,
					title:			$( this ).find( "h2 a" ).text(),
					description:	$( this ).find( "div.subheadwrap" ).text(),
					href: 			$( this ).find( "a:last" ).attr( "href" ),
					img: 			$( this ).find( "img" ).attr( "src" )
				};
			});
			
			// Builds up the HTML.
			var container = $( "div#header-wrapper" );
			container.append( $( "<img></img>" ).attr( "id", "header-item-image" ).attr( "src", "fileadmin/svgv/templates/images/header-transparent.png" ) );
			container.append( $( "<a></a>" ).append( $( "<img></img>" ).attr( "id", "header-frame" ).attr( "src", "fileadmin/svgv/templates/images/header-frame.png"  ) ) );
			container.append( $( "<div></div>" ).attr( "id", "header-items" ).append( "<ul></ul>" ) );
			container.append( $( "<p></p>" ).addClass( "more-projects" )
					.append($( "<a href=\"" + config.moreProjectsLink + "\" title=\"Meer projecten\">Meer projecten</a>" ) )
					.append($( "<a href=\"" + config.moreProjectsLink + "\" title=\"Meer projecten\"><img src=\"fileadmin/svgv/templates/images/meer-projecten-arrow.png\" /></a>" ) ) );
			container.append( $( "<div></div>" ).attr( "id", "header-item-description" ) );
			
			displayHeader( data );
			// Loads the first item.
			switchItem( data[currentIndex] );
			loop( data );
			
		});
		
		/**
		 * Every certain seconds, switch the item.
		 * @param data - the data.
		 */
		function loop( data ) {
			// Saves in a variable so it can be cleared later.
			intervalId = setInterval( function() { 
				currentIndex = currentIndex + 1;
				switchItem( data[currentIndex] );
				// After reaching the last item, go backs to beginning.
				if ( currentIndex >= data.length - 1 ) {
					currentIndex = -1;
				}
			}, config.itemLoopTime );
		}
						
		/**
		 * Displays the header.
		 * @param data - the data.
		 */
		function displayHeader( data ) {
			var unorderedList = $( "div#header-items ul" );
			
			// For each tt_news item.
			$.each( data, function( index, value ) { 
				// Create a li tag and append it to the ul tag.
				var listItem = $( '<li></li>' );
				listItem.attr( "id", "header-item-0" + index );
				listItem.append( data[index].title );
				listItem.appendTo( unorderedList );
				
				// Add the click action.
				listItem.click( function() {
					switchItem( data[index] );
					if ( index !== data.length - 1) {
						currentIndex = index;						
					} else {
						currentIndex = -1;
					}
					// Clears the timer and start the loop again.
					clearInterval( intervalId );
					loop( data );
				});
				
				// On mouse over, show comma.
				listItem.hover( 
					function() {
						$( this ).append( $( "<img></img>" ).attr( "src", "fileadmin/svgv/templates/images/header-item-comma.png" ).addClass( "comma" ) );
					},
					function() {
						$( "img.comma" ).remove();
					}
				);				
			});
		};
		
		/**
		 * Switches to a given item.
		 * @param data - the item's data.
		 */
		function switchItem( data )	{
			// Remove any fading comma, insert one in the active item and start to fade it out.
			$( "img.fading-comma" ).remove();
			$( "li#header-item-0" + data.id ).append( $( "<img></img>" ).attr( "src", "fileadmin/svgv/templates/images/header-item-comma.png" ).addClass( "fading-comma" ) );
			$( "li#header-item-0" + data.id + " img.fading-comma" ).fadeOut( config.itemLoopTime + 2000 );
			
			// Remove any white background and insert one in the active item.
			$( "div#header-items ul li" ).removeClass( "active" );
			$( "li#header-item-0" + data.id ).addClass( "active" );
			
			// Switch both background image and description.
			var link = $( "<a></a>" ).attr( "href", data.href );
			switchHeaderImage( data.img, link );
			switchDescription( data.description, link );
		};
		
		/**
		 * Replaces the header image.
		 * @param image - the URL of the image to be used.
		 * @param link - the link to be used for the image.
		 */
		function switchHeaderImage( image, link ) {
			var headerImage = $( "img#header-item-image" );
			headerImage.stop( true, true ).fadeOut( "fast", function() {
				headerImage.fadeIn( "fast" );
				headerImage.attr( "src", image );
			})
			$("#header-frame").parent().attr("href", link.attr("href") );
		};
		
		/**
		 * Replaces the "Leer meer" description.
		 * @param description - the description to be shown.
		 * @param link - the link to be used for "Leer meer".
		 */
		function switchDescription( description, link )	{
			var headerDescription = $( "div#header-item-description" );
			headerDescription.hide();
			headerDescription.html( link.append( $("<span></span>").css("color", "white").append(description) ).append( "<br />" ) );
			headerDescription.append( $( "<p></p>" ).addClass( "read-more" ).append( link.append( "Lees meer >>" ).attr( "title", "Lees meer" ) ) );
			headerDescription.stop( true, true ).show( "drop", { direction: "right" }, config.readMoreTime );
		};
		
	};
	
	$( document ).ready( function() {
		$( "div.news-list-container" ).header();
		
	});
	
}) ( jQuery );