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

	JS slideshow library
	(c) Barrie Robinson 2008
	
******************************************************************************************************************/

// Where?
var SiteDepth, infoContent;

if (!window['isHome']) {
	SiteDepth = 'content';
	infoContent = 'on';
} else {
	SiteDepth = 'home';
	infoContent = 'on';
}


// SLIDESHOW PRELOADER

// preload animation on example page
var ImagePreloader = new Class({
    initialize: function(container, bar, showMedia, toolbarAnimation) {
		if($defined(showMedia)){
			this.showMedia = showMedia;
		}else{
			this.showMedia = true;
		}
		if($defined(toolbarAnimation)){
			this.toolbarAnimation = toolbarAnimation;
		}else{
			this.toolbarAnimation = true;
		}

		this.container = $(container);
		this.content = $(content);
		this.slide = $(slide);
		this.prebar = $(bar);
		this.toolbar = $("toolbar");
		if (window['isHome']) {
			this.container.setStyle("display", "block");
			this.content.setStyle("display", "block");
			this.prebar.setStyle("display", "block");
		}
		this.width = this.container.getSize().x;
	},
	UpdateProgress: function(current, total){
		var currentWidth = this.width*current/total;
		this.prebar.set("tween", {
			duration: "short",
			onComplete: (function(){
			// finished cache, let's animate the width of bar to 1px
			if(current>=total){
				// hide the prebar
				this.Hide();
				// animate the toolbar to 1px height
				if(this.toolbarAnimation){
				var toolbarTween = new Fx.Tween(this.toolbar, {
					duration: "short",
					transition: Fx.Transitions.Sine.easeOut,			
					onComplete: (function(){
					// show the slide
					if(this.showMedia){
						fadeMedia('mediaplayer','0','1','none');
					}
					}).bind(this)
				});		    
				toolbarTween.start("height", "0px");
				}
				
			}
			}).bind(this)
		});
		this.prebar.tween("width", currentWidth);
    },
    Hide: function(){
		this.prebar.setStyle("width", "0px");
		this.container.setStyle("display", "none");
		if (SiteDepth == 'home') {
			this.content.setStyle("height", "0px");
			this.content.setStyle("width", "0px");
			this.slide.setStyle("height", "0px");
			this.slide.setStyle("width", "0px");
		}
	}
});


function fadeMedia(player,fromVal,toVal,thisurl,type) {
	var MediaDiv = $(player);
	var Toolbar = $('toolbar');
	var MediaDivEffect = new Fx.Morph(MediaDiv, {duration: 'long', transition: Fx.Transitions.Sine.easeInOut, onComplete: function() {
		if (thisurl != 'none'){
			window.location = thisurl;
		}
	}
	});

	if (toVal >= 1) {

			MediaDivEffect.start({
		    	'opacity': [fromVal, toVal]
			});

	}

	if (toVal == 0) {

		if ($(player).style.opacity != 0) {
			MediaDivEffect.start({
		    	'opacity': [fromVal, toVal]
			});
		}

	}

	if (player == 'mediaplayer'){
		loadSlideshow("mediaplayer","mp","frombg");
	}

	if (player == 'bgMedia'){
		if (type == 'bgoff'){
			if (displaymediaswitch=='on') {
				loadSlideshow("mediaplayer","mp","frombg");
			}
		}
	}
	return MediaDivEffect;
}

// ONLOAD EVENT

window.addEvent('domready', function(){
	try {
		if (!window["bgMedia"]) {
			bgMedia = $('bgMedia');
			content = $('content');
			footer = $('footer');
			slide = $('slide');
			bar = $('bgpreloader');
		}
		if (!bgMedia) return;
		$(bgMedia).setStyle('width', '');
		$(bgMedia).setOpacity(1);
		$(bgMedia).setStyle('display', 'block');
		$(content).setStyle('height', '0px');
		$(content).setStyle('width', '0px');
		$(footer).setStyle('top', '857px');
		imagePreloader = new ImagePreloader("bgpreloader", "bgprebar", false, false);
		slideshow.onimageload = (imagePreloader.UpdateProgress.bind(imagePreloader));
		slideshow.onContainerContentReady = function(container){
			if (slideshow.fadeMediaAction) {
				slideshow.fadeMediaAction.cancel();
				slideshow.fadeMediaAction=null;
			}
			if (!slideshow.openmenu) {
				slideshow.fadeMediaAction = fadeMedia('bgMedia','0','1','none');
			}
		}
	} catch(e) {
		//alert(e.message);
	}
	window['isHome'] && loadSlideshow("bgMedia","bp");
}); 

function fadeThis(item,fromVal,toVal) {
	var fadeitem = item;
	var fadeitemEffect = new Fx.Morph(fadeitem, {duration: 'long', transition: Fx.Transitions.Sine.easeInOut, onComplete: function(){
		}
	});
	fadeitemEffect.start({
    	'opacity': [fromVal, toVal]
	});
}

var slideshowStarter = new Class({
	initialize: function(itemArray){
	    this.itemArray = itemArray;
	    this.itemArray.each(function(item, index){
		    item.__height = item.getScrollSize().y;
		});
	    this.currentEffectIndex = this.itemArray.length-1;
	    this.visible = true;
	},
	show: function(){
		var navlink = $('navlink');
	    this.setNavigationImage("uparrow");
	    if(this.verifyIndex()){
			this.itemArray[this.currentEffectIndex].get('morph').cancel();
	    }
	    this.fixIndex();
	    this.showrun();
	},
	showrun: function() {
		if (this.currentEffectIndex < this.itemArray.length){
			var action = this.currentEffectIndex + 1;
			var bgMedia = $('bgMedia');
			var mediastate = bgMedia;
			if (action == 1) {
				imagePreloader = new ImagePreloader("preloader", "prebar");
				imagePreloader.Hide();
				// since it's stoped, let's reset the image load counter
				slideshow.imageLoaded = 0;

				fadeMedia('bgMedia','1','0','none','bgoff');
			}
			if (mediastate == 'on') {
				this.itemArray[this.currentEffectIndex].set('morph', {
					duration: 'long', 
					transition: Fx.Transitions.Sine.easeIn,
					"onComplete": function(){
						if (action==3){
							bgMedia.setStyle('width', '');
							bgMedia.setStyle('display', 'none');
							htwin.setStyle('overflow', 'auto');
							if (displaymediaswitch=='on') {
								fadeMedia('mediaplayer','0','1','none');
							}
						slideshow.start();
						}
						this.currentEffectIndex++;
						this.showrun();
					}.bind(this)
				});
				this.itemArray[this.currentEffectIndex].morph({
					'opacity': 100
				});
				infoContent = 'on';
			}
		}
	},
	hide: function(){
	    this.itemArray.each(function(item, index){
		});

		var navlink = $('navlink');
	    

	    this.setNavigationImage("downarrow");
	    if(this.verifyIndex()){
			this.itemArray[this.currentEffectIndex].get('morph').cancel();
	    }
	    //this.currentEffectIndex = this.itemArray.length - 1;
	    this.fixIndex();
	    this.hiderun();
	},
	hiderun: function(){
	    if(this.currentEffectIndex>=0){
			var action = this.currentEffectIndex+1;
			var bodybox = $('body');
			var bgMedia = $('bgMedia');
			var htwin = $('htwin');
			var content = $('content');
			this.itemArray[this.currentEffectIndex].set('morph', {
				duration: 'long', 
				transition: Fx.Transitions.Sine.easeOut,
				"onComplete": function(){
					if (this.currentEffectIndex==0) {
						htwin.setStyle('overflow', 'hidden');
						bgMedia.setStyle('width', '');
						bgMedia.setStyle('display', 'block');
						imagePreloader = new ImagePreloader("bgpreloader", "bgprebar",false, false);
						slideshow.onimageload = (imagePreloader.UpdateProgress.bind(imagePreloader));
						loadSlideshow("bgMedia","bp");
						fadeMedia('bgMedia','0','1','none');
						if (displaymediaswitch == 'on'){
							slideshow.stop();
						}
					}
					this.currentEffectIndex--;
					this.hiderun();
				 }.bind(this)
			});
			infoContent = 'off';
			this.itemArray[this.currentEffectIndex].morph({
			});
	    }
	},
	fixIndex: function(){
	    if(this.currentEffectIndex<0){
			this.currentEffectIndex = 0;
	    }
	    if(this.currentEffectIndex>=this.itemArray.length){
			this.currentEffectIndex = this.itemArray.length-1;
	    }
	},
	verifyIndex: function(){
	    if(this.currentEffectIndex>=0&&this.currentEffectIndex<this.itemArray.length){
			return true;
	    }else{
			return false;
	    }
	},
        setNavigationImage: function(status){
	    switch(status){
			case "uparrow":
			break;
			case "downarrow":
			break;
	    }
	}
    });


