/**
 * Mage by �Menno
 */

function Header () {

    var self            = this;
	var _bin			= headers;
	var _container		= document.getElementById('afbeelding_houder');
	var controller		= new headerTransparantSlider(_container);
	var interval		= null;
	var timeOut			= null;
	var slider			= null;
	var width			= 2560;
	var append			= null;
	var time			= 5000;
	var timeOutTime		= 15000;
	var images_c;

    var init = function () {
		if (_bin.length > 0)
			if (_bin[0].headerId === undefined)
				startHeader();
			else
				startElementHeader();
    };

	var startHeader = function () {
		for ( var i = 0; i < _bin.length; i++ ) {
			if (_bin[i] !== undefined)
				controller.addItem(baseUrl + headerBaseFolder + _bin[i]['image']);
		}

		controller.render();
		
		if (_bin.length > 1) {
			interval = window.setInterval(function () {
				controller.next();
			}, 4000);
		}
	};

	var startElementHeader = function () {
		for ( var i = 0; i < _bin.length; i++ ) {
			if (_bin[i] !== undefined)
				controller.addItem(baseUrl + headerBaseFolder + _bin[i].header.image);
		}

		controller.render();
		
		if (_bin.length > 1) {
			interval = window.setInterval(function () {
				controller.next();
				resetOthers(images_c);
				for ( var i = 0; i < images_c.children.length; i++ ) {
					if (images_c.children[i].children[0].rel == controller.getActiveImage())  {
						images_c.children[i].children[0].src	= baseUrl + headerBaseFolder + _bin[controller.getActiveImage()].logoHover;
						images_c.children[i].children[0].onmouseout	= function () {
							return false;
						};
					}
				}
				setCss(_bin[controller.getActiveImage()].css);
			}, 5000);
		}

		setUpSlider();
	};

	var setUpSlider = function () {
		var container	= document.createElement('div');
			container.className	= 'image-nav';
			_container.appendChild(container);

			var second_c			= document.createElement('div');
				second_c.className	= 'images';
				container.appendChild(second_c);
				
				
				var nav_left			= document.createElement('div');
					nav_left.className	= 'nav-left';
					second_c.appendChild(nav_left);
					
					var a						= document.createElement('a');
						a.href					= '#';
						a.title					= 'Klik hier voor het vorige beeld';
						a.onclick				= function () {
							if (timeOut === null)
								setTimeOut();
							controller.back();
							resetOthers(images_c);
							for ( var i = 0; i < images_c.children.length; i++ ) {
								if (images_c.children[i].children[0].rel == controller.getActiveImage())  {
									images_c.children[i].children[0].src	= baseUrl + headerBaseFolder + _bin[controller.getActiveImage()].logoHover;
									images_c.children[i].children[0].onmouseout	= function () {
										return false;
									};
								}
							}
							setCss(_bin[controller.getActiveImage()].css);
							return false;
						};
						nav_left.appendChild(a);

					var nav_left_image			= document.createElement('img');
						nav_left_image.src		= baseUrl + 'source/img/image-nav-left.png';
						nav_left_image.alt		= '';
						nav_left_image.height	= '28';
						nav_left_image.width	= '17';
						a.appendChild(nav_left_image);

					images_c			= document.createElement('div');
					images_c.className	= 'images_container';
					second_c.appendChild(images_c);

					for ( var i = 0; i < _bin.length; i++ ) {
						if (i < 5) {
							var logo_item			= document.createElement('div');
								logo_item.className = 'logo';
								images_c.appendChild(logo_item);

								var image				= document.createElement('img');
									if (i == controller.getActiveImage())
										image.src			= baseUrl + headerBaseFolder + _bin[i].logoHover;
									else
										image.src			= baseUrl + headerBaseFolder + _bin[i].logo;
									image.alt			= '';
									image.rel			= i;
									image.onmouseover	= function () {
										this.src	= baseUrl + headerBaseFolder + _bin[this.rel].logoHover;
									};
									image.onmouseout	= function () {
										this.src	= baseUrl + headerBaseFolder + _bin[this.rel].logo;
									};
									image.onclick				= function () {
										if (timeOut === null)
											setTimeOut();
										var _this = this;
										if (controller.getActiveImage() != this.rel) {
											resetOthers(images_c);
											controller.callImage(function () {
												setCss(_bin[controller.getActiveImage()].css);
												_this.src	= baseUrl + headerBaseFolder + _bin[_this.rel].logoHover;
												_this.onmouseout	= function () {
													return false;
												};
											}, this.rel);
										}
									};
									logo_item.appendChild(image);
						}
					}

				
				var nav_right			= document.createElement('div');
					nav_right.className	= 'nav-right';
					second_c.appendChild(nav_right);
					
					var a						= document.createElement('a');
						a.href					= '#';
						a.title					= 'Klik hier voor het volgende beeld';
						a.onclick				= function () {
							if (timeOut === null)
								setTimeOut();
							controller.next();
							resetOthers(images_c);
							for ( var i = 0; i < images_c.children.length; i++ ) {
								if (images_c.children[i].children[0].rel == controller.getActiveImage())  {
									images_c.children[i].children[0].src	= baseUrl + headerBaseFolder + _bin[controller.getActiveImage()].logoHover;
									images_c.children[i].children[0].onmouseout	= function () {
										return false;
									};
								}
							}
							setCss(_bin[controller.getActiveImage()].css);
							return false;
						};
						nav_right.appendChild(a);

					var nav_right_image			= document.createElement('img');
						nav_right_image.src		= baseUrl + 'source/img/image-nav-right.png';
						nav_right_image.alt		= '';
						nav_right_image.height	= '28';
						nav_right_image.width	= '17';
						a.appendChild(nav_right_image);

			setCss(_bin[controller.getActiveImage()].css);
				
	};

	var setCss	= function (css) {
		var head	= document.body.parentNode.children[0];
		if (css != '') {

			if (append === null) {
				append	= document.createElement('link');
				append.type	= 'text/css';
				append.rel	= 'stylesheet';
				append.href	= baseUrl + 'source/css/defaultCss/extra/' + css;
				head.appendChild(append);
			} else {
				append.href = baseUrl + 'source/css/defaultCss/extra/' + css;
			}
		} else {
			if (append !== null) {
				head.removeChild(append);
				append = null;
			}
		}
		return;
	};

	var resetOthers = function (c) {
		for ( var i = 0; i < c.children.length; i++ ) {
			c.children[i].children[0].src	= baseUrl + headerBaseFolder + _bin[c.children[i].children[0].rel].logo;
			c.children[i].children[0].onmouseout = function () {
				this.src	= baseUrl + headerBaseFolder + _bin[this.rel].logo;
			};
		}
	};
	
	var setTimeOut = function () {
		if (interval !== null) {
			window.clearInterval(interval);
			timeOut = window.setTimeout(function () {
				interval = window.setInterval(function () {
					timeOut = null;
					controller.next();
					resetOthers(images_c);
					for ( var i = 0; i < images_c.children.length; i++ ) {
						if (images_c.children[i].children[0].rel == controller.getActiveImage())  {
							images_c.children[i].children[0].src	= baseUrl + headerBaseFolder + _bin[controller.getActiveImage()].logoHover;
							images_c.children[i].children[0].onmouseout	= function () {
								return false;
							};
						}
					}
					setCss(_bin[controller.getActiveImage()].css);
					
				}, time);
			}, timeOutTime);
		}
	};

    init();
}