/*
 
  Slideshow2, fading and switching img
 
  Author:	 Olle Härstedt
  Date:	 2011-01-10
 
  Pre: 	Assumes there is a Slideshow2 object called slideshow2, defined in the html, among other html tags
  			as frame1, frame2, preload, etc
  		Thumbs should be in a directory called t in dir.
		Thumbs have size 40x40
		Large pics have size ?
		No images on the entire page should have the same name, or else it will clash 
			in the database with img description.
		Thumbnail pop-ups are in div called thumb_desc
  Post:	Timer stops when any thumbnail is clicked.
 

*/

function Slideshow2(f1, f2, pId, dir) {

	var imgs; 
	var text;
	var id = id;
	var db = 0;		// double buffer :)
	var c = 0;		// counter
	var popup_div = document.getElementById("thumb_desc");
	var dir = dir;
	var frame = {};
	frame[0] = document.getElementById(f1);		// double buffer
	frame[1] = document.getElementById(f2);
	var jqframe = {};
	jqframe[0] = $("#" + f1);	// same frames using jQuery, for animate
	jqframe[1] = $("#" + f2);
	var p = document.getElementById(pId);
	var thumb_desc = document.getElementById("thumb_desc");
	obj = this;		// want to reach object from jQuery
	
	// get imgs and text and do some init
	$.getJSON("/slideshow2/fetch?dir=" + dir, function(data) {
		
		imgs = data.imgs;
		text = data.text;
		//var p = document.createElement("p");
		//p.innerHTML = " ... " + imgs["1"];
		//document.body.appendChild(p);

		// init first pic
		frame[0].src = "/" + dir + imgs[imgs.length - 1];
		frame[1].src = "/" + dir + imgs[0];
		jqframe[1].animate({opacity: 0}, 0);
		p.innerHTML = text[text.length - 1];

		// NO THUMBS THIS TIME
		// init thumbs
		//alert(dumpObj(obj, "ss", "    ", "10"));
		//obj.insertThumbs(imgs, document.getElementById("thumbs"));

		// insert all imgs as to prevent loading time artifacts at fading.
		insertHidden(imgs, document.getElementById("preload"));

		// start timer
		obj.timer = setInterval(switchImg, 5000);
	});

	// called by setInterval
	function switchImg() {
		//alert(imgs["0"]);
		var lastDb = db;
		db = 1 - db;
		jqframe[lastDb].animate({opacity: 0}, 500, function() {})
		jqframe[db].attr("src", "/" + dir + imgs[c]);
		p.innerHTML = text[c];
		jqframe[db].animate({opacity: 1}, 500, function() {});
		//img.src = "/img/slideshow/" + imgs[c];
		//jqimg.fadeIn();
		c++;
		if (c >= imgs.length)
			c = 0;
	}
	
	// insert thumbnails from directory slideshow/t/
	this.insertThumbs = function (imgs, target) {
		for (n = 0; n < imgs.length; n++) {
			var i = document.createElement("img");
			i.src = dir + "t/" + imgs[n];
			i.alt = text[n];
			if (i.addEventListener)		// not supported by IE < 9
				i.addEventListener('click', this.thumbClick, false);
			else if (i.attachEvent)
				i.attachEvent('onclick', this.thumbClick);
			// popup on hover
			if (i.addEventListener)		// not supported by IE < 9
				i.addEventListener('mouseover', this.thumbHover, false);
			else if (i.attachEvent)
				i.attachEvent('onmouseover', this.thumbHover);
			if (i.addEventListener)		// not supported by IE < 9
				i.addEventListener('mouseout', this.thumbHover_out, false);
			else if (i.attachEvent)
				i.attachEvent('onmouseout', this.thumbHover_out);
			target.appendChild(i);
		}
	}

	/*
		Pre:
		Post: none
		Side-effect: Inserts hidden imgs at target
	*/
	function insertHidden(imgs, target) {
		for (n = 0; n < imgs.length; n++) {
			var i = document.createElement("img");
			i.style.display = "none";
			i.src = "/" + dir + imgs[n];
			target.appendChild(i);
		}
	}

	this.getCounter = function () { return c; }
	this.setCounter = function (co) { c = co; return c; }

	this.thumbClick = function(e) {
		if (!e) e = window.event;	// IE stuff
		var co = Slideshow2.findThumbNr(e);
		var old_c = obj.getCounter();
		slideshow2.setCounter(co);
		switchImg();
		clearInterval(obj.timer);
		//this.timer = setInterval(switchImg, 5000);
	}

	this.thumbHover = function(e) {
		if (!e) e = window.event;	// IE stuff
		var nr = Slideshow2.findThumbNr(e);
		var t = text[nr];
		popup_div.innerHTML = t;
		popup_div.style.display = "inline";
	}

	this.thumbHover_out = function(e) {
		if (!e) e = window.event;	// IE stuff
		popup_div.style.display = "none";
	}
}

Slideshow2.findThumbNr = function(e) {
	if (!e) e = window.event;	// IE stuff
	var n = e.target || e.srcElement;	// IE don't use target
	var _c = 0;
	while (n.previousSibling) {	
		n = n.previousSibling;
		_c++;
	}
	return _c;
}



/******* from webpage ***********/

var MAX_DUMP_DEPTH = 10;

function dumpObj(obj, name, indent, depth) {
		if (depth > MAX_DUMP_DEPTH) {
				return indent + name + ": <Maximum Depth Reached>\n";
		}
		if (typeof obj == "object") {
				var child = null;
				var output = indent + name + "\n";
				indent += "\t";
				for (var item in obj)
				{
						try {
								child = obj[item];
						} catch (e) {
								child = "<Unable to Evaluate>";
						}
						if (typeof child == "object") {
								output += dumpObj(child, item, indent, depth + 1);
						} else {
								output += indent + item + ": " + child + "\n";
						}
				}
				return output;
		} else {
				return obj;
		}
}