//** KTS - Simple Image Popup System
// v 0.1
//// USER VARIABLES

// If you want to customize the kSIPS Image popup, comment out the "null" line and uncomment the line with "somevalue". You can then change "somevalue" you whatever you want to be the CSS id of the popup div. Some lines below, there is a full example of what you would put in your CSS file to replicate the default "null" look.
kSIPS.id = "galleryc";
//kSIPS.id = null;

// The <span> class name that kSIPS will look for.
kSIPS.className = "kSIPS_class";


// What the content of the various UI buttons contains, if so desired.
kSIPS.ui_close_content = "[x]<br>close";
kSIPS.ui_previous_content = "";
kSIPS.ui_next_content = "";

// So, to use custom styling, set the kSIPS.id to something like "kSIPS_Popup", then declare the following in your CSS style sheet:

// #kSIPS_Popup { position:fixed; left:50%; top:50%; display:block; background-color: #222; padding: 32px; text-align: center; }

// #kSIPS_Popup-image { background-color: #111;padding: 6px;height: 100%; }

// #kSIPS_Popup-previous_button { position: absolute; left:0px; top:50%; margin-top: -28px; width:32px; display: block; color: #888; font-size: 48px; border-top: 1px solid #555; border-bottom: 1px solid #555; background-color: #444; cursor: pointer; }

// #kSIPS_Popup-next_button { position: absolute; right:0px; top:50%; margin-top: -28px; width:32px; display: block; color: #888; font-size: 48px; border-top: 1px solid #555; border-bottom: 1px solid #555; background-color: #444; cursor: pointer; }

// #kSIPS_Popup-close_button { position: absolute; right:0px; top:0px; display: block; color: #888; font-size: 27px; border-left: 1px solid #555; border-right: 1px solid #555; background-color: #444; cursor: pointer; }

// ** ONLY EDIT BELOW IF YOU KNOW YOUR BUSINESS **
function kSIPS() {}

//* Objects
kSIPS.Set = function(_set) {
	this.set = _set;
	this.members = [];
	this.descriptions = [];
	this.add = function(_member) {
		this.members.push(_member);
//		kSIPS.Debug("Image "+_member+" added to "+this.set);
	};
	this.addDescription = function(_member, _description) {
		this.descriptions[_member] = _description;
	};
//	kSIPS.Debug("Set "+this.set+" created");
}

