//jQuery.noConflict(); 
 
 /*****************************
  ******* HEADER PLUGIN ********
  *****************************/
(function($) {
	$.fn.wheader = function(options) {
		var defaults = {
			tInterval: 4000,
			picWidth: 606,
			picHeight: 250,
			animationTime: 1500,
			animationEasing: "linear"
		};
		
		//var opts = $.extend({}, defaults, options);
		var opts = defaults;
		
		var currentIndex = 0;
		var doRun = true;
	
		// iterate and reformat each matched element
		return this.each(function(index) {
			var elem = $(this);
			elem.hide();
			
			var data = {
				title: new Array(),
				subtitle: new Array(),
				href: new Array(),
				subtext: new Array(),
				img: new Array()
			}
			
			var container = $('<div></div>');
			container.attr("id", "wheader-container" + index)
				.addClass("wheader");
			
			elem.children().each(function(j){
				data.title[j] = $(this).find('.wh_title').text();
				data.subtitle[j] = $(this).find('.subheadwrap').text();
				data.href[j] = $(this).find('a:last').attr('href');
				$(this).find("a").html('').remove();
				//$(this).remove('a');
				data.subtext[j] = $(this).find('.wh_text').text();
				data.img[j] = $(this).find('img').attr('src');
			});
			
			displayHeader(data, container);
			
			setInterval(function() { makeItMove(data, container); }, opts.tInterval);
			
		});
		
				// private functions
		function displayHeader(data, container) {
			var contId = container.attr('id');
			$("#flashmod").html('');
			container.appendTo("#flashmod");
			container.html('<div class="wheader-inner"><div class="wheader-picholder"></div><div class="wheader-overlay"></div><div class="wheader-right"></div><div class="wheader-textbox"></div><div class="wheader-more"><a href="#">&#62; <span>Lees meer...</span></a></div></div>');
			
			var picture = '<img src="' + data.img[0] + '" width="' + opts.picWidth + '" height="' + opts.picHeight + '" style="z-index: 110;" />';
			$('#' + contId + ' .wheader-picholder').html(picture);
			
			var titleList = $('<ul></ul>');
			titleList.appendTo($('#' + contId + ' .wheader-right'));
			
			$.each(data.title, function(index, value) { 
				var listElem = $('<li></li>');
				listElem.appendTo(titleList);
				listElem.html('<a href="' + data.href[index] + '">&#62; <span>' + value + '</span></a>');
				
				listElem.hover( function(){
					doRun = false;
					currentIndex = index;
					switchToIndex(index, data, container);
				}, function(){
					doRun = true;
				});
			});
			switchToIndex(currentIndex, data, container);
		};
		
		function makeItMove(data, container){
			if(doRun){
				currentIndex++
				if(data.title.length == currentIndex) currentIndex = 0;
				switchToIndex(currentIndex, data, container);
			}
		};
		
		function switchToIndex(index, data, container){
			container.find("li").removeClass('wh-active');
			container.find('li').eq(index).addClass('wh-active');
			
			container.find('.wheader-textbox').html('<h2>' + data.subtitle[index] + '</h2><h3>' + data.subtext[index] + '</h3>');
			container.find('.wheader-more a').attr('href', data.href[index]);
			
			var oldPicture = container.find(".wheader-picholder img");
			
			container.find(".wheader-picholder").append('<img src="' + data.img[index] + '" width="' + opts.picWidth + '" height="' + opts.picHeight + '" style="z-index: 100;" />');
			
			oldPicture.fadeOut(opts.animationTime, function(){
				oldPicture.remove();
				var image = container.find('.wheader-picholder img');
				image.css("z-index", 110);
			});
			
			/*oldPicture.hide();
			oldPicture.remove();
			var image = container.find('.wheader-picholder img');
			image.css("z-index", 110);*/
		};
		
	};

	$(document).ready(function(){
		$('#wh_modul').wheader();
	});
})(jQuery);