// JavaScript Document

/* "Media-Box"
* Ignition-Groupe-Interactive
* K. Schaefer
* 01/2010
* Version 2010-02-11, 16:12
*************/



	function mediaBox() {
		this.htmlElement;
		this.mediaType;
		this.mediaSource;
		this.mediaFullView;
		this.mediaFullViewWrapperDimensions = new Array(0,0);
		this.thumbnailsWrapper;
		this.thumbnailsWrapperWidth;
		this.thumbnailsFirstElement;
		this.thumbnailsLastElement;
		this.thumbnailElementWidth;
		this.objectId = Math.floor(Math.random()*1000000001);
		this.scrollStatus = 0;
		this.scrollDirection = -1;
		var to = this;
		var timerId;
		var scrollValue = 8;
	
		this.init = function() {
			jQuery(this.htmlElement).addClass("activity_status_loading");
			jQuery(this.htmlElement).append("<div class='mediaBox_errorMessages'></div>");
			this.mediaFullViewWrapperDimensions[0] = jQuery(this.htmlElement).find(".mediaFullViewWrapper").width();
			this.mediaFullViewWrapperDimensions[1] = jQuery(this.htmlElement).find(".mediaFullViewWrapper").height();
			var newUL = jQuery("<ul></ul>");
			jQuery(this.htmlElement).find(".wrapperMediaThumbnails").append(newUL);
			this.thumbnailsWrapper = jQuery(this.htmlElement).find(".wrapperMediaThumbnails").find("ul");
			this.mediaFullView = jQuery(this.htmlElement).find("img.mediaFullView:first");
			// Get JSON-Object and write UL: /  + "&width=" + this.mediaFullViewWrapperDimensions[0] + "&height=" + this.mediaFullViewWrapperDimensions[1],
			jQuery.ajax({
				url: this.mediaSource,
				type: "GET",
				dataType: "json",
				success: function(result) {
					jQuery.each(result.medias, function (i, item) {
							if(item.mediaFullsizeLink){var mediaFullsizeLink = item.mediaFullsizeLink;}
							else {var mediaFullsizeLink = 0;}
							if(i==0){to.writeMediaFullsize(item.mediaFullsize,mediaFullsizeLink);}
							var mediaThumbnail = jQuery("<img></img>");
							jQuery(mediaThumbnail).click(function(){to.setThumbnailsActiveStatus(jQuery(this));jQuery(to.writeMediaFullsize(item.mediaFullsize,mediaFullsizeLink))});
							jQuery(mediaThumbnail).attr({"src": item.mediaThumbnail});
							jQuery(mediaThumbnail).addClass("mediaThumbnail");
							var mediaThumbnailWrapper = jQuery("<li></li>");
							if(i==0){jQuery(mediaThumbnailWrapper).addClass("first")};
							if((i+1)==jQuery(result.medias).length){jQuery(mediaThumbnailWrapper).addClass("last")};
							jQuery(to.thumbnailsWrapper).append(mediaThumbnailWrapper);
							jQuery(to.thumbnailsWrapper).find("li:last").append(mediaThumbnail);
						});
					jQuery(function() {
						jQuery(to.thumbnailsWrapper).find("img").load(function(){
						jQuery(to.htmlElement).find(".button").css("visibility","visible");													   
							});
						});
					},
				error: function(msg) {jQuery(to.htmlElement).find("div.mediaFullViewWrapper").append("<div class='error'>An error occoured. Please try later! <br/>(Couldn't load data)</div>");}
				});



			jQuery(this.htmlElement).addClass("mediaBox_id_" + this.objectId);
			this.thumbnailsWrapperWidth = jQuery(this.htmlElement).find(".wrapperMediaThumbnails").width();
			this.thumbnailsFirstElement = jQuery(this.thumbnailsWrapper).find("li:first");
			this.refreshFLElements();
			jQuery(this.htmlElement).find("div.scrollLeft").mousedown(function(){to.startScrollThumbnails(+1)});
			jQuery(this.htmlElement).find("div.scrollLeft").mouseup(function(){to.stopScrollThumbnails()});
			jQuery(this.htmlElement).find("div.scrollRight").mousedown(function(){to.startScrollThumbnails(-1)});
			jQuery(this.htmlElement).find("div.scrollRight").mouseup(function(){to.stopScrollThumbnails()});
			jQuery(document).ready(function(){jQuery(to.htmlElement).removeClass("activity_status_loading");});
			
		};
		
		this.setThumbnailsActiveStatus = function(selectedElement) {
			jQuery(selectedElement).parent("li").parent("ul").find(".mediaThumbnail").removeClass("active");
			jQuery(selectedElement).addClass("active");
		};
		
		this.refreshFLElements = function () {
			this.thumbnailsLastElement = jQuery(this.thumbnailsWrapper).find("li:last");
			this.thumbnailsFirstElement = jQuery(this.thumbnailsWrapper).find("li:first");
			if(!this.thumbnailElementWidth){this.thumbnailElementWidth = jQuery(this.thumbnailsFirstElement).find("img:first").width();};
		};
		
		this.writeMediaFullsize = function(source,mediaLink){
			var mediaElementNode = jQuery(to.htmlElement).find("div.mediaFullViewWrapper");
			
			if(!jQuery(mediaElementNode).hasClass("actionLock"))
			{
				switch(to.mediaType)
				{
					case "img":
						jQuery(mediaElementNode).addClass("actionLock");
						jQuery(mediaElementNode).find("img").remove();
						jQuery(mediaElementNode).addClass("activity_status_loading");
						var media = new Image();
						jQuery(media).load(function(){
							jQuery(this).hide();
							jQuery(mediaElementNode).removeClass("activity_status_loading").append(this);
							/* If link was set, create link-element around that image: */
							if(mediaLink!=0)
							{
								jQuery(media).wrap("<a href='" + mediaLink + "' target='_blank'></a>");
							}							
							to.adaptDimensions(jQuery(media).width(), jQuery(media).height(), this);				
							jQuery(this).fadeIn();
							jQuery(mediaElementNode).removeClass("actionLock");
							}).error(function() {jQuery(mediaElementNode).append("Error loading image.");
							}).attr('src', source);
						break;
					case "video/flash-youTube":
						jQuery(mediaElementNode).addClass("actionLock");
						jQuery(mediaElementNode).addClass("activity_status_loading");
						var mediaElementPlayer = "mediaBox_youTubePlayer_" + this.objectId;
						if(jQuery(mediaElementNode).find("object").length<1)
						{
							jQuery(mediaElementNode).append("<div id='" + mediaElementPlayer + "' ></div>");
							var params = { allowScriptAccess: "always" };
							swfobject.embedSWF("http://www.youtube.com/v/" + source + "?enablejsapi=1&border=0&playerapiid=" + mediaElementPlayer, 
                       		mediaElementPlayer, to.mediaFullViewWrapperDimensions[0], to.mediaFullViewWrapperDimensions[1], "8", null, null, params);
						}
						else
						{
							updatePlayerVideo(mediaElementPlayer,source);
						}
						break;
					default:
						jQuery(to.htmlElement).find(".mediaBox_errorMessages").append("Error in using media-type.");
				}
			}
		};
		

		this.adaptDimensions = function(width,height,object) {
			if(width > height)
			{
				if(width > this.mediaFullViewWrapperDimensions[0])
				{
					height = (this.mediaFullViewWrapperDimensions[0] / width) * height;
					width = this.mediaFullViewWrapperDimensions[0];
				}
				if(height > this.mediaFullViewWrapperDimensions[1])
				{
					width = (this.mediaFullViewWrapperDimensions[1] / height) * width;
					height = this.mediaFullViewWrapperDimensions[1];
				}
			}
			else
			{
				if(height > this.mediaFullViewWrapperDimensions[1])
				{
					width = (this.mediaFullViewWrapperDimensions[1] / height) * width;
					height = this.mediaFullViewWrapperDimensions[1];
				}
				if(width > this.mediaFullViewWrapperDimensions[0])
				{
					height = (this.mediaFullViewWrapperDimensions[0] / width) * height;
					width = this.mediaFullViewWrapperDimensions[0];
				}
			}
			
			jQuery(object).attr("width",width);
			jQuery(object).attr("height",height);
		};
		
		
		/*******************************************************/
		/* Do scrolling - called from setTimeOut() - function: */
		this.scrollThumbnails = function() {
			this.refreshFLElements();
			var oldPosition = parseInt(jQuery(this.thumbnailsWrapper).css("marginLeft"));
			var newPosition = oldPosition + scrollValue * to.scrollDirection;
			var firstElementPosition = jQuery(this.thumbnailsFirstElement).position();
			var lastElementPosition = jQuery(this.thumbnailsLastElement).position();		
			// Check, if first element is on left side or right element on right side of view-box,
			// in this case don't scroll:
			if((this.scrollDirection == +1 && firstElementPosition.left <= (scrollValue*-1)) || (this.scrollDirection == -1 && (lastElementPosition.left+this.thumbnailElementWidth) > this.thumbnailsWrapperWidth))
			{
				jQuery(this.thumbnailsWrapper).css("marginLeft", newPosition + "px");
			}
				
			/*output = "<br />last: " + (jQuery(to.thumbnailsLastElement).position()).left + " first: " + (jQuery(to.thumbnailsFirstElement).position()).left + " Scroll: " + to.scrollDirection + " Wrapper-Wdith: " + to.thumbnailsWrapperWidth; 
			jQuery("#output").append(output);*/
			if(this.scrollStatus === 1)
			{
				timerId = window.setTimeout(function(){to.scrollThumbnails()},60);
			}
		};
		
		this.startScrollThumbnails = function(direction) {
			to.scrollDirection = direction;
			to.scrollStatus = 1;
			to.scrollThumbnails();
		};
		
		this.stopScrollThumbnails = function(direction) {
			to.scrollDirection = direction;
			to.scrollStatus = 0;
			clearTimeout(timerId);
		};	
	}



	/****************************************************/
	// YOUTUBE: This function is automatically called by the player once it is loaded:
	function onYouTubePlayerReady(ytplayer)
	{
		onVideoLoaded(ytplayer);
	}
	function onVideoLoaded(ytplayer)
	{
		var ytplayer = decodeUrl(ytplayer);
		jQuery("#" + ytplayer).parent().removeClass("activity_status_loading");
		jQuery("#" + ytplayer).parent().removeClass("actionLock");
	}
	// Update player, load new video:	
	function updatePlayerVideo(pId,vSourceId)
	{
		var player = document.getElementById(pId);
		player.loadVideoById(vSourceId);
		onVideoLoaded(pId);
	}

	function decodeUrl(url) {
		var oUrl = url;
		var binVal, t, b;
		var rx = /(%[^%]{2}|\+)/;
		while ((m = rx.exec(oUrl)) != null && m.length > 1 && m[1] != '') {
			if (m[1] == '+') {
				t = ' ';
			} else {
			b = parseInt(m[1].substr(1), 16);
			t = String.fromCharCode(b);
		}
		oUrl = oUrl.replace(m[1], t);
		}
	return oUrl;
	}

	/****************************************************/