// JavaScript Document
(function($){
	$.kro = $.kro || { };
	
	$.kro.frontpage = {
		options: {
			curimglist: '#currentitems', // div id of highlight list
			items: '#itemlist', // div id of passive item list
			speed: 3500, // scrollspeed of items
			startnr: 0
		}
	};	
	
	$.fn.krofrontpage = function(itmArray, options) {
		var options = $.extend({}, $.kro.frontpage.options, options);
		this.each(function(){ $(this).data('krofp', new frontpage($(this), itmArray, options)); });
		return this;
	};
	
	function frontpage(root, itmArray, options){
		var oSelf = this;
		var oWrapper = root;
		var vItems = itmArray;
		var vSpeed = options.speed;
		var vCurnr = options.startnr;
		var vNewnr = options.startnr;
		var oCurimglist;
		var oItemlist;
		var vCount;
		var time;
		var css3 = $.support.transition;
		
		function init() {
			build();
			oCurimglist = $("#currentitems", root);
			oItemlist = $("#itemlist", root);
			vCount = oCurimglist.children().length;
			time = setTimeout(switchItem, vSpeed);
			return oSelf;
		}
		
		this.update = function(){
			oCurimglist.children().css("left", 900);
			oCurimglist.children("#highlight-"+vCurnr).css("left", 0);
			oItemlist.children().each(function(i, e){
					offset = 223 * i + 8;
					$(this).css("left", offset);
				});
			time = setTimeout(switchItem, vSpeed);
		}
		
		function build(){
			var page_row = [];
			page_row[0] = [];
			page_row[1] = [];
			page_row[2] = [];
			
			$.each(vItems, function(i, row){
				offset = i == vCurnr ? 0 : 900;
				page_row[1].push(
					'<li id="highlight-'+i+'" style="left: '+offset+'px;">',
					'	<img src="'+vItems[i][1]+'" alt="'+vItems[i][3]+'" />',
					'</li>'
				);
				
				offset = i == 0 ? 900 : 223 * (i - 1) + 8;
				page_row[2].push(
					'<li id="item-'+i+'" style="left: '+offset+'px;">',
                    '	<a href="'+vItems[i][8]+'">',
                    '	<div class="itmimg"><img src="'+vItems[i][2]+'" alt="'+vItems[i][5]+'" /></div>',
                    '	<h2>'+vItems[i][5]+'</h2>',
                    '	<p class="subtitle">'+vItems[i][6]+'</p>',
					'	</a>',
					'</li>'
				);
			});
			
			if(vItems[0][7]){
				presentator = '<div id="presentator"><img src="'+vItems[0][7]+'" alt="'+vItems[0][3]+'" /></div>';
			} else {
				presentator = '<div id="presentator" style="display: none;"><img /></div>';
			}
			page_row[0].push(
				'<a href="'+vItems[0][8]+'" id="itemlink"></a>',
				'<div id="omschrijving">',
				presentator,
				'	<div id="titel_bg"></div>',
				'	<h1>'+vItems[0][3]+'</h1>',
				'	<p>'+vItems[0][4]+'</p>',
				'</div>',
				'<ul id="currentitems">',
				page_row[1].join(''),
				'</ul>',
				'<div id="itemcontainer">',
				'<ul id="itemlist">',
				page_row[2].join(''),
				'</ul>',
				'</div>'
			);
			$('#homeItems', oWrapper).html(page_row[0].join(''));
			return true;
		}
		
		function switchItem(){
			oCurimglist.addClass("speed").removeClass("quality");
			oItemlist.addClass("speed").removeClass("quality");
			vNewnr = vCurnr + 1 == vCount ? 0 : vCurnr + 1;
			oCurO = oCurimglist.children("#highlight-"+vCurnr);
			oCurN = oCurimglist.children("#highlight-"+vNewnr);
			oList = oItemlist;
			
			$("#omschrijving h1").html(vItems[vNewnr][3]);
			$("#omschrijving p").html(vItems[vNewnr][4]);
			if(vItems[vNewnr][7]){
				$("#presentator img").attr({"src" : vItems[vNewnr][7], "alt" : vItems[vNewnr][3]});
				$("#presentator").css("display", "block");
			} else {
				$("#presentator").css("display", "none");
			}
			
			if(css3){
				oCurO.addClass("animate").bind(css3.end, function() {
						this.style[css3.name] = "";
						$(this).removeClass("animate").unbind(css3.end).css('left', 900)
						oCurimglist.addClass("quality").removeClass("speed");
					});
				oCurN.addClass("animate").bind(css3.end, function() {
						this.style[css3.name] = "";
						$(this).removeClass("animate").unbind(css3.end).css('left', 0)
						time = setTimeout(switchItem, vSpeed); 
						oCurimglist.addClass("quality").removeClass("speed");
					});
				oList.addClass("animate").bind(css3.end, function(){
						this.style[css3.name] = "";
						$(this).removeClass("animate").unbind(css3.end).css('left', 0).children().each(function(i, e){
							parseleft = parseInt($(e).css("left"));
							offset = parseleft - 223 < 0 ? 900 : parseleft - 223;
							$(e).css('left', offset);
						});
						oItemlist.addClass("quality").removeClass("speed");
					});
				
				if(css3.tr3d) {
					oCurO[0].style[css3.name] = 'translate3d(-900px, 0, 0)';
					oCurN[0].style[css3.name] = 'translate3d(-900px, 0, 0)';
					oList[0].style[css3.name] = 'translate3d(-223px, 0, 0)';
				} else {
					oCurO[0].style[css3.name] = 'translate(-900px, 0)';
					oCurN[0].style[css3.name] = 'translate(-900px, 0)';
					oList[0].style[css3.name] = 'translate(-223px, 0)';
				}
			} else {
				oList.animate({left: -223}, 400, function(){
						$(this).css('left', 0).children().each(function(i, e){
							parseleft = parseInt($(e).css("left"));
							offset = parseleft - 223 < 0 ? 900 : parseleft - 223;
							$(e).css('left', offset);
						});
						oItemlist.addClass("quality").removeClass("speed");
					});
				oCurO.animate({left: -900}, 600, function() { $(this).css("left", 900); });
				oCurN.animate({left: 0}, 600, function() {
						time = setTimeout(switchItem, vSpeed); 
						oCurimglist.addClass("quality").removeClass("speed");
					});
			}

			$("#itemlink", oWrapper).attr("href", vItems[vNewnr][8]);
			
			vCurnr = vNewnr;
		}
		
		return init();
	}
})(jQuery);

