// TODO:
// - move all element references behind a per-instance element id
// - consider what happens if an option is left out
// - fail gracefully if GSIV not available
// - clean up php variables, including client urls which should be options
// - $SITE_URLPATH

ss = new Object;

function xpslideshow(elem) {
	this.elem = elem;
	this.curtag = -1;
	this.curtagindex = -1;
	this.ssinterval = 0;
	this.capmode = "auto";
	this.captimerID = 0;
	ss[this.elem.id] = this;
/* jQuery.dump(ss); */
}

xpslideshow.prototype = {
	init : function(options) {
		this.curimage = options.image_id;
		this.userid = options.user_id;
		this.show_tags = options.show_tags;
		this.show_order_links = options.show_order_links;
		this.show_slideshow_controls = options.show_slideshow_controls;
		this.speed = options.speed != undefined ? options.speed : 5000;
		this.urlPrefix = options.urlPrefix != undefined ? options.urlPrefix : "";
		this.image_host = options.image_host != undefined ? options.image_host : "";
		if (this.image_host != '') this.image_host = "http://" + this.image_host;

		this.elem.className += this.elem.className ? ' picview' : 'picview';

		var innerHTML = '';
		innerHTML += '<div class="display"></div>';
		innerHTML += '<div class="permalink"></div><div class="extranote"></div>';
		innerHTML += '<div class="caption"></div>';
		innerHTML += '<div class="cpane"></div>';
		if (this.show_tags)
			innerHTML += '<div class="tagdetail"> </div>';
/**
		if (this.show_slideshow_controls)
			innerHTML += '<div class="control"> <div class="slidercont"> <div class="slider"> <div class="indicator"> </div> </div> speed </div> <div class="speed"> </div> <img class="startstop" src="' + this.image_host + this.urlPrefix + '/images/blue/play.png" onclick="javascript:ss[\'' + this.elem.id + '\'].slideshow_toggle();"> <div class="gallerynavcont"> <div class="gallerynav"> </div> </div>';
		else
			innerHTML += '<div class="control"> <div class="gallerynavcont"> <div class="gallerynav"> </div> </div> </div>';
**/
		innerHTML += '<div class="control"> <a href="javascript:ss[\'' + this.elem.id + '\'].gallery_shift(-1);"><img class="left" src="' + this.image_host + this.urlPrefix + '/images/blue/left_arrow.gif"></a> <div class="gallerynavcont"> <div class="gallerynav"> </div> </div> <a href="javascript:ss[\'' + this.elem.id + '\'].gallery_shift(1);"><img class="right" src="' + this.image_host + this.urlPrefix + '/images/blue/white_arrow.gif"></a> </div>';
		if (this.show_order_links)
			innerHTML += ' <div class="additional"> <input type="button" value="Add To Cart" onclick="javascript:ss[\'' + this.elem.id + '\'].add_to_cart();"> <input type="button" value="Check Out" onclick="javascript:xpImageOrderCheckout();"> </div> ';

		innerHTML += ' <div id="zdebug"> </div>';

		this.elem.innerHTML = innerHTML;
		//jQuery.dump(this.elem);

		var height = 616 + $("div.control", this.elem).height();
		if (this.show_order_links) height += $(".additional", this.elem).height();
		if (this.show_tags) height += $(".tagdetail", this.elem).height();
		this.elem.style.height = height + "px";

var ztest = '';
/* $("#zdebug", this.elem).append(ztest); */

		if (this.show_slideshow_controls) {
			var obj = this;
			$(".slider", this.elem).Slider(
				{
					accept : ".indicator",
					restricted : true,
					onSlide : function(cx, cy, x, y) {
						obj.on_slide(cx, cy, x, y);
					}
				}
			);
		}
		this.gallery_load_tag(options.tag_id);
		this.update_controls();
	},

	on_slide : function(cx, cy, x, y) {
		var offset = $(".slider", this.elem).offset();
/* $("#zdebug", this.elem).append('o ' + this.speed + ' '); */
		this.speed = (x - offset.left) * 100 + 1500;
/* $("#zdebug", this.elem).append('a ' + this.speed + ' '); */
		if (this.speed < 1500) this.speed = 1500;
/* $("#zdebug", this.elem).append('b ' + this.speed + ' '); */
		this.update_controls();
		if (this.ssinterval) {
			this.slideshow_stop();
			this.slideshow_start();
		}
	},

	set_img : function(imgid) {
		if (!this.idmap.hasOwnProperty(imgid)) return;
		var i = this.idmap[imgid];
		if (this.curimage)
			$(".gallerynav img:eq("+this.curtagindex+")", this.elem).removeClass("selected");
		this.curimage = imgid;
		this.curtagindex = i;
		$(".gallerynav img:eq("+this.curtagindex+")", this.elem).addClass("selected");

/* $("#zdebug", this.elem).empty(); */
/* $("#zdebug", this.elem).append('si1 '); */
/*$.dump(this.elem);*/
		var disp = $(".display", this.elem).get(0);
		var id = this.tagimages[this.curtagindex].getAttribute("id");
		this.image_host = this.tagimages[this.curtagindex].getAttribute("host");
		/* var data = this.tagimages[this.curtagindex].firstChild.data; */
	
/* $("#zdebug", this.elem).append('si2 '); */
		disp.innerHTML = "";
		if (this.viewer)
			this.viewer.clear();
		if (this.tagimages[this.curtagindex].getAttribute("zoomable")=='Y') {
			var divID = this.elem.id + 'gsv';
			disp.innerHTML = '<div id="' + divID + '" class="gsiv"><div class="well"></div> <div class="surface"></div> <p class="controls"> <a href="javascript: void(0);" class="zoomIn" title="Zoom In">+</a> <a href="javascript: void(0);" class="zoomOut" title="Zoom Out">-</a> </p></div>';
			/*var src = this.image_host + this.urlPrefix + '/' + this.tagimages[this.curtagindex].getAttribute("prefix");*/
			var src = this.tagimages[this.curtagindex].getAttribute("prefix");
			var zoom = this.tagimages[this.curtagindex].getAttribute("zoom");
			var mult = this.tagimages[this.curtagindex].getAttribute("mult");
			var width = this.tagimages[this.curtagindex].getAttribute("width");
			var height = this.tagimages[this.curtagindex].getAttribute("height");
			var ext = this.tagimages[this.curtagindex].getAttribute("ext");
			this.viewer = new GSIV(divID, { tileBaseUri: src, tilePrefix: '', tileExtension : ext, tileSize: 256, maxZoom: zoom, initialZoom: 0, zoomMultiplier: mult, zoom0Width: width, zoom0Height: height});
			this.viewer.init();
		} else {
/* $("#zdebug", this.elem).append('si3 '); */
			var src = this.tagimages[this.curtagindex].getAttribute("full");
			var top = (600 - this.tagimages[this.curtagindex].getAttribute("height")) / 2;
			disp.innerHTML = "<img src=\"" + src + "\" style=\"position: relative; top: " + top + "px;\">";
		}
		this.update_permalink();
	
/* $("#zdebug", this.elem).append('si4 '); */
		this.setupcaption();
		if (this.capmode != 'hide')
			$("#" + this.elem.id + " .cpane").fadeTo("normal", 0.7);
		if (this.capmode == 'auto')
			this.autocaptimer();
/* $("#zdebug", this.elem).append('si5 '); */
		if (this.show_tags) {
			$(".caption", this.elem).append(' (tags: ');
	
			var tags = this.tagimages[this.curtagindex].getElementsByTagName('tag');
			for (var i=0; i < tags.length; i++) {
				var id = tags[i].getAttribute("id");
				if (id == this.curtag)
					$(".caption", this.elem).append(tags[i].firstChild.data + ' ');
				else
					$(".caption", this.elem).append('<a href="javascript:ss[\'' + this.elem.id + '\'].gallery_load_tag(' + tags[i].getAttribute("id") + ')">' + tags[i].firstChild.data + '</a> ');
			}
			$(".caption", this.elem).append(')');
		}
	
/* $("#zdebug", this.elem).append('si6 '); */
		/* set nav */
		this.set_nav(this.curtagindex);
/* $("#zdebug", this.elem).append('si7 '); */
	},

	set_tag_index : function() {
		if (this.idmap[this.curimage])
			this.curtagindex = this.idmap[this.curimage];
		else
			this.curtagindex = -1;
	}, 

	gallery_load_tag : function(tagid) {
		if (this.curtag==tagid) return;
		this.curtag = tagid;
		var sel = "tag_id=" + this.curtag;
		if (this.userid)
			sel = sel + "&user_id=" + this.userid;
		var obj = this;
		$.ajax({
			type: "POST",
			url: this.urlPrefix + "/xml/taginfo.xml",
			data: sel,
			success: function(response){obj.gallery_tag_response(response);}
		});
	},

	gallery_tag_response : function(response) {
		if (!response) return;
		this.tagimages = response.getElementsByTagName('image');
		var details = response.getElementsByTagName('details');
		this.tagname = details[0].firstChild.data;
	
		this.idmap = new Object();
		$(".gallerynav", this.elem).empty();
	/*	$(".gallerynav", this.elem).append(response.getElementsByTagName('details')[0].firstChild.data + '<br/>'); */
		var navwidth = this.tagimages.length * 41;
		$(".gallerynav", this.elem).css("width", navwidth + "px");
		if (navwidth > 760) {
			$(".gallerynavcont", this.elem).css("left", "20px");
			$(".gallerynavcont", this.elem).css("width", "760px");
		} else {
			$(".gallerynavcont", this.elem).css("left", ((760 - navwidth)/2 + 20) + "px");
			$(".gallerynavcont", this.elem).css("width", navwidth + "px");
		}
		var disp = $(".display", this.elem).get(0);
		if (this.tagimages.length == 0) {
			disp.innerHTML = "No images";
			return;
		}
/* jQuery.dump(response); */
/* for (var j in response) alert(j); */
		for (var i=0; i < this.tagimages.length; i++) {
			var id = this.tagimages[i].getAttribute("id");
			if (!id) continue;
			var src = this.tagimages[i].getAttribute("tiny");

			/* var data = this.tagimages[i].firstChild.data; */

			this.idmap[id] = i;
			$(".gallerynav", this.elem).append('<a href="javascript:ss[\'' + this.elem.id + '\'].set_img(' + id + ')"><img src="' + src + '"></a>');
		}
		this.set_tag_index();
		if (this.curtagindex < 0) {
			this.curtagindex = 0;
			this.curimage = this.tagimages[this.curtagindex].getAttribute("id");
		}
		this.set_img(this.curimage);
		var users = response.getElementsByTagName('user');
		if (users.length) {
			this.userid = users[0].getAttribute("id");
			this.username = users[0].firstChild.data;
		}
		this.update_permalink();
	},

	update_permalink : function() {
		if (this.show_tags) {
			var link = this.urlPrefix + '/gallery/0/' + this.curimage + '/' + this.curtag + '/';
			$(".permalink", this.elem).empty();
			$(".permalink", this.elem).append('<a href="' + link + '">permanent link</a>');
			$(".tagdetail", this.elem).empty();
			$(".tagdetail", this.elem).append('Now Browsing: ');
	/* tmep tmep temp temp
		if (this.userid)
			$(".tagdetail", this.elem).append('<a href="' + this.urlPrefix + '/u/' + this.username + '">' + this.username + '</a> - ');
	*/
			$(".tagdetail", this.elem).append(this.tagname);
		}
/*
		if ($orderlink) {
			$(".extranote", this.elem).empty();
			$(".extranote", this.elem).append('<a href="' + this.urlPrefix + '/printorder.html?tag_id=' + this.curtag + '">order prints of images in this set</a>');
		}
*/
	},

	slideshow_toggle : function() {
		if (this.ssinterval)
			this.slideshow_stop();
		else
			this.slideshow_start();
		this.update_controls();
	},

	slideshow_start : function() {
		var obj = this;
		this.ssinterval = window.setInterval(function(){obj.slideshow_next();}, this.speed);
	},

	slideshow_stop : function() {
		window.clearInterval(this.ssinterval);
		this.ssinterval = 0;
	},

	slideshow_next : function() {
		this.curtagindex++;
		if (this.curtagindex >= this.tagimages.length)
			this.curtagindex = 0;
		this.set_img(this.tagimages[this.curtagindex].getAttribute("id"));

		// prefetch
		var nextindex = this.curtagindex + 1;
		if (nextindex >= this.tagimages.length)
			nextindex = 0;
		// counterproductive if image is tiled/zoomable...
		if (this.tagimages[this.curtagindex].getAttribute("zoomable")!='Y') {
			nextimg = new Image();
			nextimg.src = this.tagimages[nextindex].getAttribute("full");
		}
	},

	setupcaption : function() {
		$(".cpane", this.elem).empty();
		$("#" + this.elem.id + " .cpane").css("opacity", 0.0);
		var caption = this.tagimages[this.curtagindex].getAttribute("caption");
		/* if (caption!="") caption = "<caption>" + caption + "</caption> "; */
		$(".cpane", this.elem).append(caption);
			
		this.gencapline();
		var wid = $("#" + this.elem.id + " .cpane").height();
		$("#" + this.elem.id + " .cpane").css("top", (600-wid) + "px");
	},

	gencapline : function() {
		$(".caption", this.elem).empty();
		var caption = this.tagimages[this.curtagindex].getAttribute("caption");
		if (caption.length > 0) {
			$(".caption", this.elem).append('Caption: ');
			if (this.capmode == 'auto')
				$(".caption", this.elem).append('auto ');
			else
				$(".caption", this.elem).append('<a href="javascript:ss[\'' + this.elem.id + '\'].autocap();>auto</a> ');

			if (this.capmode == 'show')
				$(".caption", this.elem).append('show ');
			else
				$(".caption", this.elem).append('<a href="javascript:ss[\'' + this.elem.id + '\'].showcap();>show</a> ');

			if (this.capmode == 'hide')
				$(".caption", this.elem).append('hide ');
			else
				$(".caption", this.elem).append('<a href="javascript:ss[\'' + this.elem.id + '\'].hidecap();>hide</a> ');
			if (caption.length > 40)
				$(".caption", this.elem).append(caption.substring(0,40) + '...');
			else
				$(".caption", this.elem).append(caption);
		} else
			$(".caption", this.elem).append("No caption");
		var dl = this.tagimages[this.curtagindex].getAttribute("dl");
		if (dl && dl.length > 0)
			$(".caption", this.elem).append(' <a href="' + dl + '" target="_blank">Download</a>');
		else
			$(".caption", this.elem).append(' <span style="text-decoration: line-through; color: gray;">Download</span>');
	},

	autocap : function() {
		this.capmode = "auto";
		$("#" + this.elem.id + " .cpane").fadeTo("normal", 0.7);
		this.gencapline();
		this.autocaptimer();
	},

	autocaptimer : function()  {
		this.cancelcaptimer();
		this.captimerID = setTimeout("ss['" + this.elem.id + "'].autocapcallback();", this.tagimages[this.curtagindex].getAttribute("caption").length * 50 + 1000);
	},

	cancelcaptimer : function() {
		if (this.captimerID) {
			clearTimeout(this.captimerID);
			this.captimerID = 0;
		}
	},

	autocapcallback : function() {
		$("#" + this.elem.id + " .cpane").fadeTo("normal", 0.0);
	},

	showcap : function() {
		this.capmode = "show";
		$("#" + this.elem.id + " .cpane").fadeTo("normal", 0.7);
		this.gencapline();
	},

	hidecap : function() {
		this.capmode = "hide";
		$("#" + this.elem.id + " .cpane").fadeTo("normal", 0.0);
		this.gencapline();
	},

	set_nav : function(index) {
		this.nav_last_index = index;
		var w1 = $(".gallerynavcont", this.elem).width();
		var w2 = $(".gallerynav", this.elem).width();
		if (w2 > w1) {
			var left = index * 41;
			var right = left + 40;
			var cur = parseInt($(".gallerynav", this.elem).css("left"));
			if (-cur > left - 41) {
				cur = -left +41;
				if (cur > 0) cur = 0;
			} else if (cur + w1 < right + 41) {
				cur = w1 - right - 41;
				if (cur < (w1 - w2)) cur = (w1 - w2);
			}
			$(".gallerynav", this.elem).css("left", cur + "px");
		} else {
			$(".gallerynav", this.elem).css("left", "0px");
		}
	},

	gallery_shift : function(amount) {
		var newindex = this.nav_last_index + amount;
		if (newindex < 0)
			newindex = 0;
		if (newindex >= this.tagimages.length)
			newindex = this.tagimages.length;
		this.set_nav(newindex);
	},

	update_controls : function() {
		if (this.show_slideshow_controls) {
			$(".speed", this.elem).empty();
			$(".speed", this.elem).append((this.speed / 1000) + "s");
	
			if (this.ssinterval)
				$(".startstop", this.elem).attr("src", this.image_host + this.urlPrefix + "/images/blue/pause.png");
			else
				$(".startstop", this.elem).attr("src", this.image_host + this.urlPrefix + "/images/blue/play.png");
		}
	},

	add_to_cart : function() {
		xpImageOrder(this.curimage);
	}
}