/*

	Class: SSAFrontendProjecten
		Initializes the SSA Projecten frontend page ...more to come
	
	
	Parameters:
		None
		
	Returns:
		Nothing
		
		
	Todo:


*/

SSAFrontendProjecten = Class.create({
	
	initialize:function(){
		this.initTagItems();
	},
	
	initTagItems:function(){
		var contentContainer = $("tag-content");
		if (contentContainer) {
			contentContainer.setStyle({zIndex:2000});
			this.orgTagContentDim = contentContainer.getDimensions();
			this.orgTagContentPos = contentContainer.positionedOffset();
		}
		
		// get all media items
		var mediaTagList = $("wrapper").select(".item-media");
		var mediaTag;
		for(var tagIndex = 0; tagIndex<mediaTagList.length; ++tagIndex){
			mediaTag = mediaTagList[tagIndex];
			mediaTag.observe("click", this.onMediaItemClick.bindAsEventListener(this, mediaTag, true));
			mediaTag.setStyle({cursor:"pointer"});
			if(tagIndex==0){
				this.onMediaItemClick(null, mediaTag, false);
			}
		}
		
		// left to right slide in effect
		this.itemLists = [[$("tag-content")], mediaTagList, $("wrapper").select(".item-project")];
		for(var itemListIndex = 0; itemListIndex < this.itemLists.length; ++itemListIndex){
			this.initItemList(this.itemLists[itemListIndex]);
		}
		this.currentItemListsIndex = 0;
		this.animateItv = setInterval(this.initItemAnimation.bind(this), 100);
		
		var infoItems = $("wrapper").select(".item");
		SSAUtilsFrontend.initInfoLabels(infoItems);
	},
	
	initItemList:function(itemList){
		var itemTag;
		/*for(var tagIndex = 0; tagIndex<itemList.length; ++tagIndex){
			itemTag = itemList[tagIndex];
			itemTag.setOpacity(0);
		}*/
	},

	
	initItemAnimation:function(){
		
		clearInterval(this.animateItv);
		
		var itemList = this.itemLists[this.currentItemListsIndex];
		var itemTag;
		var nextListDelay = 250;
		for(var tagIndex = 0; tagIndex<itemList.length; ++tagIndex){
			itemTag = itemList[tagIndex];
			
			//if(!jQuery.browser.msie){
			//	this.preloadImage(itemTag);
			//	nextListDelay = 750;
			//}else{
				this.animateItemIn(itemTag);
			//}
		}
		
		if(++this.currentItemListsIndex < this.itemLists.length){
			this.animateItv = setInterval(this.initItemAnimation.bind(this), nextListDelay);
		}else{
		}
	},
	
	preloadImage:function(mediaTag){
		var objImage = new Image();		
		objImage.onload=this.animateItemIn.bind(this, mediaTag);
		objImage.src=mediaTag.select("img")[0].readAttribute("src");
	},
	
	animateItemIn:function(mediaTag){
		var tagDim = mediaTag.getDimensions();
		var dur = Math.floor((Math.random()*500)+500);
		//mediaTag.setStyle({width:"0px"});
		
		var goalOpacity = 1;
		if(this.currentMediaTag == mediaTag){
			goalOpacity = 0.4;
		}
		// Fix msikma 26-08-08.
		if(mediaTag.id == "tag-content") {
			tagDim.width -= 2;
		}
		
		/*jQuery(mediaTag).animate({ 
			//width: tagDim.width+"px",
			opacity:goalOpacity
	     }, {duration:dur});*/
	},
	
	onMediaItemClick:function(mouseEv, mediaTag, withEffect){
		if(this.currentMediaTag == mediaTag){
			return;
		}
		
		mediaTag.addClassName("visited");
		
		var contentType = "image";
		var mediaContentTag = mediaTag.select(".content-image");
		
		if(mediaContentTag.length==0){
			contentType = "video";
			mediaContentTag = mediaTag.select(".content-video");
			
			var mediaJson = (mediaTag.select(".content-video")[0].innerHTML).evalJSON();
		}else {
			
			var mediaJson = (mediaTag.select(".content-image")[0].innerHTML).evalJSON();
		}
		
		var medium_img = jQuery('<img '+mediaJson.medium.attr+' id="medium_img"/>').attr('src', mediaJson.medium.src);		
		var large_img = jQuery('<img '+mediaJson.extra_media.attr+' id="large_img"/>').attr('src', mediaJson.extra_media.src);
		
		var contentTag = medium_img[0];
		Element.extend(contentTag);
		var largeImage = large_img[0];
		
		Element.extend(largeImage);
		this.setContent(null, contentType, contentTag, withEffect, medium_img, largeImage);
		
		if(withEffect){
			if(this.currentMediaTag!=null){
				jQuery(this.currentMediaTag).animate({ 
					opacity: 0.75
			     }, 250 );
			}
			this.currentMediaTag = mediaTag;
			jQuery(this.currentMediaTag).animate({ 
				opacity: 0.4
		     }, 250 );
		}else{
			if(this.currentMediaTag!=null){
				this.currentMediaTag.setOpacity(0.75);
			}
			this.currentMediaTag = mediaTag;
			this.currentMediaTag.setOpacity(0.4);
		}
		
	},
	
	setContent:function(mouseEv, contentType, contentTag, withEffect, medium_img, largeImage){
		var contentContainer = $("tag-content");
		//contentContainer.update("");
		var imgs = contentContainer.getElementsBySelector("img");
		var vids = contentContainer.getElementsBySelector(".flvwrapper");
		
		var return_from_video = false;
		if (vids.length > 0) {
			// returning from a video...
			return_from_video = true;
		}
		
		for (var a = 0, z = imgs.length; a < z; ++a) {
			var img = imgs[a];
			img.remove();
		}
		for (var a = 0, z = vids.length; a < z; ++a) {
			vids[a].remove();
		}
		
		
		
		if (contentContainer.getElementsBySelector("span").length == 0) {
			var iconTag = new Element("span");
		} else {
			var iconTag = contentContainer.getElementsBySelector("span")[0];
			
			iconTag.setStyle({
				backgroundPosition: "",
				width: "",
				height: ""
			});
			iconTag.removeClassName("png32");
			iconTag.removeClassName("enlargevideo-span");
		}
		
		var onAnimateCompleteCallBack;
		switch(contentType){
			case "image":
				
				iconTag.addClassName("enlarge-span");
				contentContainer.appendChild(iconTag);
				contentContainer.appendChild(contentTag);
				
				onAnimateCompleteCallBack = this.onAnimateCompleteImage.bind(this, contentTag);
				
				if(this.contentTagShrinkClick!=null){
					contentContainer.stopObserving("click", this.contentTagShrinkClick);
				}
				if(this.contentTagEnlargeClick!=null){
					contentContainer.stopObserving("click", this.contentTagEnlargeClick);
				}
				this.contentTagEnlargeClick = this.onContentTagClick.bindAsEventListener(this, medium_img, largeImage, contentTag);
				this.contentTagShrinkClick = this.setContent.bindAsEventListener(this, contentType, contentTag, true, medium_img, largeImage);
				contentContainer.observe("click", this.contentTagEnlargeClick);
				contentContainer.observe("mouseover", this.onContentTagOver.bindAsEventListener(this, contentTag.parentNode));
				contentContainer.observe("mouseout", this.onContentTagOut.bindAsEventListener(this, contentTag.parentNode));
				break;
			case "video":
				
				iconTag.addClassName("enlarge-span");
				iconTag.addClassName("png32");
				
				if (!return_from_video) {
					saved_background_pos = (medium_img[0].getStyle('width').substr(0, medium_img[0].getStyle('width').length - 2) - 50) / 2+'px '+(medium_img[0].getStyle('height').substr(0, medium_img[0].getStyle('height').length - 2) - 50) / 2 +'px';
				}
				var background_pos_str = saved_background_pos;
				
				
				
				iconTag.setStyle({
		  			width: medium_img[0].getStyle('width'),
		  			height: medium_img[0].getStyle('height'),
		  			backgroundPosition: background_pos_str
		  		});
				
				iconTag.addClassName("enlargevideo-span");
				contentContainer.appendChild(iconTag);
				contentContainer.appendChild(contentTag);
				
				onAnimateCompleteCallBack = this.onAnimateCompleteImage.bind(this, contentTag);
				
				if(this.contentTagShrinkClick!=null){
					contentContainer.stopObserving("click", this.contentTagShrinkClick);
				}
				if(this.contentTagEnlargeClick!=null){
					contentContainer.stopObserving("click", this.contentTagEnlargeClick);
				}
				this.contentTagEnlargeClick = this.onContentTagClick.bindAsEventListener(this, medium_img, largeImage, contentTag);
				this.contentTagShrinkClick = this.setContent.bindAsEventListener(this, contentType, contentTag, true, medium_img, largeImage);
				
				contentContainer.observe("click", this.contentTagEnlargeClick);
				
				contentContainer.observe("mouseover", this.onContentTagOver.bindAsEventListener(this, contentTag.parentNode));
				contentContainer.observe("mouseout", this.onContentTagOut.bindAsEventListener(this, contentTag.parentNode));
				break;
			case "video":
				// old
				onAnimateCompleteCallBack = this.onAnimateCompleteVideo.bind(this, contentTag);
				break;
		}
		
		this.animateContentTag(contentTag, withEffect, onAnimateCompleteCallBack);
	},
	
	onContentTagOver:function(mouseEV, contentTag){
		contentTag.addClassName("enlarge");
	},
	
	onContentTagOut:function(mouseEV, contentTag){
		contentTag.removeClassName("enlarge");
	},
	
	
	onContentTagClick:function(mouseEv, medium_img, largeImage, contentTag){
		
		var med_src = medium_img[0].src;
		var src = largeImage.src.split(".");
		var ext = src[src.length - 1];
		// fix span
		var contentContainer = $("tag-content");
		var iconspan = contentContainer.getElementsBySelector("span")[0];
		iconspan.addClassName("fixed");
		
		if (ext == "flv" || ext == "mp3") {
			var outerSpan = new Element("span");
			outerSpan.writeAttribute("class", "flvwrapper");
			var backlink = new Element("a");
			backlink.update("X");
			backlink.writeAttribute({href:"#"});
			backlink.writeAttribute("class", "closeflv");
			jQuery(backlink).click(function(){
				// apparently it already closes by itself?
			});
			var flvSpan = new Element("span");
			flvSpan.writeAttribute({id:"flv_span"});
			
			
			// fixme: prevent from throwing away span?
			
			contentContainer.update("");
			outerSpan.appendChild(backlink);
			outerSpan.appendChild(flvSpan);
			contentContainer.appendChild(outerSpan);
			var flvSRC = largeImage.readAttribute("src");
			//flvSRC="http://michiel/steam16/images/uploads/testmoviecruyff.flv";
			var flashvars = {
			  file: flvSRC,
			  autostart: "true"
			 };
			
			
			
			if(ext == "mp3") {
				flashvars.type = "sound";
				flashvars.image = med_src;
				
				flashvars.stretching = "fill";
			}else {
				flashvars.type = "video";
			}
			
			var params = {
				menu: "false",
			  allowscriptaccess:"always",
			  allowfullscreen:"true"
			};
			
			var attributes = {
			  id: "project_flv",
			  name: "project_flv"
			};
			
			swfobject.embedSWF(language.x_site_url+"images/swf/player.swf", "flv_span", "100%", "100%", "9.0.0", language.x_site_url+"images/swf/expressInstall.swf", flashvars, params, attributes);
			
			
			//
			//console.dir(largeImage);
			//
			
			this.animateContentTag(largeImage, true, this.onAnimateCompleteImage.bind(this, largeImage, contentTag));
			contentContainer.observe("click", this.contentTagShrinkClick);
			contentContainer.stopObserving("click", this.contentTagEnlargeClick);
		} else {
			//contentContainer.update("");
			var imgs = contentContainer.getElementsBySelector("img");
			for (var a = 0, z = imgs.length; a < z; ++a) {
				var img = imgs[a];
				img.remove();
			}
			contentContainer.appendChild(largeImage);
			this.animateContentTag(largeImage, true, this.onAnimateCompleteImage.bind(this, largeImage));
			contentContainer.observe("click", this.contentTagShrinkClick);
			contentContainer.stopObserving("click", this.contentTagEnlargeClick);
		}
	},
	
	animateContentTag:function(contentTag, withEffect, onAnimateCompleteCallBack){
	
		//
		//console.log(contentTag);
		//
		
		//console.dir(contentTag);
		//console.log(contentTag);
		var contentTagDim = contentTag.getDimensions();
		//console.log(contentTagDim.width);
		//console.log(contentTagDim.height);
		var widthStr = contentTag.getStyle("width");
		contentTagDim.width = Number(widthStr.substring(0, widthStr.length-2));
		var heightStr = contentTag.getStyle("height");
		contentTagDim.height = Number(heightStr.substring(0, heightStr.length-2));
		
		if (!contentTagDim.width) {
			contentTagDim.width = jQuery(contentTag).attr("width");
		}
		if (!contentTagDim.height) {
			contentTagDim.height = jQuery(contentTag).attr("height");
		}
		
		var aniWidth = contentTagDim.width+"px";
		var aniHeight = contentTagDim.height+"px";
		//console.log(contentTag);
		if (jQuery.browser.msie) {
			jQuery(".flvwrapper").css({width: aniWidth, height: aniHeight});
		}
		var aniXPos = this.orgTagContentPos.left+((this.orgTagContentDim.width-contentTagDim.width));
		var aniYPos = this.orgTagContentPos.top+((this.orgTagContentDim.height-contentTagDim.height)/2);
		var aniYPos = 110;
		
		if(aniYPos<0){
			aniYPos = 0;
		}
		
		aniXPos = aniXPos+"px";
		aniYPos = aniYPos+"px";
		
		if(withEffect){
			contentTag.setOpacity(0);
			jQuery($("tag-content")).animate({ 
		        height: aniHeight,
				width: aniWidth,
				top:aniYPos,
				left:aniXPos
		     }, {duration:200, complete:onAnimateCompleteCallBack} );
		}else{
			$("tag-content").setStyle({height: aniHeight, width: aniWidth, top:aniYPos, left:aniXPos});
		}
	},
	
	onAnimateCompleteImage:function(contentTag, thumb){
		if (jQuery(contentTag).attr("width") == 0) {
			//console.log(thumb);
		}
		jQuery(contentTag).animate({ 
			opacity: 1
	     }, {duration:100});
	},
	
	onAnimateCompleteVideo:function(contentTag){	
		var flvSpan = new Element("span");
		flvSpan.writeAttribute({id:"flv_span"});
		var contentContainer = $("tag-content");
		contentContainer.update("");
		contentContainer.appendChild(flvSpan);
		var flvSRC = contentTag.readAttribute("src");
		
		var flashvars = {
		  file: flvSRC,
		  autostart: "true"
		};
		
		var params = {
			menu: "false",
		  allowscriptaccess:"always",
	      allowfullscreen:"true"
		};
		
		var attributes = {
		  id: "project_flv",
		  name: "project_flv"
		};
		
		swfobject.embedSWF(language.x_site_url+"images/swf/player.swf", "flv_span", "100%", "100%", "9.0.0", language.x_site_url+"images/swf/expressInstall.swf", flashvars, params, attributes);
		jQuery(contentTag).animate({ 
			opacity: 1
	     }, {duration:150});
	}
});




Element.observe(document, 'dom:loaded', init);

function init(){
	var SSAFrontendProjectenHandler = new SSAFrontendProjecten();
}