kSIPS.Popup = function(_id) {
	_this = this;

	this.name = (_id == null ? "kSIPS_Popup" : _id);
	this.element = kSIPS.createElementById(this.name);
	this.element.style.visibility = "hidden";
	this.ele_img = kSIPS.createElementById(this.name+"-image");
	this.ele_desc = kSIPS.createElementById(this.name+"-description");
	this.ele_prev = kSIPS.createElementById(this.name+"-previous_button");
	this.ele_next = kSIPS.createElementById(this.name+"-next_button");
	this.ele_close = kSIPS.createElementById(this.name+"-close_button");
	this.ele_prev.innerHTML = kSIPS.ui_previous_content;
	this.ele_next.innerHTML = kSIPS.ui_next_content;
	this.ele_close.innerHTML = kSIPS.ui_close_content;

	if (_id == null) {
		this.element.style.position = "fixed";
		this.element.style.left = "50%";
		this.element.style.top = "50%";
		this.element.style.display = "block";
		this.element.style.backgroundColor = "#222";
		this.element.style.padding = "32px";
		this.element.style.textAlign = "center";

		this.ele_img.style.backgroundColor = "#111";
		this.ele_img.style.padding = "6px";
		this.ele_img.style.height = "100%";

	// element UI
	// ** All this following needs to be fixed - it should not be a static
	// mess like this
//		this.ele_prev.id = _id+"-left_button";
		this.ele_prev.style.position = "absolute";
		this.ele_prev.style.left = "0px";
		this.ele_prev.style.top = "50%";
		this.ele_prev.style.marginTop = "-28px";
		this.ele_prev.style.color = "#888";
		this.ele_prev.style.fontSize = "48px";
		this.ele_prev.style.display = "block";
		this.ele_prev.style.width="32px";
		this.ele_prev.style.borderTop = "1px solid #555";
		this.ele_prev.style.borderBottom = "1px solid #555";
		this.ele_prev.style.backgroundColor = "#444";
		this.ele_prev.style.cursor = "pointer";
	
		this.ele_next.style.position = "absolute";
		this.ele_next.style.right = "0px";
		this.ele_next.style.top = "50%";
		this.ele_next.style.marginTop = "-28px";
		this.ele_next.style.color = "#888";
		this.ele_next.style.fontSize = "48px";
		this.ele_next.style.display = "block";
		this.ele_next.style.width="32px";
		this.ele_next.style.borderTop = "1px solid #555";
		this.ele_next.style.borderBottom = "1px solid #555";
		this.ele_next.style.backgroundColor = "#444";
		this.ele_next.style.cursor = "pointer";
	
		this.ele_close.style.position = "absolute";
		this.ele_close.style.right = "0px";
		this.ele_close.style.top = "0px";
		this.ele_close.style.marginTop = "0px";
		this.ele_close.style.color = "#888";
		this.ele_close.style.fontSize = "27px";
		this.ele_close.style.display = "block";
		this.ele_close.style.borderLeft = "1px solid #555";
		this.ele_close.style.borderBottom = "1px solid #555";
		this.ele_close.style.backgroundColor = "#444";
		this.ele_close.style.cursor = "pointer";
	}
//		this.ele_img.style.backgroundColor = "#111";
//		this.ele_img.style.padding = "6px";
//		this.ele_img.style.height = "100%";

	//** ;; The following is temporary "solution to making the image popup not be completely broken on IE. Will be fixed (pun intended)!
	if (navigator.appName == "Microsoft Internet Explorer") {
		this.element.style.position = "absolute";
	}
	// element UI
	// ** All this following needs to be fixed - it should not be a static
	// mess like this

	kSIPS.addEvent(this.ele_prev, 'click', function() { _this.previousImage();}, true);
	this.element.appendChild(this.ele_prev);
	kSIPS.addEvent(this.ele_next, 'click', function() { _this.nextImage();}, true);
	this.element.appendChild(this.ele_next);

	kSIPS.addEvent(this.ele_close, 'click', function() { _this.closeImage();}, true);

	this.element.appendChild(this.ele_close);

	this.element.appendChild(this.ele_img);

	// ** end area to be fixed
	this.img = document.createElement('img');
//	this.element.appendChild(this.img);
	this.ele_img.appendChild(this.img);
	this.element.appendChild(this.ele_desc);

	this.active = false;
	this.activeset = null;
	this.activemember = null;

	kSIPS.addEvent(this.img, 'load', function() { _this.resizeElement();}, true);

	this.keyPress = function(e) {
		if (e.keyCode == 37) {
			_this.previousImage();
		} else if (e.keyCode == 39) {
			_this.nextImage();
		} else if (e.keyCode == 27) {
			_this.closeImage();
		}
	};

	kSIPS.addEvent(document, 'keydown', this.keyPress, true);

	this.loadImage = function(_set, _member) {
		if (_set.descriptions[_member] !== undefined) {
			this.ele_desc.innerHTML = _set.descriptions[_member];
		} else {
			this.ele_desc.innerHTML = '';
		}
//		this.img.style.width = 'auto';
//		this.img.style.height = 'auto';
		this.img.src = _set.members[_member];
		this.activeset = _set;
		this.activemember = _member;
		if (this.active == false) {
			kSIPS.addEvent(window, 'resize', function() { _this.resizeElement(); }, true);
			this.active = true;
		}
	};
	this.nextImage = function() {
		if(this.activemember+1 >= this.activeset.members.length) {
			this.loadImage(this.activeset, 0);
		} else {
			this.loadImage(this.activeset, this.activemember+1);
		}
	};
	this.previousImage = function() {
		if (this.activemember-1 < 0) {
			this.loadImage(this.activeset, this.activeset.members.length-1);
		} else {
			this.loadImage(this.activeset, this.activemember-1);
		}
	};
	this.closeImage = function() {
		this.element.style.visibility = 'hidden';
		this.img.src = '';
		if (this.active == true) {
			kSIPS.removeEvent(window, 'resize', function() { _this.resizeElement(); }, true);
			this.active = false;
		}
};
	this.resizeElement = function() {
		if (this.active == true) {
		this.img.style.width = 'auto';
		this.img.style.height = 'auto';
		this.resizeImage();
		var width = kSIPS.getViewport().width;
		var height = kSIPS.getViewport().height;

//		this.img.style.width = 'auto';
//		this.img.style.height = 'auto';
//		this.element.style.width = this.img.width;
//		this.element.style.height = this.img.height;


//		if (width >= height) {
			this.element.style.width = (width-(width/5));
			this.element.style.height = parseInt(this.element.style.width) * 0.5625;
//		} else {
//			this.element.style.height = (height-(height/5));
//			this.element.style.width = parseInt(this.element.style.width) * 1.777;

//		}
		this.element.style.marginLeft = -(parseInt(this.element.style.width)/2);
//alert(parseInt(this.element.style.width)/2);
//		this.element.style.marginLeft = -((parseInt(this.element.style.padding)+parseInt(this.element.style.width))/2);
		this.element.style.marginTop = -(parseInt(this.element.style.height)/2);
//		this.element.style.marginTop = -((parseInt(this.element.style.padding)+parseInt(this.element.style.height))/2);
//		this.element.style.left = (width/2)-(parseInt(this.element.style.padding)+(parseInt(this.element.style.width)/2));
//		this.element.style.top = (height/2)-(parseInt(this.element.style.padding)+(parseInt(this.element.style.height)/2));

		// ugh image resizing
		var proj_width;
		var proj_height;
		var old_width;
		var old_height;
		var padding_offset = parseInt(this.element.style.padding);
		orig_width = parseInt(this.img.width);
		orig_height = parseInt(this.img.height);

		if (this.img.height > parseInt(this.element.style.height)) {
			this.img.style.height = parseInt(this.element.style.height);
			this.img.style.position = "relative";
			this.img.style.top = 0;
			this.img.style.marginTop = 0;
			this.img.style.left = 0;
			this.img.style.marginLeft = 0;
//		}
		 } else {
			this.img.style.position = "absolute";
			this.img.style.top = "50%";
			this.img.style.marginTop = -((parseInt(this.img.height)/2));
			this.img.style.left = "50%";
			this.img.style.marginLeft = -(parseInt(this.img.width)/2);
		}
		this.element.style.visibility = 'visible';
		}
	};
	this.resizeImage = function() {
	};
}