window.addEvent("load", function(){
	var navBoxArray = $$("#display");
	if (!navBoxArray.length) return;
	slideshowRun = new slideshowStarter(navBoxArray);
	displayPanelTurnedOn = true;
	$("navlink").addEvent("click", function(){
		if(slideshowRun.visible){
			slideshowRun.hide();
		}else{
			slideshowRun.show();
		}
		slideshowRun.visible = !slideshowRun.visible;
	});
		
	slideshowRun.show();
});






// From Slideshow.js



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

	JS slideshow library
	(c) Barrie Robinson 2008
	
******************************************************************************************************************/

/* ======================== Helper functions ====================== */



// concatenates multiple path elements
function concatPaths() {
	var paths = concatPaths.arguments, path = '';
	
	for (var i = 0; i < paths.length; i++) {
		if (paths[i]) {
			if (path.length > 0) {
				var c1 = path.charAt(path.length - 1), c2 = paths[i].charAt(0);
				if (c1 != '/' && c1 != '\\' && c2 != '/' && c2 != '\\') {
					path += '/';
				}
			}
			
			path += paths[i];
		}
	}
	
	return path;
}

function setOpacity(element, opacity) {
	element.style["-moz-opacity"] = opacity; // mozilla
	element.style.filter = "alpha(opacity=" + opacity * 100 + ")"; // IE
	element.style.opacity = opacity; // other browsers, like Opera
}

