dojo.addOnLoad(function(){
	var display = function(galleryEl){
		var upEl = dojo.query('.tx_mobi_pi5-previous',galleryEl)[0];
		var downEl = dojo.query('.tx_mobi_pi5-next',galleryEl)[0];
		var detailEl = dojo.query('.tx_mobi_pi5-detail',galleryEl)[0];
		var innerEl = document.createElement('div');
		var outerEl = dojo.query('.tx_mobi_pi5-images',galleryEl)[0];
		var outerWidth = dojo.marginBox(outerEl).w;
		var ulEl = dojo.query('ul',outerEl)[0];
		var selectedImgEl = null;
		var selectImage = function(imgEl){
			dojo.addClass(imgEl,'tx_mobi_pi5-act');
			var anim = dojo.fadeOut({ node: detailEl, duration: 1000 });
			anim.onEnd = function(){
				if(selectedImgEl){
					dojo.removeClass(selectedImgEl,'tx_mobi_pi5-act');
					var largeImgEl = detailEl.getElementsByTagName('img')[0];
					var legendEl = detailEl.getElementsByTagName('span')[0];
					
					largeImgEl.onload = function(){
						legendEl.innerHTML = imgEl.legend;
						selectedImgEl = imgEl;
						var anim = dojo.fadeIn({ node: detailEl, duration: 1000 });
						anim.play();
					};
					largeImgEl.src = imgEl.large;
				}else{
					$content = '<img src="'+imgEl.large+'" />';
					$content += '<span>'+imgEl.legend+'</span>';
					detailEl.innerHTML = $content;
					selectedImgEl = imgEl;
					var anim = dojo.fadeIn({ node: detailEl, duration: 1000 });
					anim.play();
				}
			}
			anim.play();
		};
		this.layout = function(){
			var left = 0;
			while(ulEl.firstChild){
				var node = ulEl.firstChild;
				var imgEl = null;
				var isTag = (node.tagName&&node.tagName.toUpperCase()=='LI');
				var tempLeft = 0;
				if(isTag){
					imgEl = dojo.query('img.tx_mobi_pi5-small',node)[0];
					var spanEls = dojo.query('span',node);
					imgEl.small = imgEl.src;
					imgEl.large = spanEls[1].innerHTML;
					imgEl.legend = spanEls[0].innerHTML;
					tempLeft = dojo.marginBox(imgEl).w;
					dojo.connect(imgEl,'onclick',function(e){
						var imgEl = e.target;
						selectImage(imgEl);
					});
				}
				ulEl.removeChild(node);
				if(isTag){
					innerEl.appendChild(imgEl);
					imgEl.style.position = 'absolute';
					imgEl.style.top = '0';
					imgEl.style.left =  left+'px';
					left += tempLeft;
				}
			}
			outerEl.removeChild(ulEl);
			outerEl.appendChild(innerEl);
			selectImage(innerEl.firstChild);
		}
		this.playNext = function(){
			if( isPlaying ) return;
			keepPlaying = true;
			isPlaying = true;
			var firstAEl = innerEl.firstChild;
			var lastAEl = innerEl.lastChild;
			var width = dojo.marginBox(firstAEl).w;
			var anim = dojo.animateProperty({ 
				node: innerEl, 
				duration: 750,
				properties: { 
					left: { start: dojo.marginBox(innerEl).l, end: dojo.marginBox(innerEl).l-width }
				} 
			});
			anim.onEnd = function(){
				dojo.place(firstAEl,innerEl,'last');
				firstAEl.style.left = (dojo.marginBox(lastAEl).l+dojo.marginBox(lastAEl).w)+'px';
				isPlaying = false;
				if(keepPlaying) self.playNext();
			};
			anim.play();
		}
		this.playPrevious = function(){
			if( isPlaying ) return;
			keepPlaying = true;
			isPlaying = true;
			var firstAEl = innerEl.firstChild;
			var lastAEl = innerEl.lastChild;
			dojo.place(lastAEl,innerEl,'first');
			var width = dojo.marginBox(lastAEl).w;
			lastAEl.style.left = (dojo.marginBox(firstAEl).l-width)+'px';
			var anim = dojo.animateProperty({ 
				node: innerEl, 
				duration: 750,
				properties: { 
					left: { start: dojo.marginBox(innerEl).l, end: dojo.marginBox(innerEl).l+width }
				} 
			});
			anim.onEnd = function(){
				isPlaying = false;
				if(keepPlaying) self.playPrevious();
			};
			anim.play();
		}
		var self = this;
		this.layout();
		innerEl.style.position = 'absolute';
		innerEl.style.top = '0';
		innerEl.style.left = '0';
		innerEl.style.width = outerWidth +'px';
		if(innerEl.childNodes.length<3){
			upEl.style.display='none';
			downEl.style.display='none';
		}
		//var imageHeight = dojo.marginBox(innerEl.firstChild).h;
		//outerEl.style.width = imageHeight * 3+'px';
		var isPlaying = false;
		var keepPlaying = false;
		dojo.connect(upEl,'onmouseover',function(){
			dojo.addClass(upEl,'gallery-up-act');
			dojo.removeClass(upEl,'gallery-up');
			self.playPrevious();
		});
		dojo.connect(upEl,'onmouseout',function(){
			keepPlaying = false;
			dojo.addClass(upEl,'gallery-up');
			dojo.removeClass(upEl,'gallery-up-act');
		});
		dojo.connect(downEl,'onmouseover',function(){
			dojo.addClass(downEl,'gallery-down-act');
			dojo.removeClass(downEl,'gallery-down');
			self.playNext();
		});
		dojo.connect(downEl,'onmouseout',function(){
			keepPlaying = false;
			dojo.addClass(downEl,'gallery-down');
			dojo.removeClass(downEl,'gallery-up-down');
		});
	}
	var galleryEls = dojo.query('.tx_mobi_pi5');
	for(var i=0;i<galleryEls.length;i++){
		display(galleryEls[i]);
	}
});
function debug(message){
	dojo.byId('main').innerHTML += message+'<br/>';
}