/* jQuery UI ariaLightbox 1.0
 * Copyright (c) 2009 Felix Nagel for Namics (Deustchland) GmbH
 * Licensed under Creative Commens Attribution-Share Alike 3.0 Unported (http://creativecommons.org/licenses/by-sa/3.0/) */
(function($) {

$.widget("ui.ariaLightbox", {
	_init: function() {	
		var options = this.options, self = this;
		if (options.imageArray) {	
			options.imageArray[options.imageArray.length] = this.element;
			var index = options.imageArray.length;
			
			this.element.click(function (event) { 
				self.options.activeImage = index-1;	
				if (!options.disabled) {
					event.preventDefault();
					self._open($(this), event);
				}
			});	
		} else {
			self.element.click(function (event) { 	
				if (!options.disabled) {
					event.preventDefault();
					self._open($(this), event);
				}
			});
		}	
		if (options.useDimmer)
		$(window).resize(function(){ 
			self._dimmerResize();
		});
	},
	startGallery: function (event){
		var options = this.options, self = this;	
		self._open($(options.imageArray[0]), event);
	},
	_open: function (element, event){
		var options = this.options, self = this;			
		options.clickedElement = event.target;	
		options.wrapperElement = $("#ui-lightbox-wrapper");
		if(!options.wrapperElement.length){
			self._show(element, event);
		} else {
			self._changePicture(element, event);
		}
	},
	_show: function (element, event){
		var options = this.options, self = this;		
		var html = "\n";
		html += '<div id="ui-lightbox-wrapper" style="z-index:'+options.zIndex+1+';" class="ui-dialog ui-widget ui-widget-content ui-corner-all" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-titleText-dialog">'+"\n";
		html += '	<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">'+"\n";
		html += '		<span class="ui-dialog-title" id="ui-dialog-title-dialog">'+ options.titleText +'</span>'+"\n";
		html += '		<a href="#nogo" id="ui-lightbox-close" class="ui-dialog-titlebar-close ui-corner-all" title="'+ options.closeText +'" role="button">'+"\n";
		html += '			<span class="ui-icon ui-icon-closethick">'+ options.closeText +'</span>'+"\n";
		html += '		</a>'+"\n";
		html += '	</div>'+"\n";
		html += '	<div id="ui-lightbox-content">'+"\n";
		html += '		<div id="ui-lightbox-image"><img src="" aria-describedby="ui-lightbox-description" /></div>'+"\n";
		html += '		<p id="ui-lightbox-description"></p>'+"\n";
		if (options.imageArray) { 
		html += '		<p id="ui-lightbox-pager"></p>'+"\n";
		html += '		<div id="ui-dialog-buttonpane" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">'+"\n";
		html += '			<button id="ui-lightbox-next" type="button" class="ui-state-default ui-corner-all">n&auml;chstes Bild</button>'+"\n";
		html += '			<button id="ui-lightbox-prev" type="button" class="ui-state-default ui-corner-all">vorheriges Bild</button>'+"\n";
		html += '		</div>'+"\n";
		}
		html += '	</div>	'+"\n";
		html += '</div>'+"\n";	
		if (options.useDimmer) self._lightboxCreate();
		$("body").append(html);
		self._trigger("onShow", 0);
		options.wrapperElement = $("#ui-lightbox-wrapper");			
		if(options.imageArray) { 
			options.wrapperElement.keydown( function(event){ 
				if(event.keyCode == $.ui.keyCode.RIGHT) 	self.next(); 
				if(event.keyCode == $.ui.keyCode.DOWN) 		self.next(); 
				if(event.keyCode == $.ui.keyCode.UP) 		self.prev(); 
				if(event.keyCode == $.ui.keyCode.LEFT) 		self.prev(); 
				if(event.keyCode == $.ui.keyCode.SPACE) 	self.next(); 
				if(event.keyCode == $.ui.keyCode.END) {
					options.activeImage = options.imageArray.length-2;
					event.preventDefault();
					self.next(); 
				}
				if(event.keyCode == $.ui.keyCode.HOME) {	
					options.activeImage = 1;	
					event.preventDefault();
					self.prev(); 
				}
			});	
			options.buttonpane = options.wrapperElement.find("#ui-dialog-buttonpane")
			self._setButtonState();		
			var prev = options.buttonpane.find("#ui-lightbox-prev");
			prev.click( function() { self.prev(); });
			self._makeHover(prev);				
			var next = options.buttonpane.find("#ui-lightbox-next");
			next.click( function() { self.next(); });
			self._makeHover(next);
		}
		options.wrapperElement.keydown( function(event){ 
			if(event.keyCode == $.ui.keyCode.ESCAPE) 	self.close();
		});
		var closeElement = options.wrapperElement.find("#ui-lightbox-close");
		closeElement.click( function() { self.close(); });
		self._makeHover(closeElement);
		switch (options.pos) {
			case "auto":
				var viewPos = 	self._pageScroll();
				var posLeft = 	(($(document).width() - options.wrapperElement.width())/2);	
				var posTop = 	viewPos[1]+options.autoHeight;
				break;
			case "offset":
				var posLeft = 	event.pageX+options.offsetX;	
				var posTop = 	event.pageY-options.offsetY;
				break;						
			default:
				var position =  options.pos.split(",");
				var posLeft = position[0];
				var posTop = position[1];
				break;
		}		
		options.wrapperElement
			.css({
				left: posLeft+"px",
				top: posTop+"px"
			})
			.fadeIn(options.animationSpeed)
			.focus();
		self._changePicture(element, event);
	},
	_changePicture: function (element, event){
		var options = this.options, self = this;
		var contentWrapper = options.wrapperElement.find("#ui-lightbox-content");
		var imageWrapper = contentWrapper.find("#ui-lightbox-image");
		var imageElement = imageWrapper.find("img");
		imageElement.fadeOut(options.animationSpeed, function() {
			contentWrapper
				.attr("aria-live", "assertive")
				.attr("aria-relevant", "additions removals text")
				.attr("aria-busy", true);	
			var image = new Image();
			image.onload = function() {	
				imageElement
					.attr('src', element.attr("href"))
					.attr('alt', element.find("img").attr(options.altText));
				var calculatedX = (options.em) ? image.width*options.em+"em" : image.width;
				var calculatedY = (options.em) ? image.height*options.em+"em" : image.height;
				imageElement.css({
					width: calculatedX,
					height: calculatedY
				});
				switch (options.pos) {
					case "offset":
						options.wrapperElement.animate({
							left: event.pageX+options.offsetX+"px",
							top: event.pageY+options.offsetY+"px",
							width: calculatedX
						}, options.animationSpeed);
						break;						
					case "auto":
						options.wrapperElement.animate({
							left: (($(document).width() - image.width)/2)+"px",
							width: calculatedX
						}, options.animationSpeed);
						break;						
				}
				imageWrapper.animate({ 
						height: calculatedY
					}, 	
					options.animationSpeed, 
					function () {
						imageElement.fadeIn(options.animationSpeed);
						options.wrapperElement.find("#ui-lightbox-description")
							.text(element.find("img").attr(options.descText));
						if (options.imageArray)
						options.wrapperElement.find("#ui-lightbox-pager")
							.text(options.pictureText +' '+ (options.activeImage+1) +' '+ options.ofText +' '+ options.imageArray.length);
						if (options.useDimmer)	self._dimmerResize();
						self._updateVitualBuffer();		
						contentWrapper.attr("aria-busy", false);						
						self._trigger("onChangePicture", 0);
					}
				);					
				image.onload = function(){};
			};
			image.src = element.attr("href");
		});	
	},	
	_setButtonState: function (){
		var options = this.options;
		options.buttonpane.find("#ui-lightbox-next, #ui-lightbox-prev")
			.removeAttr("disabled")
			.removeClass("ui-state-disabled")
			.removeClass("ui-state-focus");
		switch (options.activeImage) {
			case 0:	
				options.buttonpane.find("#ui-lightbox-prev")
					.attr("disabled", "disabled")
					.removeClass("ui-state-hover")
					.addClass("ui-state-disabled");
				options.buttonpane.find("#ui-lightbox-next").focus();
				break;
			case options.imageArray.length-1:				
				options.buttonpane.find("#ui-lightbox-next")
					.attr("disabled", "disabled")
					.removeClass("ui-state-hover")
					.addClass("ui-state-disabled");
				options.buttonpane.find("#ui-lightbox-prev").focus();
				break;
		}		
	},
	close: function (){
		var options = this.options, self = this;
		$(options.clickedElement).parent().focus();
		options.wrapperElement.fadeOut(options.animationSpeed, function () { 
			$(this).remove(); 
		});
		if (options.useDimmer) $("#ui-lightbox-screendimmer").fadeOut(options.animationSpeed, function() { $(this).remove(); });
		$('#flowplay').css({"display": "inline"})
		flowplayer("flowplay", "/include/flowplayer-3.1.5.swf", { 
				clip:{url: "/media/video/psv.flv",
					  autoPlay: false,
					  onBeforeFinish: function(){return false;},
					  autoBuffering: false}, 
				canvas: { 
					backgroundImage: 'url(/images/ti_video_01.jpg)' 
					}, 
				// controlbar settings 
				plugins:  { 
					controls: {             
						url: '/include/flowplayer.controls-3.1.5.swf',					 
						all:false, 
						scrubber:true, 
						play:true, 
						volume:true,
						fullscreen:true,
						backgroundColor: '#00205a', 
						backgroundGradient: 'low', 
						bufferColor: '#333333', 
						progressColor: '#c42d40',             
						buttonColor: '#c42d40', 
						buttonOverColor: '#dc0014', 
						autoHide: 'always',
						width: '100%',  
						height: '20px',
						bottom: 5, 
						opacity: 0.95 					 
					} 
				} 
			});
		
		
		
		self._trigger("onClose", 0);
	},		
	prev: function (){
		var options = this.options, self = this;
		if(options.imageArray && options.activeImage > 0) {
			options.activeImage = options.activeImage-1;
			self._changePicture($(options.imageArray[options.activeImage]));
			self._setButtonState();
			self._trigger("onPrev", 0);
		}
	},	
	next: function (){
		var options = this.options, self = this;
		if(options.imageArray && options.activeImage < (options.imageArray.length-1)) {
			options.activeImage = options.activeImage+1;
			self._changePicture($(options.imageArray[options.activeImage]));
			self._setButtonState();
			self._trigger("onNext", 0);
		}
	},
	_lightboxCreate: function() {	
		var options = this.options, self = this;
		var html = '<div id="ui-lightbox-screendimmer" style="display: none;"></div>';		
		$('#flowplay').css({"display": "none"})
		$("body").append(html);
		$("#ui-lightbox-screendimmer")
			.css({
				width: 		self._dimmerWidth(),
				height: 	self._dimmerHeight(),
				zIndex: 	options.zIndex,
				background: options.background,
				position: 	"absolute",
				top: 		"0px",
				left:		"0px",
				opacity:	options.opacity
			})
			.fadeIn(options.animationSpeed)
			.click( function() {
				self.close();
			});
	},
	_dimmerResize: function() {
		var self = this;		
		var dimmer = $("#ui-lightbox-screendimmer");	
		dimmer.css({
			width: 	0,
			height: 0
		});		
		var dimension = self._pageScroll();
		var dimensionX = (dimension[0] == 0) ? self._dimmerWidth() : dimension[0];			
		dimmer.css({
			width: 	dimensionX,
			height: self._dimmerHeight()
		});
	},
	_dimmerHeight: function() {
		if ($.browser.msie && $.browser.version < 7) {
			var scrollHeight = Math.max(
				document.documentElement.scrollHeight,
				document.body.scrollHeight
			);
			var offsetHeight = Math.max(
				document.documentElement.offsetHeight,
				document.body.offsetHeight
			);
			if (scrollHeight < offsetHeight) {
				return $(window).height() + 'px';
			} else {
				return scrollHeight + 'px';
			}
		} else {
			return $(document).height() + 'px';
		}
	},
	_dimmerWidth: function() {
		if ($.browser.msie && $.browser.version < 7) {
			var scrollWidth = Math.max(
				document.documentElement.scrollWidth,
				document.body.scrollWidth
			);
			var offsetWidth = Math.max(
				document.documentElement.offsetWidth,
				document.body.offsetWidth
			);
			if (scrollWidth < offsetWidth) {
				return $(window).width() + 'px';
			} else {
				return scrollWidth + 'px';
			}
		} else {
			return $(document).width() + 'px';
		}
	},
	_pageScroll: function() {
		var xScroll, yScroll;
		if (self.pageYOffset) {
			yScroll = self.pageYOffset;
			xScroll = self.pageXOffset;
		} else if (document.documentElement && document.documentElement.scrollTop) {
			yScroll = document.documentElement.scrollTop;
			xScroll = document.documentElement.scrollLeft;
		} else if (document.body) { 
			yScroll = document.body.scrollTop;
			xScroll = document.body.scrollLeft;	
		}
		arrayPageScroll = new Array(xScroll,yScroll);
		return arrayPageScroll;
	},
	_makeHover: function(element) {
		 element.bind("mouseenter", function(){ $(this).addClass('ui-state-hover'); })
				.bind("mouseleave", function(){ $(this).removeClass('ui-state-hover'); })
				.bind("focus", function(){ $(this).addClass('ui-state-focus'); })
				.bind("blur", function(){ $(this).removeClass('ui-state-focus'); });
	},	
	_updateVitualBuffer: function() {
		var form = $("#virtualBufferForm");		
		if(form.length) {
			(form.val() == "1") ? form.val("0") : form.val("1")
		} else {
			var html = '<form><input id="virtualBufferForm" type="hidden" value="1" /></form>';
			$("body").append(html);
		}
	},
	destroy: function() {
		var options = this.options;	
		this.element
			.unbind(".ariaLightbox")
			.unbind("click")
			.removeData('ariaLightbox');
		$("#virtualBufferForm").parent().remove();	
		$("#ui-lightbox-screendimmer").remove();	
		$("#ui-lightbox-wrapper").unbind("keydown").remove();
	}	
});
$.extend($.ui.ariaLightbox, {
	version: "1.7.1",
	defaults: {
		altText: "alt",
		descText: "titleText",
		prevText: "vorheriges Bild",
		nextText: "nächstes Bild",		
		titleText: "Lightbox",
		pictureText: "Bild",
		ofText: "von",
		closeText: "Schliessen [ESC]",
		pos: "auto",
		autoHeight: 50,
		offsetX: 10,
		offsetY:  10,
		useDimmer: true,
		animationSpeed: "slow",		
		zIndex: 1000,
		background: "black",
		opacity: 0.8,
		em: 0.0568182,
		// don not alter this var
		activeImage: 0
	}
});
})(jQuery);