var StatusWindow = Class.create();
StatusWindow.prototype = {
	initialize: function(element) {
		this.element = element;
		this.currentStatus = false;
		this.loadingEffect = null;
	},
	set: function(title) {
		if (title) {
			//$('statusFrame').innerHTML=title;
			if (this.loadingEffect&&this.currentStatus) {
				return;
			} else if (this.loadingEffect) {
				this.loadingEffect.cancel();
				this.loadingEffect = null;
			}
			this.currentStatus = true;
			instance = this;
			this.loadingEffect = Effect.Appear('statusFrame', {
					duration: 0.5,
					from: 0.1,
					to: 0.5,
					afterFinish: function() {
						instance.loadingEffect = null;
					}
				}
			);
		} else {
			if (this.loadingEffect&&!this.currentStatus) {
				return;
			} else if (this.loadingEffect) {
				this.loadingEffect.cancel();
				this.loadingEffect = null;
			}
			this.currentStatus = false;
			Element.setStyle($('statusFrame'), {'display': 'none'});
		}
	}
}
var currentStatus = new StatusWindow();

function getXMLNode(xmldoc, key) {
	arr = xmldoc.getElementsByTagName(key);
	if (arr.length == 1) {
		if (!arr[0].firstChild)
			return '';
		return arr[0].firstChild.data;
	}
	return '';
}


var SlideShow = {
	current: null,
	next: null,
	previous: null,
	loadTimer: null,
	images: 666,
	itemid: -1,
	frame: 0,
	slide: 'now',
	autoSlide: true,
	start: function(count, itemid, pid, file, w, h, title, link) {
		slideshow = this;
		Element.setStyle($('ieCrap'), {'text-align':'left'});
		this.images = count;
		this.itemid = itemid;
		link = document.location.href.split('#');
		this.slide = 'now';
		$('autoAdvance').checked = true;
		Event.observe(document, 'keypress', function(event){
				if(event.keyCode == Event.KEY_RIGHT) {
					slideshow.onNext();
				} else if(event.keyCode == Event.KEY_LEFT) {
					slideshow.onPrev();
				}
			}
		);

		if (link && link[1] && link[1] != pid) {
			this.gotoImage(link[1]);
		} else {
			this.preloadFrame(1, pid, file, w, h, title, link);
		}
	},
	preloadFrame: function(count, id, file, w, h, title, link) {
		slideShow = this;
		currentStatus.set("Loading file: " + file);
		this.next = new Image();
		this.next.src=file;
		this.next.id = id;
		this.next.count = count;
		this.next.title = title;
		this.next.link = link;
		this.next.w = w;
		this.next.h = h;
		clearTimeout(this.onLoadTimer);
		this.onLoadTimer = setTimeout(function() { this.onLoadTimeout() }.bind(this) ,2000);
		this.next.onload = function() {
			clearTimeout(slideShow.onLoadTimer);
			currentStatus.set();
			slideShow.onFrameLoaded();
		};
	},
	onFrameLoaded: function() {
		if (this.slide == 'auto') {
			if (this.autoSlide) {
				this.slide = 'delay';
			} else {
				this.slide = 'none';
			}
		}

		if (this.slide == 'now') {
			if (this.autoSlide) {
				this.slide = 'none';
			} else {
				this.slide = 'delay';
			}
			slideShow.swap();
		} else if (this.slide == 'delay') {
			this.onLoadTimer = setTimeout(function() { this.swap() }.bind(this) ,5000);
		} else {
		}
	},
	onLoadTimeout: function() {
		clearTimeout(this.onLoadTimer);
		this.onFrameLoaded();
		//slideShow.swap();
		//this.displayPhoto(this.next.count, this.next.id, this.next.src, this.next.w, this.next.h, this.next.title, this.next.link);
	},
	swap: function() {
		nframe = this.frame==0?1:0;
		if (this.current) {
			Effect.Fade('canvas'+this.frame, {duration:2, from:1.0, to:0.0});
		}
		$('canvas'+nframe).style.zIndex++;
		$('canvas'+nframe).innerHTML = this.makeImage(this.next);
		Effect.Appear('canvas'+nframe, {duration:2, from:0.0, to:1.0});
		this.old = this.current;
		this.current = this.next;
		this.frame = nframe;
		$('number').innerHTML = this.current.count + " / " + this.images;
		document.location = "#" + this.current.id;
		this.loadTimer = setTimeout(function() { this.frameDisplayed() }.bind(this) ,1000);
		//this.frameDisplayed();
	},
	frameDisplayed: function() {
		this.slide = 'auto';
		this.internalLoad('slide-next', this.current.id);
	},
	loadNext: function() {
		this.slide = 'none';
		this.internalLoad('slide-next', this.current.id);
	},
	onNext: function() {
		this.slide = 'now';
		this.internalLoad('slide-next', this.current.id);
	},
	onPrev: function() {
		this.slide = 'now';
		this.internalLoad('slide-prev', this.current.id);
	},
	gotoImage: function(id) {
		this.slide = 'now';
		this.internalLoad('slide-show', id);
	},
	internalLoad: function(mode, id) {
		slideshow = this;
		clearTimeout(this.loadTimer);
		currentStatus.set('Loading: Image data');
		var xmlHttp= new Ajax.Request(nnph_ajax_root +  'ajax/item/'+this.itemid + '/' + mode + '/'+id+'/',
			{	method: "get",
				parameters: '',
				onComplete:function(request){
					var xmldoc = request.responseXML;
					var id = getXMLNode(xmldoc, 'id');
					var count = getXMLNode(xmldoc, 'count');
					var file = getXMLNode(xmldoc, 'file');
					var title = getXMLNode(xmldoc, 'title');
					var link = getXMLNode(xmldoc, 'link');
					var w = getXMLNode(xmldoc, 'w');
					var h = getXMLNode(xmldoc, 'h');
					slideshow.preloadFrame(count, id, file, w, h, title, link);
				}
			}
		);
	},
	makeImage: function(image){
		var tempcontainer=image.link!=""? '<a href="'+image.link+'">' : "";
		tempcontainer += '<div id="imageShadow" style="background: url(' + nnph_helper_root + 'frame-' + image.w + '-' + image.h + '.png) no-repeat; padding-top: 3px; padding-left: 3px; padding-bottom: 7px; padding-right: 7px; width: ' + (parseInt(image.w)+10) + 'px; height: ' + (parseInt(image.h)+10) + 'px; margin-left: auto;margin-right: auto;">'
		tempcontainer += '<div id="imageWrapperX" class="imageWrapper" style="width: '+image.w+'px; height: ' + image.h + 'px;">';
		tempcontainer += '<img src="'+image.src+'" border="0">';
		tempcontainer += '</div>';
		tempcontainer += '</div>';
		tempcontainer=image.link!=""? tempcontainer+'</a>' : tempcontainer;
		return tempcontainer;
	},
	toggleAdvance: function(object) {
		if (object.checked) {
			this.autoSlide = true;
			clearTimeout(this.onLoadTimer);
			this.onLoadTimer = setTimeout(function() { this.swap() }.bind(this) ,5000);
		} else {
			this.autoSlide = false;
			clearTimeout(this.onLoadTimer);
		}
	}
}