//* Library Functions, etc.

//** First of all, some cross-platform wrapper functions
kSIPS.addEvent = function(_target, _etype, _func, _bool) {
	if (_target.attachEvent) {
		//** --V laziness, should fix
		_target.attachEvent('on'+_etype, _func);
	} else {
		_target.addEventListener(_etype, _func, _bool);
	}
}

kSIPS.removeEvent = function(_target, _etype, _func, _bool) {
	if (_target.detachEvent) {
		//** --V laziness, should fix
		_target.detachEvent('on'+_etype, _func);
	} else {
		_target.removeEventListener(_etype, _func, _bool);
	}

}

kSIPS.keyPress = function(_event) {
	alert(_event.keyCode);
}

kSIPS.getViewport = function() {
	var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
	var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
	return { width : w , height : h }
}

kSIPS.createElementById = function(_id) {
	var element = document.getElementById(_id);
	if (element == null) {
		element = document.createElement('div');
		element.id = _id;
		document.body.appendChild(element);
	}
	return element;
}

kSIPS.procTagsInTags = function(_stacktag, _needletag, _func) {
	var stacks = document.body.getElementsByTagName(_stacktag);
	for (var x = 0; x < stacks.length;x++) {
		var needles = stacks[x].getElementsByTagName(_needletag);
		for (var y =0; y < needles.length;y++) {
			(function (x, y) { needles[y].addEventListener("click", function() { alert(x+"."+y);}, true) }(x, y));
		}
	}
}

kSIPS.Debug = function(_debug) {
	document.getElementById("debug").innerHTML += '<br>'+_debug;
}

kSIPS.procImgsInSpans = function() {
	var popup = new kSIPS.Popup(kSIPS.id);
//	new kSIPS.Popup((document.getElementById('kSIPS.Popup') == null ? '' : document.getElementById('kSIPS.Popup')));
	var stacks = document.body.getElementsByTagName("span");
	for (var x =0; x < stacks.length;x++) {
		if (stacks[x].className == kSIPS.className) { 
		var set = new kSIPS.Set(x);
		var needles = stacks[x].getElementsByTagName("a");
		for (var y =0;y < needles.length;y++) {
			var imageurl = needles[y].href;
			set.add(imageurl);
			// v-- added to disable href loading (why can't it  be merged with addEventListener? :[ )
			needles[y].onclick = function() { return false; };
			(function (popup, set, y) { kSIPS.addEvent(needles[y], 'click', function() { popup.loadImage(set, y);}, true)}(popup, set, y));
		}
	}
	}
}
// More advanced function that allows all data within interior <p> to be added as a descriptor to the image
kSIPS.procImgsInSpansAdv = function() {
	var popup = new kSIPS.Popup(kSIPS.id);
//	new kSIPS.Popup((document.getElementById('kSIPS.Popup') == null ? '' : document.getElementById('kSIPS.Popup')));
	var stacks = document.body.getElementsByTagName("span");
	for (var x =0; x < stacks.length;x++) {
		if (stacks[x].className == kSIPS.className) { 
		var set = new kSIPS.Set(x);
		var needles = stacks[x].getElementsByTagName("a");
		for (var y =0;y < needles.length;y++) {
			var camels = needles[y].getElementsByTagName("div");
			if (camels[0] !== undefined) {
				set.addDescription(y, camels[0].innerHTML);
			}
			var imageurl = needles[y].href;
			set.add(imageurl);
			// v-- added to disable href loading (why can't it  be merged with addEventListener? :[ )
			needles[y].onclick = function() { return false; };
			(function (popup, set, y) { kSIPS.addEvent(needles[y], 'click', function() { popup.loadImage(set, y);}, true)}(popup, set, y));
		}
		}
	}
}

// ** finally, let's do the onload!
kSIPS.addEvent(window, 'load', function() { kSIPS.procImgsInSpansAdv();}, true);