/**
 * Project: Media Solutions
 * Datum: 02 April 2010
**/
(function($){

	$.fn.extend({
		// Haal id op van panel
		PosterId: function(){
			return $(this).attr("id").replace('poster-','');
		},
		 
		MSFadeIn: function(){
			$(this).animate({
				'opacity': 0
			}, 250);
			$(this).parent().find('.hide').animate({
				'opacity': 1
			}, 250);
		},
		 
		MSFadeOut: function(){
			$(this).animate({
				'opacity': 1
			}, 250);
			$(this).parent().find('.hide').animate({
				'opacity': 0
			}, 250);
		}
	});

	$.extend({
		"firstItem": '',
		"lastItem": '',
		"isWorking": 0,
		"fpItems": '',
		"images": '',
		"time": '',
		"ActiveIntro": '1',
		"paused": '0',
		"direction": "left",
	
		// Haal de pagina naam op
		getPage: function(){
			var uri = window.location.href;
			return uri.substr(uri.lastIndexOf('/'),uri.lastIndexOf('/')).replace('/','');
		},
		// MediaSolutions init functie
		MSInit: function(){
			// Kijk of er arguments zijn
			if(arguments.length > 0) data = arguments[0];
			else data = '';
			
			// Welke pagina is het?
			if(this.getPage() == "index.asp" || (this.getPage() == "" && $.rewrite == 0)){
				$("#arrows").attr("class","block");
				this.Frontpage(data);
			}
			//else if(this.getPage() == "wat-we-doen.asp"){
				//this.WatWeDoen(data);
			//}
			else if(this.getPage() == "projecten.asp"){
				this.Projecten(data);
			}
		},
		// Haal de groote op van een json array
		jSize: function(arr){
			var count = 0;
			$.each(arr,function(){ count++; });
			return count;
		},
		// Escape quotes
		trimQuotes: function(str){
			str = str.replace('/\"/gi', '\\"');
			str = str.replace('/\'/gi', "\\'");
			return str;
		},
		
		/*
		 * Projecten
		 */
		 Projecten: function(data){
		 	$('.show').each(function(){
				$(this).bind('mouseover', function(){
					$(this).MSFadeIn();
				}).bind('mouseout', function(){
					$(this).MSFadeOut();
				});
			});
		 },
		
		/*
		 * Wat We Doen
		 */
		WatWeDoen: function(cRootUrl){			
			$('.product').each(function(){
				var self = $(this).find('p');
				var html = "";
				var orginHeight = "";
				var smallHeight = "";
				
				self.html($.ShortenDescription(self.html()));
				orginHeight = self.height();
				self.find('span').css('display','none');
				smallHeight = self.height();
				
				self.css('overflow','hidden').css('height',self.height());
				self.find('span').css('display','inline').css('color','#ffffff');
				self.find('a:first').attr('name', 'lm').attr('href', 'fake-link').attr('class', 'lme').append('<img />');
				self.find('a:last').attr('name', 'lm').attr('href', 'fake-link').attr('class', 'lme').append('<img />');
				self.find('a img').attr('src', 'images/arrow.png').attr('alt', 'pijl').attr('class', 'arrow');
				self.find('a:first').css('position', 'absolute').css('z-index','2').css('margin-top','6px');
				self.find('a[href=fake-link]').bind('click', function(event){
					event.preventDefault();
					curHeight = $(this).parent().parent().find('p').css('height').replace("px","");
					if(orginHeight == curHeight){
						$(this).parent().parent().find('p').animate({
							'height' : smallHeight
						}, 1000);
						$(this).parent().find('span').animate({
							/*'opacity' : 0*/
							color: "#FFFFFF"
						}, 1000);
						$(this).parent().find('a:first').animate({
							'opacity' : 1
						}, 1000);
					}
					else {
						$(this).parent().parent().find('p').animate({
							'height' : orginHeight
						}, 1000);
						$(this).parent().find('span').animate({
							/*'opacity' : 1*/
							color: "#000000"
						}, 1000);
						$(this).parent().find('a:first').animate({
							'opacity' : 0
						}, 1000);
					}
				});
				self.parent().find('h2').bind('click', function(event){
					event.preventDefault();
					curHeight = $(this).parent().parent().find('p').css('height').replace("px","");
					if(orginHeight == curHeight){
						$(this).parent().find('p').animate({
							'height' : smallHeight
						}, 1000);
						$(this).parent().find('span').animate({
							/*'opacity' : 0,*/
							color: "#FFFFFF"
						}, 1000);
						$(this).parent().find('a:first').animate({
							'opacity' : 1
						}, 1000);
					}
					else {
						$(this).parent().find('p').animate({
							'height': orginHeight
						}, 1000);
						$(this).parent().find('span').animate({
							/*'opacity': 1*/
							color: "#000000"
						}, 1000);
						$(this).parent().find('a:first').animate({
							'opacity' : 0
						}, 1000);
					}
				});
			});
		},
		
		// Beschrijving inkorten
		ShortenDescription: function(html) {
			var output = "";
			output = html.substring(0, html.indexOf('.') + 1);
			output += '<a></a>';
			output += "<span>";
			output += html.substring(html.indexOf('.') + 1, html.length);
			output += "</span>";
			output += '<a></a>';
			return output;
		},
		
		/*
		 * Voorpagina functie's
		 */
		Frontpage: function(data){
			var i = 1, image = '', pClass = '';
		
			// Laad alle plaatjes in een array en bepaal het laatste en eerste plaatje
			this.fpItems = data;
			this.firstItem = this.fpItems.images[0];
			this.lastItem = this.fpItems.images[this.jSize(data.images) - 1];	
			
			// Als javascript aanstaat en hij komt hier gaan we de backup op none zetten
			$('#posters-backup').attr("class","none");
			
			// Voor elk plaatje
			$.each(this.fpItems.images, function(){
				// Preload images
				image = new Image();
				image.src = this.imagePath;
				
				// Bepaal de class
				if(i == 1) pClass = 'large';
				else if(i == 2) pClass = 'small left';
				else if(i == 3) pClass = 'small right';
				else if(i == 4) pClass = 'small far-right';
				else pClass = 'small';
				
				// Panel opbouwen
				panel = "\n";
				panel += "<div id=\"poster-" + i + "\" class=\"" + pClass + "\">\n";
				panel += "	<a href=\"" + this.link + "\" title=\"" + $.trimQuotes(this.title) + "\">\n";
				panel += "		<img src=\"" + this.imagePath + "\" alt=\"\" />\n";
				panel += "	</a>\n";
				panel += "</div>\n";
				panel += "\n";
				
				// Panel toevoegen aan html
				$('#posters-inner').html( $('#posters-inner').html() + panel );
				if(i != 1) $('#poster-' + i).find('.intro').css('visibility','hidden');
				
				// Volgende plaatje
				i++;
			});
			
			// Voor elke intro tekst
			i = 1; // weer op een zetten en beginnen met een frisse start
			$.each(this.fpItems.images, function(){
				intro = "\n";
				intro += "	<div class=\"intro-" + i + "\">\n";
				intro += "		<h2><a href=\"" + this.link + "\" title=\"" + $.trimQuotes(this.title) + "\">" + this.title + "</a></h2>\n";
				intro += "		<blockquote><a href=\"" + this.link + "\" title=\"" + $.trimQuotes(this.subline) + "\">" + this.subline + " <img src=\"./images/arrow.png\" class=\"arrow\" alt=\"pijl\" /></a></blockquote>\n";
				intro += "	</div>\n";
				intro += "\n";
				
				// Into toevoegen aan html
				$('.intro').html( $('.intro').html() + intro );
				if(i == 1) $('.intro-1').css('display','block');
				else $('.intro-' + i).css('display','none');
				
				// Volgende intro
				i++;
			});
			
			// Binds toevoegen aan panels
			$('#posters-inner div').bind('mouseover', function(){
				$.paused = 1;
			});
			
			$('#posters-inner div').bind('mouseout', function(){
				$.paused = 0;
			});
									
			// Timer instellen voor het eerste plaatje en intro
			$.time = 1000;
			$(document).oneTime($.time, "transition", function(){
				if($.direction == "left"){
					if($.isWorking == 0) $.animateRight();
				}
				else
				{
					if($.isWorking == 0) $.animateLeft();
				}
			});
			
			// Linker knop binden aan animateLeft, als het script al bezig is blokeer de knop
			$('#left-arrow').bind('click', function(){
				$(document).stopTime("transition");
				$.direction = "left";
				if($.isWorking == 0) $.animateRight();
			});
			
			// Rechter knop binden aan animateRight, als het script al bezig is blokeer de knop
			$('#right-arrow').bind('click', function(){
				$(document).stopTime("transition");
				$.direction = "right";
				if($.isWorking == 0) $.animateLeft();
			});
		},
		// Functie om plaatjes links te laten bewegen
		animateLeft: function(){
			var id = 0, sid = 0;
			
			// Zet vast de tijd voor de volgende animate
			$.time = $.fpItems.images[$("#posters .large").PosterId() - 1].time;
			
			// Blokeer de rest van het script
			$.isWorking = 1;
			
			// Laad de juiste intro, verberg de andere intro
			$(".intro-" + $.ActiveIntro).animate({ opacity: 'toggle' }, 1000);
			
			iId = parseInt($("#posters .left").PosterId());
			$(".intro-" + iId).animate({
				opacity: 'toggle'
			}, 1000, function(){
				$.ActiveIntro = iId;
			}); 
			
			// Een plaatje aan de rechterkant laten invoeren, mits het niet de laatste is
			if($.jSize($.fpItems.images) > $('#posters .right').PosterId()){
				id = parseInt($('#posters .right').PosterId()) + 1;
				$('#poster-' + id).css('visibility','visible')
								  .animate({
										left: '-=252'
								  }, 1000, function(){
									sid = parseInt($(this).PosterId()) + 1;
									if(sid > $.jSize($.fpItems.images)){
										$('#poster-1').attr("class","small far-right");
									} else {
										$('#poster-' + sid).attr("class","small far-right");
									}
								  	$(this).attr("class","small right");
								  });
			}
			// Het is wel het laatste plaatje
			else
			{
				$('#poster-1').css('visibility','visible')
							  .animate({
									left: '-=252'
							  }, 1000, function(){
								if($('.far-right').PosterId() == 1){
									$('#poster-2').attr("class","small far-right");
								}
							  	$(this).attr("class","small right");
							  });
			}
			
			// large										
			$('#posters .large').animate({ 
				left: '-=500' 
			}, 1000, function(){
				$(this).css("left","999px")
					   .attr("class","small");							   
				$(this).find('img:last')
					   .css("height","172px")
					   .css("width","204px");
				$(this).css("visibility","hidden")
					   .css("height","189px");
				$(document).oneTime($.time, "transition", function(){
					if($.direction == "left"){
						if($.isWorking == 0) $.animateRight();
					}
					else
					{
						if($.isWorking == 0) $.animateLeft();
					}
				});
			});
			
			// small left
			$('#posters .left').animate({
				left: '-=489',
				height: '+=185'
			}, 1000 ,function(){
				$(this).attr("class","large");
			});
			
			$('#posters .left').find('img:last').animate({
				height: '+=187',
				width: '+=220'
			}, 1000, function(){ 
				$.isWorking = 0;
			});
			
			// small right
			$('#posters .right').animate({
				left: '-=254'
			}, 1000, function(){
				$(this).attr("class","small left");
			});
		},
		// Laat de plaatjes rechts gaan
		animateRight: function(){
			var id = 0, sid = 0;
			
			// Zet vast de tijd voor de volgende animate
			$.time = $.fpItems.images[$("#posters .large").PosterId() - 1].time;
			
			// Blokeer de rest van het script
			$.isWorking = 1;		
							
			// Laad de juiste intro, verberg de andere intro
			$(".intro-" + $.ActiveIntro).animate({ opacity: 'toggle' }, 1000);
			
			// Een plaatje aan de rechterkant laten invoeren, mits het niet de eerste is
			if(1 < $('#posters .large').PosterId()){
				id = parseInt($('#posters .large').PosterId()) - 1;
				
				$(".intro-" + id).animate({
					opacity: 'toggle'
				}, 1000, function(){
					$.ActiveIntro = id;
				}); 
				
				$('#poster-' + id).find('img:last')
							  .css('height','358px')
							  .css('width','424px');
				$('#poster-' + id).css('visibility','visible')
							  .css('left','-500px')
							  .css('height','374px')
							  .css('width','424px')
							  .animate({
									left: '+=502'
							  }, 1000, function(){
							  	id = parseInt($(this).attr("id").replace('poster-','')) - 1;
								if(id == 0){
									sid = $.jSize($.fpItems.images);
									$('#poster-' + sid).attr("class","small");
								} else {
									sid = $(this).attr("id").replace('poster-','');
									sid = parseInt(sid) - 1;
									$('#poster-' + sid).attr("class","small");
								}
							  	$(this).attr("class","large");
							  });
			}
			// Het is wel het eerste plaatje
			else
			{
				id = parseInt($.jSize($.fpItems.images));	
										
				$(".intro-" + id).animate({
					opacity: 'toggle'
				}, 1000, function(){
					$.ActiveIntro = id;
				}); 
				
				$('#poster-' + id).find('img:last')
							  .css('height','358px')
							  .css('width','424px');
				$('#poster-' + id).css('visibility','visible')
							  .css('left','-500px')
							  .css('height','374px')
							  .css('width','424px')
							  .animate({
									left: '+=502'
							  }, 1000, function(){
								id = parseInt($(this).attr("id").replace('poster-','')) - 1;
								if(id == 0){
									sid = $.jSize($.fpItems.images);
									$('#poster-' + sid).attr("class","small");
								} else {
									sid = $(this).attr("id").replace('poster-','');
									sid = parseInt(sid) - 1;
									$('#poster-' + sid).attr("class","small");
								}
							  	$(this).attr("class","large");
							  });
			}
								
			// small right
			$('#posters .right').animate({
				left: '+=254'
			}, 1000, function(){
				$(this).attr("class","small far-right")
					   .css('visibility','hidden');
			});
			
			// large										
			$('#posters .large').animate({ 
				left: '+=492',
				height: '-=185'
			}, 1000, function(){
				$(this).attr("class","small left")
				$(document).oneTime($.time, "transition", function(){
					if($.direction == "left"){
						if($.isWorking == 0) $.animateRight();
					}
					else
					{
						if($.isWorking == 0) $.animateLeft();
					}
				});
			});
			
			$('#posters .large').find('img:last').animate({
				height: '-=187',
				width: '-=220'
			}, 1000, function(){ 
				$.isWorking = 0;
			});
			
			// small left
			$('#posters .left').animate({
				left: '+=254'
			}, 1000 ,function(){
				$(this).attr("class","small right");
			});
		}
	});
	
})(jQuery);