/**
 * Description: put any jQuery and/or other general javascript code here
 */
 
 jQuery.noConflict(); 
 
 /*****************************
  ******* HEADER PLUGIN ********
  *****************************/
(function($) {
	$.fn.vheader = function(options) {
		var defaults = {
			tInterval: 7000,
			picWidth: 945,
			picHeight: 263,
			animationTime: 1500,
			animationEasing: "linear"
		};
		
		//var opts = $.extend({}, defaults, options);
		var opts = defaults;
		
		var currentIndex = 0;
		var doRun = true;
		var firstRun = true;
		var Interval;
	
		// iterate and reformat each matched element
		return this.each(function(index) {
			elem = $(this);
			elem.hide();
			
			var data = {
				title: new Array(),
				href: new Array(),
				subtext: new Array(),
				imgbig: new Array(),
				imgsmall: new Array()
			};
			
			var container = $('<div></div>');
			container.attr("id", "vheader-container" + index)
				.addClass("vheader");
			
			elem.children().each(function(j){
				data.title[j] = $(this).find('.vh_title').text();
				data.href[j] = $(this).find('a:first').attr('href');
				//$(this).remove('a');
				data.subtext[j] = $(this).find('.vh_text a').html('').remove();
				data.subtext[j] = $(this).find('.vh_text').text();
				data.imgbig[j] = $(this).find('img:first').attr('src');
				data.imgsmall[j] = $(this).find('img:last').attr('src');
				$(this).find("a").html('').remove();
			});
			
			displayHeader(data, container);
			
			Interval = setInterval(function() { makeItMove(data, container); }, opts.tInterval);
			
		});
		
				// private functions
		function displayHeader(data, container) {
			var contId = container.attr('id');
			
			container.appendTo("#container_header");
			container.html('<div class="vheader-inner"><div class="vheader-picholder"></div><div class="vheader-textbox"><div></div></div><div class="vheader-thumbholder"></div><img src="/fileadmin/veenendaalcultureel/templates/images/overlay.png" class="overlay"></div>');
			
			container.hover(function(){
				doRun = false;
			},function(){
				doRun = true;
				//clearInterval(Interval);
				//makeItMove(data, container);
			});
			
			var picture = '<img src="' + data.imgbig[0] + '" width="' + opts.picWidth + '" height="' + opts.picHeight + '" style="z-index: 1001;" />';
			$('#' + contId + ' .vheader-picholder').html(picture);
			
			var thumbList = $('<ul></ul>');
			thumbList.appendTo($('#' + contId + ' .vheader-thumbholder'));
			
			$.each(data.title, function(index, value) { 
				var listElem = $('<li></li>');
				listElem.appendTo(thumbList);
				listElem.html('<img src="' + data.imgsmall[index] + '" width="20" height="20" />');
				
				//preload:
				var image = $(new Image());
				image.load(function() {
					listElem.click( function(){
						//doRun = false;
						currentIndex = index;
						container.find('.vheader-textbox').stop(true, true);
						switchToIndex(index, data, container);
					}).css("cursor", "pointer");
					if(index==0){ 
						switchToIndex(currentIndex, data, container);
					}
				}).attr("src", data.imgbig[index]);
			});
		};
		
		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('vh-active');
			container.find('li').eq(index).addClass('vh-active');
			
			container.find('.vheader-textbox').slideToggle(opts.animationTime, function(){
				container.find('.vheader-textbox div').html('<h2>' + data.title[index] + '</h2><p>' + data.subtext[index] + '</p><a href="' + data.href[index] + '">Lees verder...</a>');
				$(this).slideToggle(2500);
			});
			
			var oldPicture = container.find(".vheader-picholder img");
			
			container.find(".vheader-picholder").append('<img src="' + data.imgbig[index] + '" style="width:' + opts.picwidth + '; height:' + opts.picheight + '; z-index: 1000;" />');
			oldPicture.fadeOut(opts.animationTime, function(){
				oldPicture.remove();
				container.find('.vheader-picholder img').css("z-index", 1001);
			});
			container.find('.vheader-picholder img').animate({
			    width: '108%'
			  }, {
				  duration: opts.tInterval,
				  queue: false,
				  easing: 'linear'
			  });
			firstRun = false;
		};
		
	};

	$(document).ready(function(){
		$('#vh_header_modul').vheader();
	});
})(jQuery);