// jQuery.support.transition
// to verify that CSS3 transition is supported (or any of its browser-specific implementations)
$.support.transition = (function(){ 
    var thisBody = document.body || document.documentElement,
    thisStyle = thisBody.style;
    var css3 = {};
	if(thisStyle.transition !== undefined) {
		css3.pre = "";
		css3.name = "transition";
		css3.end = "TransitionEnd";
		css3.tr3d = false;
	} else if(thisStyle.WebkitTransition !== undefined) {
		css3.pre = "-webkit-";
		css3.name = "webkitTransform";
		css3.end = "webkitTransitionEnd";
		css3.tr3d = true;
	} else if(thisStyle.MozTransition !== undefined) {
		css3.pre = "-moz-";
		css3.name = "MozTransform";
		css3.end = "transitionend";
		css3.tr3d = false;
	} else if(thisStyle.MsTransition !== undefined) {
		css3.pre = "-ms-";
		css3.name = "MsTransition";
		css3.name = "MsTransitionEnd";
		css3.tr3d = false;
	} else if(thisStyle.OTransition !== undefined) {
		css3.pre = "-o-";
		css3.name = "OTransition";
		css3.end = "oTransitionEnd";
		css3.tr3d = false;
	} else {
		css3 = false;
	}
    return css3;
})();