function getMouseCoords(event) {
	var posX, posY;
	if (event.pageX || event.pageY) {
		posX = event.pageX;
		posY = event.pageY;
	} else if (event.clientX || event.clientY) {
		posX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		posY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	return {x: posX, y: posY};
}


var println = function(text) {
	document.getElementById("info").innerHTML += text + "<br />";
}


var slideshow = {
	ready: false,
	firstTime: true,
	// the point to switch slide;
	loadFromXML: function(xmlFilePath, containerId, type) {
		var xmlDoc;
		var loadCallback = function(xmlDoc) { 
			try {
				var configElement = xmlDoc.getElementsByTagName("config")[0];
				var strFlipFlop = configElement.getAttribute("flipflop");
				
				slideshow.config = {
					effect: configElement.getAttribute("effect"),
					width: configElement.getAttribute("width"),
					height: configElement.getAttribute("height"),
					containerId: containerId,
					displayTime: parseInt(configElement.getAttribute("displayTime")),
					transitionTime: parseInt(configElement.getAttribute("transitionTime")),
					buttons: configElement.getAttribute("buttons"),
					autoDirection: configElement.getAttribute("autoDirection"),
					noSpring: configElement.getAttribute("noSpring"),
					clipping: configElement.getAttribute("clipping"),
					wclipping: configElement.getAttribute("wclipping"),
					hclipping: configElement.getAttribute("hclipping"),
					
					basepath: configElement.getAttribute("basepath"),
					steps: configElement.getAttribute("steps"),
					direction: configElement.getAttribute("direction"),
					dragging: configElement.getAttribute("dragging"),
					
					flipflop: strFlipFlop ? strFlipFlop.split(",") : [6, 10, 17]
				};
				if (!slideshow.config.effect) slideshow.config.effect = "fade";
				if (!slideshow.config.displayTime) slideshow.config.displayTime = 2000;					
				if (!slideshow.config.transitionTime) slideshow.config.transitionTime = 500;
				

				// load the images
				var imgRows = xmlDoc.getElementsByTagName("img-row");
				slideshow.images = new Array();
				if (imgRows && imgRows.length) {
					for (var i = 0; i < imgRows.length; i++) {
						slideshow.images[i] = new Array();
							
						for (var j = 0, k = 0; j < imgRows[i].childNodes.length; j++) {
							if (imgRows[i].childNodes[j].tagName && imgRows[i].childNodes[j].tagName.toLowerCase() == "img") {
								slideshow.images[i][k++] = {
									src: concatPaths(slideshow.config.basepath, imgRows[i].getAttribute("basepath"), imgRows[i].childNodes[j].getAttribute("src")),
									title: imgRows[i].childNodes[j].getAttribute("title"),
									alt: imgRows[i].childNodes[j].getAttribute("alt"),
									href: imgRows[i].childNodes[j].getAttribute("href")
								}
							}
						}
					}
				} else {
					// didn't find any rows... try to get the img tags
					var img = xmlDoc.getElementsByTagName("img");
					slideshow.images[0][0] = new Array();
					
					for (var i = 0; i < img.length; i++) {
						slideshow.images[0][i] = {
							src: concatPaths(slideshow.config.basepath, imgRows[i].childNodes[j].getAttribute("src")),
							title: img[i].getAttribute("title"),
							alt: imgRows[i].childNodes[j].getAttribute("alt"),
							href: imgRows[i].childNodes[j].getAttribute("href")
						}
					}
				}
				slideshow.preloadImages();			    
			} catch (e) {
			    alert(e);
			}
		}	
		
		// try thorugh AJAX
		var xmlHttp;
		if(window.XMLHttpRequest) { // Firefox, Opera 8.0+, Safari
			xmlHttp = new XMLHttpRequest();
		} else { // Internet Explorer
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					return false;
				}
			}
		}
		
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4) {
				xmlDoc = xmlHttp.responseXML;
				if (!xmlDoc.documentElement && xmlHttp.responseStream) {
					xmlDoc.load(xmlHttp.responseStream);
				}
				loadCallback(xmlDoc);
			}
		}
		
		try {
			xmlHttp.open("GET", xmlFilePath, true);
			xmlHttp.send(null);
		} catch (e) {
			return false;
		}

	},
	
	preloadImages: function() {

		this.preloadImage("/images/arrow_up.gif");
		this.preloadImage("/images/arrow_down.gif");
		this.preloadImage("/images/arrow_left.gif");
		this.preloadImage("/images/arrow_right.gif");
		
	    // count the total images
        this.totalImage = 0;
	    for (var i = 0; i < this.images.length; i++) {
			for (var j = 0; j < this.images[i].length; j++) {
			    this.totalImage++;
			}
		}
		// cache the images
        this.imageLoaded = 0;
        for (var i = 0; i < this.images.length; i++) {
			for (var j = 0; j < this.images[i].length; j++) {
			    this.images[i][j].img = new Image();
			    $(this.images[i][j].img).addEvent("load", function() {
					this.imageLoaded++;			  
					if (this.onimageload!=null) {	
						this.onimageload(this.imageLoaded, this.totalImage);
					}
					if (this.imageLoaded == this.totalImage) {
						(function(){
							slideshow.start();				
							// IE 6 cursor flicker fix; has no effect in other browsers
							try {
								document.execCommand("BackgroundImageCache", false, true);
							} catch(e) {
							}
						}).delay(1250);
					}
			    }.bind(this));
			    this.images[i][j].img.src = this.images[i][j].src;		
			}
		}
	},
	// index of image in slide show;
	theIndex: 0,
	// reverses one by one the order of the elements in flipflop;
	reverse: function() {
		if (this.config.flipflop && this.config.flipflop.length) {
			var first = this.config.flipflop.shift();
			this.config.flipflop.push(first);
		}
	},
	preloadImage: function(imgSrc) {
		var img = new Image();
		img.src = imgSrc;
	},
	
	getUpStepPos: function () {
		var i = this.currentImgPos.i, j = this.currentImgPos.j;
		if (i == 0) {
			i = this.images.length - 1;
			j--;
			if (j < 0) {
				j = this.images[i].length - 1;
			}
		} else {
			i--;
		}
				
		return {i: i, j: j};
	},
	
	getDownStepPos: function () {
		var i = this.currentImgPos.i, j = this.currentImgPos.j;
		if (i == this.images.length - 1) {
			i = 0;
			j++;
		} else {
			i++;
		}
			
		if (j >= this.images[i].length) {
			j = 0;
		}
		
		return {i: i, j: j};
	},
	
	getBackwardsStepPos: function () {
		var i = this.currentImgPos.i, j = this.currentImgPos.j;
		if (j == 0) {
			i--;
			if (i < 0)
				i = this.images.length - 1;
			j = this.images[i].length - 1;  
		} else 
			j--;
		
		return {i: i, j: j};
	},
	
	getForwardStepPos: function () {
		var i = this.currentImgPos.i, j = this.currentImgPos.j;
		if (j == this.images[i].length - 1) {
			j = 0;  
			i = (i + 1) % this.images.length;
		} else 
			j++;
		
		return {i: i, j: j};
	},
	
	getNextImgPos: function () {
		var steps = this.config.steps ? this.config.steps.toLowerCase() : "on";
		
		if (steps == "on") {
			switch (this.slideDirection) {
			case 0: return this.getDownStepPos(this.currentImgPos);
			case 1: return this.getBackwardsStepPos(this.currentImgPos);
			case 2: return this.getUpStepPos(this.currentImgPos);
			case 3: return this.getForwardStepPos(this.currentImgPos);
			}
		} else {
			switch (this.slideDirection) {
			case 0: return this.getBottomImgPos(this.currentImgPos);
			case 1: return this.getLeftImgPos(this.currentImgPos);
			case 2: return this.getTopImgPos(this.currentImgPos);
			case 3: return this.getRightImgPos(this.currentImgPos);
			}
		}	
	},
	
	getTopImgPos: function (source) { 
		var i = (source.i == 0 ? this.images.length - 1 : source.i - 1);
		var j = (source.j >= this.images[i].length? this.images[i].length - 1 : source.j);
		return {i: i, j: j};
	},
	
	getLeftImgPos: function (source) {
		var i = source.i;
		var j = (source.j == 0 ? this.images[i].length - 1 : source.j - 1);
		return {i: i, j: j};
	},
	
	getBottomImgPos: function (source) {
		var i = (source.i + 1) % this.images.length;
		var j = source.j >= this.images[i].length? this.images[i].length - 1 : source.j;
		return {i: i, j: j};
	},
	
	getRightImgPos: function (source) {
		var i = source.i, j = source.j;
		j = (j == this.images[i].length - 1 ? 0  : j + 1);
		return {i: i, j: j};
	},
	
	start: function() {
		if (!this.config)
			return;
		var container = document.getElementById(this.config.containerId);
		if (!container) {
			// document may not have loaded yet; try later
			setTimeout("slideshow.start()", 300);
			return;
		}

		var clipping = this.config.clipping;		
		var wclipping = this.config.wclipping;
		if (wclipping == '') {
			wclipping = clipping;
		}
		var hclipping = this.config.hclipping;		
		if (hclipping == '') {
			hclipping = clipping;
		}
		var width = this.width = this.config.width ? this.config.width : container.offsetWidth;
		var height = this.height = this.config.height ? this.config.height : container.offsetHeight;
		container.style.width = wclipping;
		container.style.height = hclipping;

		this.currentImgPos = { i: 0, j: this.images[0].length - 1};
		
		this.config.slideDirection = 3;
		
		if (this.config.direction) {
			if (this.config.direction.toLowerCase() == "left") {
				this.config.slideDirection = 1;
			}
			
			if (this.config.direction.toLowerCase() == "right") {
				this.config.slideDirection = 3;
			}
			
			if (this.config.direction.toLowerCase() == "up") {
				this.config.slideDirection = 2;
			}
			
			if (this.config.direction.toLowerCase() == "down") {
				this.config.slideDirection = 0;
			}
		}
		
		this.slideDirection = this.config.slideDirection;
		this.nextImgPos = this.getNextImgPos();
		
		var effect = this.config.effect.toLowerCase();
		if (effect == "fade")
			this.initFadeMode();
		else
			if (effect == "pan" || effect == "drag" || effect == "slide" || effect == "off")
				this.initSlideMode();
			else
				this.initSwitchMode();
				
		if (effect == "slide") {
			this.config.displayTime = 0;
		}

		this.endTransition();
	},
	
	stop: function() {
		if (this.timeoutId) {
			clearTimeout(this.timeoutId);
		}
		
		if (this.transitionIntervalId) {
			clearInterval(this.transitionIntervalId);
			this.transitionIntervalId = null;
		}
		
		// NEW FUNCTION - FADE OUT WHATEVER IS BEING PLAYED and RESET IMAGE COUNT
		// since it's stoped, let's reset the image load counter
	    this.imageLoaded = 0;
	},

	getTitle: function() {
		infopanelContent = document.getElementById('infopanel').innerHTML;
		return infopanelContent;
	},

	createTitle: function(httitleRaw) {
		if ((httitleRaw != null) & (httitleRaw != '') & (httitleRaw != '') & (httitleRaw != '')) {
			var httitleStr = new String(httitleRaw);
			var httitleStr = httitleStr.split(' + ');
			var httitle = new Array();
			var i = 0;
			if (infoContent == 'on') {
				while (httitleStr[i] != null) {
					if (infoClass == "mp_infopanel") {
							if (i == 0) {
								httitle.push('<p class="mp_tip-title">'+ httitleStr[i] +'</p>');
								}
							if (i == 1) {
								httitle.push('<p class="mp_tip-subtitle">'+ httitleStr[i] +'</p>');
								}
							if (i == 2) {
								httitle.push('<p class="mp_tip-desc">' + httitleStr[i] + '</p>');
							}
							if (i == 3) {
								httitle.push('<p class="mp_tip-link"><a href="' + httitleStr[i] + '">' + httitleStr[i+1] + '</a></p>');
							}
							if (i == 5) {
								httitle.push('<p class="mp_tip-link"><a href="' + httitleStr[i] + '">' + httitleStr[i+1] + '</a></p>');
							}
					} else {

						if (i == 0) {
							httitle.push('<p class="tip-title">'+ httitleStr[i] +'</p>');
							}
						if (i == 1) {
							httitle.push('<p class="tip-subtitle">'+ httitleStr[i] +'</p>');
							}
						if (i == 2) {
							httitle.push('<p class="tip-desc">' + httitleStr[i] + '</p>');
						}
						if (i == 3) {
							httitle.push('<p class="tip-link"><a href="' + httitleStr[i] + '">' + httitleStr[i+1] + '</a></p>');
						}
						if (i == 5) {
							httitle.push('<p class="tip-link"><a href="' + httitleStr[i] + '">' + httitleStr[i+1] + '</a></p>');
						}
					}

					i++
					if ((i == 1) & (httitleStr[i] == null)) {
						httitle.push('</p>');
					}
				}
			}
			return httitle.join('');
		} else {
			return null;
		}
	},
	
	setNextSlide: function (pos) {
		var uniAddon = this.config.containerId;
		slideshow.nextImgPos = pos;
		document.getElementById("__slideshowNextImage"+uniAddon+"").style.backgroundImage = "url(" + slideshow.images[slideshow.nextImgPos.i][slideshow.nextImgPos.j].img.src + ")";
	},
		
	setCurrentSlide: function (pos) {
		var uniAddon = this.config.containerId;
		slideshow.currentImgPos = pos;
		document.getElementById("__slideshowCurrentImage"+uniAddon+"").style.backgroundImage = "url(" + slideshow.images[slideshow.currentImgPos.i][slideshow.currentImgPos.j].img.src + ")";
	},
	
	initFadeMode: function () {
		var container = document.getElementById(this.config.containerId);
		var infopanel = document.getElementById('infopanel');
		var thisalt = 'alt="' + this.images[this.currentImgPos.i][this.currentImgPos.j].alt + '"';
		var nextalt = 'alt="' + this.images[this.nextImgPos.i][this.nextImgPos.j].alt + '"';
		if ((infopanel != null) && (infoContent == 'on')) {
			objTooltip.SetText(this.images[this.nextImgPos.i][this.nextImgPos.j].title);
		}
		container.style.backgroundImage = "url(" + this.images[this.nextImgPos.i][this.nextImgPos.j].src + ")";
		
		setOpacity(container, 0);
		// have bug when using container.getStyle('opacity'), it return 1;
		container.realOpacity = 0;
		
		var width = this.width;
		var height = this.height;
		var clipping = this.config.clipping;		
		var wclipping = this.config.wclipping;
		if (wclipping == '') {
			wclipping = clipping;
		}
		var hclipping = this.config.hclipping;		
		if (hclipping == '') {
			hclipping = clipping;
		}
		var uniAddon = this.config.containerId;
	
		container.innerHTML = '<div style="position: absolute; overflow: hidden; width:'+wclipping+'; height:'+hclipping+'; ">' +
			'<div id="__slideshowNextImage'+uniAddon+'" ' + thisalt + ' style="width:' + width + 'px; height: ' + height + 'px; background-image: url(\'' + 
				this.images[0][0].src + '\'); position: absolute; z-index: 1000; filter: alpha(opacity=100)"></div>' +
			'<div id="__slideshowCurrentImage'+uniAddon+'" ' + nextalt + ' style="width:' + width + 'px; height:' + height + 'px; background-image: url(\'' + 
				this.images[0][0].src + '\'); position: absolute;  z-index: 1001; opacity: 0; filter: alpha(opacity=0)"></div></div>';
				
	},
	
	initSwitchMode: function () {
		var thisalt = 'alt="' + this.images[this.currentImgPos.i][this.currentImgPos.j].alt + '"';
		var infopanel = document.getElementById('infopanel');
		if ((infopanel != null) && (infoContent == 'on')) {
		    objTooltip.SetText(this.images[this.currentImgPos.i][this.currentImgPos.j].title);		    
		}
		var uniAddon = this.config.containerId;
		var container = document.getElementById(this.config.containerId);
		var width = this.width;
		var height = this.height;
		container.innerHTML = '<div id="__slideshowCurrentImage'+uniAddon+'" ' + thisalt + ' style="width:' + width + 'px; height:' + height + 'px; background-image: url(\'' + 
			this.images[this.currentImgPos.i][this.currentImgPos.j].src + '\'); position: absolute; z-index: 1001; filter: alpha(opacity=100)"></div>';
	},
	
	goLeft: function() { this.pan(1); },
	goRight: function() { this.pan(3); },
	goUp: function() { this.pan(2); },
	goDown: function() { this.pan(0); },
	panNumber: 0,
	panDirection: 0,
	// used for the arrow buttons in pan mode to change the current slide
	pan: function(newDirection) {
		var nextPos;
		var effect = slideshow.config.effect.toLowerCase();
		
		if (effect == "switch") {
			this.slideDirection = newDirection;
			this.setCurrentSlide(this.getNextImgPos());
			this.endTransition();
			return;
		}
		
		if (!this.inTransition) {
			if (this.timeoutId) {
				clearTimeout(this.timeoutId);
			}
			
			if (this.transitionIntervalId) {
				window.clearInterval(this.transitionIntervalId);
				this.transitionIntervalId = null;
			}
				
			this.slideDirection = newDirection;
			slideshow.setNextSlide(this.getNextImgPos());
			this.startTransition();
		} else {
			var dir = this.slideDirection;
			var dirAx = (dir == 0 || dir == 2 ? 'y' : 'x');
			var newDirAx = (newDirection == 0 || newDirection == 2 ? 'y' : 'x');
			
			if (dirAx != newDirAx) {
				// trying to move in a direction perpedincular to the current one, nothing to do, so exit
				return;
			}
			
			if (newDirection == dir) {
				if (this.panNumber == 0) {
					this.panAccelerateStartTime = (new Date()).getTime();
				}
				
				this.panNumber = 1;
				this.panDirection = newDirection;
				return;
			} else {
				this.panNumber = 0;
			}
			
			// stop any previous animation
			if (this.timeoutId) {
				clearTimeout(this.timeoutId);
			}
			
			if (this.transitionIntervalId) {
				window.clearInterval(this.transitionIntervalId);
				this.transitionIntervalId = null;
			}
				
			if (effect != "slide") {
			this.transition = (1 - (1 - this.transition) * (1 - this.transition) * (1 - this.transition));
				this.transition = (1 - this.transition);
				this.setTransition(1 - Math.pow(1 - this.transition, 1.0 / 3.0));
			} else {
				this.setTransition(1 - this.transition);
			}
			this.slideDirection = newDirection;
			var nextPos = this.nextImgPos;
			slideshow.setNextSlide(this.currentImgPos);
			slideshow.setCurrentSlide(nextPos);
			this.startTransition();
		}
	},

	initSlideMode: function() {
		var container = document.getElementById(this.config.containerId);
		var uniAddon = this.config.containerId;
		var infopanel = document.getElementById('infopanel');

		var height = this.height;
		var width = this.width;
		var clipping = this.config.clipping;		
		var hclipping = this.config.hclipping;		
		if (hclipping == '') {
			hclipping = clipping;
		}
		var wclipping = this.config.wclipping;
		if (wclipping == '') {
			wclipping = clipping;
		}
		var thisalt = this.images[this.currentImgPos.i][this.currentImgPos.j].alt;
		var nextalt = this.images[this.nextImgPos.i][this.nextImgPos.j].alt;
		var infopanelContent = this.getTitle();


		if ((infopanel != null) && (infoContent == 'on')) {
		    objTooltip.SetText((this.createTitle(this.images[this.currentImgPos.i][this.currentImgPos.j].title) + infopanelContent));
		}
		this.offset = 0;
		this.startTime = (new Date()).getTime();

		var innerHTML = '<div style="position: absolute; overflow: hidden; width: ' + width + 'px; height: ' + height + 'px; cursor: move; filter: alpha(opacity=100)" >' + 
			'<div id="__slideshowCurrentImage'+uniAddon+'" alt="' + thisalt + '" style="width:' + width + 'px; height:' + height + 'px; cursor: move; background-image: url(\'' + 
			this.images[this.currentImgPos.i][this.currentImgPos.j].src + 
			'\'); position: absolute; z-index: 1001; "></div>' + 
			'<div id="__slideshowNextImage'+uniAddon+'" alt="' + nextalt + '" style="width:' + width + 'px; height: ' + height + 'px; cursor: move; background-image: url(\'' + 
			this.images[this.nextImgPos.i][this.nextImgPos.j].src + 
			'\'); position: absolute; z-index: 1000" ></div>' + 
			
			'<div id="__slideshowAuxImage1'+uniAddon+'" style="width:' + width + 'px; height:' + height + 'px; cursor: move; background-image: url(\'' + 
			this.images[this.currentImgPos.i][this.currentImgPos.j].src + 
			'\'); position: absolute; z-index: 999; "></div>' + 
			'<div id="__slideshowAuxImage2'+uniAddon+'" style="width:' + width + 'px; height: ' + height + 'px; cursor: move; background-image: url(\'' + 
			this.images[this.nextImgPos.i][this.nextImgPos.j].src + 
			'\'); position: absolute; z-index: 998" ></div>' + 
			'<div id="__inputLayer'+uniAddon+'" style="position: absolute; width: ' + width + 'px; height: ' + height + 'px; z-index: 1009; cursor: move;"></div></a>';
			
		if (this.config.buttons) {
			var w = this.width, h = this.height;
			var uniAddon = this.config.containerId;
			var commonAttrib = ' onselectstart="javascript: return false;" onmousedown="javascript: return false"';
			
			var buttons = this.config.buttons.toLowerCase().split(/\W/);
			var left = false, right = false, up = false, down = false;
			for (var i = 0; i < buttons.length; i++) {
				if (buttons[i] == "all" || buttons[i] == "left") left = true;
				if (buttons[i] == "all" || buttons[i] == "right") right = true;
				if (buttons[i] == "all" || buttons[i] == "up") up = true;
				if (buttons[i] == "all" || buttons[i] == "down") down = true;
			}
			innerHTML += '<div id="buttons_'+uniAddon+'">';
	
			if (up) {
			    innerHTML += '<div id="button_up_'+uniAddon+'" onmouseover="$(this).tween(\'background-color\', \'#ff3000\')" onmouseout="$(this).tween(\'background-color\', \'#E0DFDA\')"><a href="#" title="move up" onclick="javascript: slideshow.pan(2)" ><img src="/images/arrow_up.gif" alt="Go up" id="arrowup" name="arrowup" width="21" height="21" hspace="0" vspace="0" border="0" align="top" /></a></div>';
			}
			
			if (left) {
			    innerHTML += '<div id="button_left_'+uniAddon+'" onmouseover="$(this).tween(\'background-color\', \'#ff3000\')" onmouseout="$(this).tween(\'background-color\', \'#E0DFDA\')"><a href="#" title="move left" onclick="javascript: slideshow.pan(1)" ><img src="/images/arrow_left.gif" alt="Go left" id="arrowleft" name="arrowleft" width="21" height="21" hspace="0" vspace="0" border="0" align="top" /></a></div>';
			}
				
			if (right) {
			    innerHTML += '<div id="button_right_'+uniAddon+'" onmouseover="$(this).tween(\'background-color\', \'#ff3000\')" onmouseout="$(this).tween(\'background-color\', \'#E0DFDA\')"><a href="#" title="move right" onclick="javascript: slideshow.pan(3)" ><img src="/images/arrow_right.gif" alt="Go right" id="arrowright" name="arrowright" width="21" height="21" hspace="0" vspace="0" border="0" align="top" /></a></div>';
			}
				
			if (down) {
			    innerHTML += '<div id="button_down_'+uniAddon+'" onmouseover="$(this).tween(\'background-color\', \'#ff3000\')" onmouseout="$(this).tween(\'background-color\', \'#E0DFDA\')"><a href="#" title="move down" onclick="javascript: slideshow.pan(0)" ><img src="/images/arrow_down.gif" alt="Go down" id="arrowdown" name="arrowdown" width="21" height="21" hspace="0" vspace="0" border="0" align="top" /></a></div>';
			}
		}
	
		innerHTML += '</div>';
		container.innerHTML = innerHTML;
		if (this.onContainerContentReady!=null) {
			this.onContainerContentReady(container);
		}
		
		if (this.config.dragging && (this.config.dragging.toLowerCase() == "yes" || this.config.dragging.toLowerCase() == "on" || 
			this.config.dragging.toLowerCase() == "true") ) {
			// disable select
			var uniAddon = this.config.containerId;
			var div = document.getElementById("__slideshowCurrentImage"+uniAddon+"");
			div.onselectstart = function () { return false; } // ie
			div.onmousedown = function () { return false; } // mozilla
			var div = document.getElementById("__inputLayer"+uniAddon+"");
			div.onselectstart = function () { return false; } // ie
			div.onmousedown = function () { return false; } // mozilla
			
			container = document.getElementById("__inputLayer"+uniAddon+"");
				
			container.onmousedown = function(event) {
				event = event ? event : window.event;
				slideshow.noFollowMouse = false;
				slideshow.mouseOver = true;
				slideshow.dragging = true;
				slideshow.wasDragged = true;
				slideshow.dragStart = getMouseCoords(event);
				if (slideshow.timeoutId) {
					clearTimeout(slideshow.timeoutId);
				}
				
				if (slideshow.transitionIntervalId) {
					window.clearInterval(slideshow.transitionIntervalId);
					slideshow.transitionIntervalId = null;
				}
				
				return false;
			}
			
			container.onmousemove = function(event) {
				if (!slideshow.dragging || slideshow.noFollowMouse)
					return;
					
				this.style.cursor = "move";
					
				event = event ? event : window.event;
	
				var currMouseCoords = getMouseCoords(event);
				
				var deltaX = currMouseCoords.x - slideshow.dragStart.x;
				var deltaY = currMouseCoords.y - slideshow.dragStart.y;

				if (!slideshow.inTransition) {
					var diff = Math.abs(Math.abs(deltaX) - Math.abs(deltaY));
					if (slideshow.config.effect.toLowerCase() == "pan" && diff < 10)
						return; // not enough pixel distance to judge the direction
					slideshow.inTransition = true;
					if (Math.abs(deltaX) > Math.abs(deltaY)) {	
						// horizontal dir
						slideshow.slideDirection = (deltaX > 0 ? 1 : 3);
						slideshow.transition = Math.abs(deltaX) / slideshow.width;
					} else {
						// horizontal dir
						slideshow.slideDirection = (deltaY > 0 ? 2 : 0);					
						slideshow.transition = Math.abs(deltaY) / slideshow.height;
					}
					slideshow.setNextSlide(slideshow.getNextImgPos());
					this.offset = 0;
				} else {
					if (slideshow.config.effect != "slide") {
						slideshow.transition = (1 - (1 - slideshow.transition) * (1 - slideshow.transition) * (1 - slideshow.transition));
					}
					/*if (slideshow.slideDirection == 1 || slideshow.slideDirection == 3)*/ {
						var dir = slideshow.slideDirection;
						var newDir = (dir == 1 || dir == 3 ? (deltaX > 0 ? 1 : 3) : (deltaY > 0 ? 2 : 0));
						var dist = (dir == 1 || dir == 3 ? Math.abs(deltaX) / slideshow.width : Math.abs(deltaY) / slideshow.height);
						if (slideshow.slideDirection == newDir) {
							slideshow.transition += dist;
						} else {
							/*if (dist < 5 / slideshow.height) {
								slideshow.transition = (1 - Math.pow(1 - slideshow.transition, 1.0 / 3.0));
								return;
							}*/
							slideshow.slideDirection = newDir;
							var cPos = slideshow.currentImgPos;
							slideshow.setCurrentSlide(slideshow.nextImgPos);
							slideshow.setNextSlide(cPos);
							slideshow.transition = (1 - (slideshow.transition)) + dist;
						}
						if (slideshow.config.effect.toLowerCase() == "drag") {
							slideshow.offset += (newDir == 1 || newDir == 3) ? deltaY : deltaX;
							
							if (slideshow.offset) {
								var totalDist = slideshow.slideDirection == 1 || slideshow.slideDirection == 3? slideshow.height : slideshow.width;
								if (Math.abs(slideshow.offset) > totalDist / 2) {
									switch (slideshow.slideDirection) {
									case 0: 
									case 2:
										if (slideshow.offset > 0) {
											slideshow.setCurrentSlide(slideshow.getLeftImgPos(slideshow.currentImgPos));
											slideshow.setNextSlide(slideshow.getLeftImgPos(slideshow.nextImgPos));
										} else {
											slideshow.setCurrentSlide(slideshow.getRightImgPos(slideshow.currentImgPos));
											slideshow.setNextSlide(slideshow.getRightImgPos(slideshow.nextImgPos));
										}
										break;
									case 1: 
									case 3:
										if (slideshow.offset > 0) {
											slideshow.setCurrentSlide(slideshow.getTopImgPos(slideshow.currentImgPos));
											slideshow.setNextSlide(slideshow.getTopImgPos(slideshow.nextImgPos));
										} else {
											slideshow.setCurrentSlide(slideshow.getBottomImgPos(slideshow.currentImgPos));
											slideshow.setNextSlide(slideshow.getBottomImgPos(slideshow.nextImgPos));
										}
										break;
									}
									slideshow.offset = slideshow.offset * 1 + totalDist * (slideshow.offset > 0 ? -1 : 1);	
								}
							}
						}
					}
				}
				
				while (slideshow.transition > 1) {
					slideshow.setCurrentSlide(slideshow.nextImgPos);
					slideshow.setNextSlide(slideshow.getNextImgPos());
					slideshow.transition -= 1;
				}
				
				
				if (slideshow.inTransition) {
					if (slideshow.config.effect != "slide") {
						slideshow.transition = (1 - Math.pow(1 - slideshow.transition, 1.0 / 3.0));
					}
					slideshow.showSlideTransition(uniAddon);
				}
					
				slideshow.dragStart = currMouseCoords;
			}

			container.onmouseout = function(event) {
				event = event ? event : window.event;
				var uniAddon1 = 'mediaplayer';
				var uniAddon2 = 'bgMedia';
				var rel = event.relatedTarget? event.relatedTarget : event.toElement;
				if (rel == document.getElementById("__slideshowNextImage"+uniAddon1+"") || rel == document.getElementById("__slideshowCurrentImage"+uniAddon1+"") || 
					rel == document.getElementById("__slideshowAuxImage1"+uniAddon1+"") || rel == document.getElementById("__slideshowAuxImage2"+uniAddon1+""))
					return;
				if (rel == document.getElementById("__slideshowNextImage"+uniAddon2+"") || rel == document.getElementById("__slideshowCurrentImage"+uniAddon2+"") || 
					rel == document.getElementById("__slideshowAuxImage1"+uniAddon2+"") || rel == document.getElementById("__slideshowAuxImage2"+uniAddon2+""))
					return;
				try {
					return this.onmouseup(event);
				} catch (e) {
					return this.onmouseup();
				}
			}
			
			container.onmouseup  = function(event) {
				event = event ? event : window.event;
				
				if (slideshow.dragging) {
					//finish drag transition, or restart the cycle by calling endTransition
					slideshow.dragging = false;
					if (slideshow.inTransition) {
						if (slideshow.config.effect != "slide") {
							slideshow.transition = (1 - (1 - slideshow.transition) * (1 - slideshow.transition) * (1 - slideshow.transition));
						}
						
						if (slideshow.config.effect.toLowerCase() == "drag" && slideshow.offset) {
							var totalDist = slideshow.slideDirection == 1 || slideshow.slideDirection == 3? slideshow.height : slideshow.width;
							if (Math.abs(slideshow.offset) > totalDist / 2) {
								switch (slideshow.slideDirection) {
								case 0: 
								case 2:
									if (slideshow.offset > 0) {
										slideshow.setCurrentSlide(slideshow.getLeftImgPos(slideshow.currentImgPos));
										slideshow.setNextSlide(slideshow.getLeftImgPos(slideshow.nextImgPos));
									} else {
										slideshow.setCurrentSlide(slideshow.getRightImgPos(slideshow.currentImgPos));
										slideshow.setNextSlide(slideshow.getRightImgPos(slideshow.nextImgPos));
									}
									break;
								case 1: 
								case 3:
									if (slideshow.offset > 0) {
										slideshow.setCurrentSlide(slideshow.getTopImgPos(slideshow.currentImgPos));
										slideshow.setNextSlide(slideshow.getTopImgPos(slideshow.nextImgPos));
									} else {
										slideshow.setCurrentSlide(slideshow.getBottomImgPos(slideshow.currentImgPos));
										slideshow.setNextSlide(slideshow.getBottomImgPos(slideshow.nextImgPos));
									}
									break;
								}
								slideshow.offset = slideshow.offset * 1 + totalDist * (slideshow.offset > 0 ? -1 : 1);	
							}
						}
						
						if (slideshow.transition < 0.5) {
							slideshow.slideDirection = (slideshow.slideDirection + 2) % 4;
							var cPos = slideshow.currentImgPos;
							slideshow.setCurrentSlide(slideshow.nextImgPos);
							slideshow.setNextSlide(cPos);
							slideshow.transition = (1 - (slideshow.transition));
						}
					
						if (slideshow.config.effect != "slide") {
							slideshow.transition = (1 - Math.pow(1 - slideshow.transition, 1.0 / 3.0));
						}
						slideshow.setTransition(slideshow.transition);
						//slideshow.doSlideTransition();
						
						if (slideshow.config.noSpring && (slideshow.config.noSpring.toLowerCase() == "on" || slideshow.config.noSpring.toLowerCase() == "yes")) {
							slideshow.noFollowMouse = true;
							slideshow.showSlideTransition(uniAddon);
						} else {
							slideshow.startSlideTransition();
						}
					} else {
						slideshow.endTransition();
					}
				}
				
				this.style.cursor = "move";
			}
		}
	},
	
	setTransition: function(level) {
		this.transition = level;
		var date = new Date();
		date.setTime(date.getTime() - Math.round(level * this.config.transitionTime));
		this.trStartTime = date;
	},
	
	startTransition: function() {
		var effect = this.config.effect.toLowerCase();
		
		if (effect == "off") {
			return;
		}
		
		if ((effect == "pan" || effect == "drag" || effect == "slide") && this.dragging)
			return;
		
		this.inTransition = true;
		this.setTransition(this.transition); // setTransition also sets the start clock
		
		if (effect == "fade") {
			this.doFadeTransition();
		} else {
			if (effect == "pan" || effect == "drag" || effect == "slide") {
				this.startSlideTransition();
			} else {
				this.doSwitchTransition();
			}
		}
	},
	
	endTransition: function() {
		this.inTransition = false;
		this.offset = 0;
		this.transition = 0;
		
		if (this.timeoutId) {
			clearTimeout(this.timeoutId);
			this.timeoutId = null;
		} 
		
		if (this.transitionIntervalId) {
			clearInterval(this.transitionIntervalId);
			this.transitionIntervalId = null;
		}
		
		if (this.panNumber) {
			this.panNumber--;
			this.pan(this.panDirection);
		} else {	
			if (!this.config.autoDirection || this.config.autoDirection.toLowerCase()  != "off") {
				if (this.firstTime) {
					this.startTransition();
					this.firstTime = false;
				} else {
					this.timeoutId = setTimeout("slideshow.startTransition()", this.config.displayTime);
				}
			}
		}
	},
	
	doFadeTransition: function() {
		var uniAddon = this.config.containerId;
		var container = document.getElementById(uniAddon);
		var time = 12, transition;
		
		// for first time, only fade in container;
		if (container.realOpacity < 1) {
			transition = 2 * ((new Date()).getTime() - this.trStartTime.getTime()) / this.config.transitionTime;
			(transition > 1) && (transition = 1);
			setOpacity(container, transition);
			container.realOpacity = transition;
			this.timeoutId = setTimeout(function(){slideshow.doFadeTransition()}, time);
			return;
		}
		
		
		// fade image;
		slideshow.ready = true;
		var currentImg = document.getElementById("__slideshowCurrentImage"+uniAddon+"");
		var infopanel = document.getElementById('infopanel');
		if ((infopanel != null) && (infoContent == 'on')) {
		    objTooltip.SetText(this.createTitle(this.images[this.nextImgPos.i][this.nextImgPos.j].title));
		}
		
		if (this.transition < 1) {
			// do transition
			setOpacity(currentImg, 1 - this.transition);
			this.transition = ((new Date()).getTime() - this.trStartTime.getTime()) / this.config.transitionTime;
			(this.transition > 1) && (this.transition = 1);
			this.timeoutId = setTimeout(function(){slideshow.doFadeTransition()}, time);
		} else {
			/*
			//TOTO: to latter;
			// do switch slide show;
			if (this.config.flipflop && this.config.flipflop[0]) {
				this.theIndex ++;
				if (this.theIndex % this.config.flipflop[0] == 0) {
					slideshow.config.effect = 'slide';
					this.reverse();
					this.start();
					// set next point at first of flipflop array;
					return;
				}
			} 
			*/
			// finish transition
			this.setCurrentSlide(this.nextImgPos);
			this.slideDirection = this.config.slideDirection;
			this.setNextSlide(this.getNextImgPos());
			setOpacity(currentImg, 1);
			this.endTransition();
		}
	},
	
	doSwitchTransition: function() {
		var infopanel = document.getElementById('infopanel');
		if ((infopanel != null) && (infoContent == 'on')) {
		    objTooltip.SetText(this.createTitle(this.images[this.nextImgPos.i][this.nextImgPos.j].title));
		}
			
		if (!this.transition) {
			// start transition
		} 
		
		if (this.transition < 1) {
			if (this.transition < 0.5) {
				this.setTransition(0.5);
				this.timeoutId = setTimeout("slideshow.doSwitchTransition()", this.config.transitionTime / 2);
			} else {
				this.setTransition(1);
				this.timeoutId = setTimeout("slideshow.doSwitchTransition()", this.config.transitionTime / 2);
			}
		} else {
			
			
			// finish transition
			this.setCurrentSlide(this.nextImgPos);
			this.slideDirection = this.config.slideDirection;
			this.nextImgPos = this.getNextImgPos();
			this.endTransition();
		}
	
	},

	startSlideTransition: function() {

		slideshow.doSlideTransition();
		this.transitionIntervalId = setInterval("slideshow.doSlideTransition()", 12);
	},
	
	doSlideTransition: function() {
		
		var infopanel = $('infopanel');
		if ((infopanel != null) && (infoContent == 'on')) {
			objTooltip.SetText(this.createTitle(this.images[this.nextImgPos.i][this.nextImgPos.j].title));
		}

		if (!this.nextImgPos) 
			return;
		var uniAddon = this.config.containerId;
		var currentImgDiv = document.getElementById("__slideshowCurrentImage"+uniAddon+"");
		var nextImgDiv = document.getElementById("__slideshowNextImage"+uniAddon+"");
		
		if (this.dragging) 
			return;
		
		if (!this.transition) {
			// init slide transition
		} 
			
		if (this.transition < 1) {
			// do transition
			this.frameNum++;
			var time = 12;
			var t;
			
			/*if (!this.panNumber) {
				t = (new Date()).getTime() - this.trStartTime.getTime();
			} else {
				if (this.panAccelerateStartTime > this.trStartTime.getTime()) {
					t = ((new Date()).getTime() - this.panAccelerateStartTime) * 5 +
						(this.panAccelerateStartTime - this.trStartTime.getTime());
				} else {
					t = ((new Date()).getTime() - this.trStartTime.getTime()) * 5;
				}
			}*/
			
			t = (new Date()).getTime() - this.trStartTime.getTime();
			
			if (this.config.effect.toLowerCase() == "slide" && !this.wasDragged && (new Date()).getTime() - this.startTime < this.config.transitionTime * 2) {
				this.transition = ((t * t) / (4 * (this.config.transitionTime * this.config.transitionTime)));
				if (this.transition < 0) this.transition = 0;
			} else {
				if (!this.panNumber) {
					var lt = 1 - Math.pow(1 - this.transition, 3);
					this.transition = (t) / this.config.transitionTime;
					var nt = 1 - Math.pow(1 - this.transition, 3);
					this.offset = this.offset - this.offset / (1 - lt) * (nt - lt);
				} else {
					this.transition = ((new Date()).getTime() - this.panAccelerateStartTime) / this.config.transitionTime * 3 +
						1 - Math.pow(1 - (this.panAccelerateStartTime - this.trStartTime.getTime()) / this.config.transitionTime, 3);
				}
			}

			if (this.transition > 1) {
				this.transition = 1;
			}

			this.showSlideTransition(uniAddon);
		} else {
			/*
			//TOTO: to latter;
			// do switch fade show;
			if (this.config.flipflop && this.config.flipflop[0]) {
				this.theIndex ++;
				if (this.theIndex % this.config.flipflop[0] == 0) {
					slideshow.config.effect = 'fade';
					this.reverse();
					this.start();
					// set next point at first of flipflop array;
					return;
				}
			}
			*/
			// finish transition
			this.setCurrentSlide(this.nextImgPos);
			currentImgDiv.style.top = "0px";
			currentImgDiv.style.left = "0px";
			this.slideDirection = this.config.slideDirection;
			if (this.slideDirection == undefined) {
				this.slideDirection = 3;
			}
			this.setNextSlide(this.getNextImgPos());
			
			nextImgDiv.style.top = "0px";
			nextImgDiv.style.left = "0px";
			
			this.endTransition();
		}
	},
	
	showSlideTransition: function(uniAddon) {
		if (uniAddon == null) {
			var uniAddon = 'mediaplayer';
		} else {
			var uniAddon = uniAddon;
		}
		var currentImgDiv = document.getElementById("__slideshowCurrentImage"+uniAddon+"");
		var nextImgDiv = document.getElementById("__slideshowNextImage"+uniAddon+"");
		
		var aux1 = document.getElementById("__slideshowAuxImage1"+uniAddon+"");
		var aux2 = document.getElementById("__slideshowAuxImage2"+uniAddon+"");
		
		var t;
		
		if (this.config.effect == "slide" || this.panNumber) {
			t = this.transition;
		} else {
			t = 1 - (1 - this.transition) * (1 - this.transition) * (1 - this.transition);
		}
		
		var yDist = Math.floor((1 - t) * this.height);
		var xDist = Math.floor((1 - t) * this.width);
		
		if (!this.aux1ImgPos) {
			this.aux1ImgPos = {i: 0, j: 0};
		}
		
		if (!this.aux2ImgPos) {
			this.aux2ImgPos = {i: 0, j: 0};
		}
		
		if (!this.offset) {
			aux1.style.display = 'none';
			aux2.style.display = 'none';
		} else {
			aux1.style.display = 'block';
			aux2.style.display = 'block';		
		}
		
		var p1, p2;
		
		switch (this.slideDirection) {
			case 0: // up
				currentImgDiv.style.top = (yDist - this.height) + "px";
				nextImgDiv.style.top = yDist + "px";
				
				if (this.offset) {
					currentImgDiv.style.left = (this.offset) + "px";
					nextImgDiv.style.left = this.offset + "px";
					aux1.style.top = (yDist - this.height) + "px";
					aux2.style.top = yDist + "px";
				}
				
				if (this.offset > 0) {
					aux1.style.left = (this.offset - this.width) + "px";
					aux2.style.left = (this.offset - this.width) + "px";
					p1 = this.getLeftImgPos(this.currentImgPos);
					p2 = this.getLeftImgPos(this.nextImgPos);
				} else 
					if (this.offset < 0) {
						aux1.style.left = (this.offset * 1 + this.width * 1) + "px";
						aux2.style.left = (this.offset * 1 + this.width * 1) + "px";
						p1 = this.getRightImgPos(this.currentImgPos);
						p2 = this.getRightImgPos(this.nextImgPos);				
					}
				
				break;
				
			case 1: // left
				currentImgDiv.style.left = (this.width - xDist) + "px";
				nextImgDiv.style.left = (- xDist) + "px";
				
				if (this.offset) {
					currentImgDiv.style.top = (this.offset) + "px";
					nextImgDiv.style.top = this.offset + "px";	
					aux1.style.left = (this.width - xDist) + "px";
					aux2.style.left = (- xDist) + "px";
				}
				
				if (this.offset > 0) {
					aux1.style.top = aux2.style.top = (this.offset - this.height) + "px";
					p1 = this.getTopImgPos(this.currentImgPos);
					p2 = this.getTopImgPos(this.nextImgPos);
				} else 
					if (this.offset < 0) {
						aux1.style.top = aux2.style.top = (this.offset * 1 + this.height * 1) + "px";
						p1 = this.getBottomImgPos(this.currentImgPos);
						p2 = this.getBottomImgPos(this.nextImgPos);				
					}
				
				break;
				
			case 2: // down
				currentImgDiv.style.top = (this.height - yDist) + "px";
				nextImgDiv.style.top = (- yDist) + "px";
				
				if (this.offset) {
					currentImgDiv.style.left = (this.offset) + "px";
					nextImgDiv.style.left = this.offset + "px";
					aux1.style.top = (this.height - yDist) + "px";
					aux2.style.top = (- yDist) + "px";
				}
				
				if (this.offset > 0) {
					aux1.style.left = aux2.style.left = (this.offset - this.width) + "px";
					p1 = this.getLeftImgPos(this.currentImgPos);
					p2 = this.getLeftImgPos(this.nextImgPos);
				} else 
					if (this.offset < 0) {
						aux1.style.left = aux2.style.left = (this.offset * 1 + this.width * 1) + "px";
						p1 = this.getRightImgPos(this.currentImgPos);
						p2 = this.getRightImgPos(this.nextImgPos);				
					}
				break;
				
			case 3: // right
				currentImgDiv.style.left = (xDist - this.width) + "px";
				nextImgDiv.style.left = (xDist) + "px";
					
				if (this.offset) {
					currentImgDiv.style.top = (this.offset) + "px";
					nextImgDiv.style.top = this.offset + "px";				
					aux1.style.left = (xDist - this.width) + "px";
					aux2.style.left = (xDist) + "px";
				}
				
				if (this.offset > 0) {
					aux1.style.top = aux2.style.top = (this.offset - this.height) + "px";
					p1 = this.getTopImgPos(this.currentImgPos);
					p2 = this.getTopImgPos(this.nextImgPos);
				} else 
					if (this.offset < 0) {
						aux1.style.top = aux2.style.top = (this.offset * 1 + this.height * 1) + "px";
						p1 = this.getBottomImgPos(this.currentImgPos);
						p2 = this.getBottomImgPos(this.nextImgPos);				
					}
				
				break;
		}
			
		if (p1 && (p1.i != this.aux1ImgPos.i || p1.j != this.aux1ImgPos.j)) {
			this.aux1ImgPos = p1;
			aux1.style.backgroundImage = 'url(' + this.images[p1.i][p1.j].src + ')';
		}
		
		if (p2 && (p2.i != this.aux2ImgPos.i || p2.j != this.aux2ImgPos.j)) {
			this.aux2ImgPos = p2;
			aux2.style.backgroundImage = 'url(' + this.images[p2.i][p2.j].src + ')';
		}
	},
	
	config: null, // object wich contains configuration data
    images: null, // image matrix; images[i][j] is image j from row i
    onimageload: null, // call back function when an image has loaded
    onContainerContentReady : null //call back function when container content is set
};


    var ToolTip = new Class({
		initialize: function(){
			this.infopanel = $("infopanel");
			if (!this.infopanel) return;
			infoClass = $('infopanel').get('class');
			this.infopanel.setStyle("display", "block");
			this.infopanel.setStyle("opacity", "0");
			this.textPanel = $("tip-text");
			this.fadeInEffect = new Fx.Tween(this.infopanel,{
				duration: "short"
			});
			this.fadeOutEffect = new Fx.Tween(this.infopanel, {
				duration: "long",
				onComplete: function(){
					this.infopanel.setStyle("display", "none");
				}.bind(this)
			});
			this.status = "";
			var slidePanel;
			if (SiteDepth == 'content') {
				slidePanel = $$($("mediaplayer"), $("infopanel"));
			} else {
				slidePanel = $$($("bgMedia"), $("infopanel"));
			}
			var timeout = 0;
			slidePanel && slidePanel.addEvents({
				"mousemove": function(event){
					if (!slideshow.ready) return;
					this.SetStatus("mousein");
		//		    this.SetPosition(event);		    
				}.bind(this),
				"mouseover": function(event){
					if (!slideshow.ready) return;
					// fade in
					if (timeout) clearTimeout(timeout);
					this.SetStatus("mousein");
		//		    this.SetPosition(event);
					if (this.VerifyShowTip()){
						this.FadeIn();
					}
				}.bind(this),
				"mouseout": function(event){
					// fade out
					var oThis = this;
					timeout = setTimeout(function() {
						oThis.SetStatus("mouseout");
						oThis.FadeOut();
					}, 125);
				}.bind(this)
			});
		},
		SetText: function(value){
			this.html = value;	 
			// only set the html to display when not empty value comes in
			if($chk(value)){
				this.textPanel.set("html", value);
			}
			if($chk(value) && this.status == "mousein"){
				// show infopanel
				if (infoContent == 'on') {
					this.FadeIn();
				}
			}else{
				// hide infopanel
				this.FadeOut();
			}
		},
		VerifyShowTip: function(){
			return $chk(this.html);
		},
		FadeIn: function(){
			// don't fade in when already visible or text is empty
			//this.fadeInEffect.cancel();
			this.fadeOutEffect.cancel();
			this.infopanel.setStyle("display", "block");
			if (infoClass == "mp_infopanel") {
				this.fadeInEffect.start("opacity", .75);
			} else {
				this.fadeInEffect.start("opacity", 1);
			}
		},
		FadeOut: function(){
			/*
			// only fade out when is visible
			if(this.GetOpacity()==0){
			return;
			}
				*/
			this.fadeInEffect.cancel();
			//this.fadeOutEffect.cancel();
			this.fadeOutEffect.start("opacity", 0);
		},

		/* MOUSE TOOLTIP
		SetPosition: function(event){
			// only set position when it is still visible
			var mouseEvent = new Event(event);
			var mouseX = mouseEvent.page.x;
			var mouseY = mouseEvent.page.y;
			this.infopanel.setStyle("left", mouseX + 20 + "px");
			this.infopanel.setStyle("top", mouseY - 275 + "px");
		},

		RIGHT PANEL


		SetPosition: function(event){
			// only set position when it is still visible
			var mouseEvent = new Event(event);
			this.infopanel.setStyle("right", 0 + "px");
			this.infopanel.setStyle("top", 50 + "px");
		},

		*/

		GetOpacity: function(){
			var opacity = this.infopanel.getStyle("opacity").toInt();
			return opacity;
		},
		SetStatus: function(value){
			this.status = value;
		}
    });
	
	window.addEvent('domready', function(){	    
	    objTooltip = new ToolTip();	
	});


	// FROM header_en.html

	var ua = navigator.userAgent.toLowerCase();
	var isIE = (/msie/.test(ua)) && !(/opera/.test(ua)) && (/win/.test(ua));
	var style = document.styleSheets[document.styleSheets.length - 1];
	
	if (isIE) {
		if (style.addRule) {
			try {
				if (getURLVar("slideshow") != 'off' && mediatestate == 'on') {
					style.addRule("#display", "visibility: hidden");
				}
			} catch(e) {
				//alert(e.message);
			}
		}
	}