var MYROOT = "/astudios_2010/";

// Preload some stuff
var im1 = new Image();
im1.src = MYROOT + "assets/img/ajax-loader.gif";
var im2 = new Image();
im2.src = MYROOT + "assets/img/modal_close.gif";
var im3 = new Image();
im3.src = MYROOT + "assets/img/modal_previous.gif";
var im4 = new Image();
im4.src = MYROOT + "assets/img/modal_next.gif";
var im5 = new Image();
im5.src = MYROOT + "assets/img/comments-ajax-loader.gif";
var im6 = new Image();
im6.src = MYROOT + "assets/img/message-ajax-loader.gif";
var im7 = new Image();
im7.src = MYROOT + "assets/img/thumnail-ajax-loader.gif";

var req;
var which;
function ajaxGET(url) {
if (window.XMLHttpRequest) { // Non-IE browsers
  req = new XMLHttpRequest();
  req.onreadystatechange = processStateChange;
  try {
	req.open("GET", url, true);
  } catch (e) {
	alert(e);
  }
  req.send(null);
} else if (window.ActiveXObject) { // IE
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
	req.onreadystatechange = processStateChange;
	req.open("GET", url, true);
	req.send();
  }
}
}
function processStateChange() {
if (req.readyState == 4) { // Complete
  if (req.status == 200) { // OK response
	eval(req.responseText);
  } else {
	alert("Problem: " + req.statusText);
  }
}
}


var HS = 0;
var VS = 0;
window.onscroll = function updateScroll(){
	if (window.innerWidth) {
		// All browsers but Internet Explorer
		HS = window.pageXOffset; VS = window.pageYOffset;
		}
		else if(document.documentElement && document.documentElement.clientWidth){
		// These are for Internet Explorer 6 when a DOCTYPE is defined
		HS = document.documentElement.scrollLeft;
		VS = document.documentElement.scrollTop; }
		else if (document.body.clientWidth) {
		// These are for Internet Explorer 5/6 without a DOCTYPE
		HS = document.body.scrollLeft; VS = document.body.scrollTop;
	}
}

var dragging = 0;

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};


function toggleDisplay(e, divId){

	if(e) var btn = document.getElementById(e.target.id);
	var toToggle = document.getElementById(divId);

	if(toToggle.style.display !== "inline"){
		toToggle.style.display = "inline";
		if(e) btn.innerHTML = btn.innerHTML.replace("Open", "Close");
	}
	else{
		toToggle.style.display = "none";
		if(e) btn.innerHTML = btn.innerHTML.replace("Close", "Open");
	}

}


// Confirm hazard links
var hazards = document.getElementsByClassName("hazard");
for(var i=0;i<hazards.length;i++){
	hazards[i].onclick = function(){
		var sure = confirm("Are you sure?");
		if(sure){
			return true;
		}
		return false;
	}
}




// Empty possible inputs on focus
var emptyPuts = document.getElementsByClassName("emptyme");
for(var i=0;i<emptyPuts.length;i++){
	var me = emptyPuts[i];
	me.setAttribute("origValue", me.value);
	me.onfocus = function(){
		var myOrig = this.getAttribute("origValue");
		if(this.value == myOrig) this.value = "";
	}
	me.onblur = function(){
		var myOrig = this.getAttribute("origValue");
		if(this.value == "") this.value = myOrig;
	}
}

// Form checker
var forms = document.getElementsByTagName("form");
for(var x=0;x<forms.length;x++){
	var theForm = forms[x];
	if(theForm.getAttribute("onsubmit" == "")){
	theForm.onsubmit = function(){
		var nagged = 0;
		var puts = document.getElementsByClassName("mandatory");

		for(var i=0;i<puts.length;i++){
			if(nagged < 1){
				if(puts[i].value == ""){
					// Empty field, nag, highlight and focus
					puts[i].focus();
					nagged = 1;
					var backto = puts[i].style.backgroundColor;
					puts[i].style.backgroundColor = "red";
					puts[i].setAttribute("id", "missing"+i);
					setTimeout("document.getElementById('missing"+i+"').style.backgroundColor = '"+backto+"'", 100);
				}
			}
		}
		if(nagged < 1) this.submit();

		return false;
	}
	}
}


var curFadeOpa = 1;



function centerDivHorizontally(divId){

	var me = document.getElementById(divId);
	var myLeft = ((document.body.offsetWidth / 2) - (me.offsetWidth / 2)) + "px";
	me.style.left = myLeft;

}

function centerDivVertically(divId){

	var me = document.getElementById(divId);
	var myTop = ((document.body.offsetHeight / 2) - (me.offsetHeight / 2)) + "px";
	me.style.top = myTop;

}
/*
function fadeDivIn(divId){
	var theDiv = document.getElementById(divId);
	if(curFadeOpa < 1){
		curFadeOpa += .03;
		theDiv.style.opacity = curFadeOpa;
		setTimeout("fadeDivIn('" + divId + "')", 40);
	}
	else{
		curFadeOpa = 1;
		theDiv.style.opacity = 1;
	}

}
*/

var fading;
function fadeIn(id){

	if(!document.getElementById(id)) return;

	var myElement = document.getElementById(id);

	if(!myElement.getAttribute("myOpa")){
		myElement.setAttribute("myOpa", 0);
		myElement.style.opacity = 0;
	}

	var myOpa = myElement.getAttribute("myOpa");

	if(parseFloat(myOpa) < 1){

		var myNewOpa = parseFloat(myOpa) + .05;
		myElement.setAttribute("myOpa", myNewOpa);

		myElement.style.opacity = myNewOpa;

		fading = setTimeout("fadeIn('"+id+"')", 25);

	}
	else{
		myElement.style.opacity = 1;
		myElement.setAttribute("myOpa", 0); // Mindfuck (tä)
	}



}

function fadeDivOut(divId){
	var theDiv = document.getElementById(divId);
	if(curFadeOpa > 0){
		curFadeOpa -= .03;
		theDiv.style.opacity = curFadeOpa;
		setTimeout("fadeDivOut('" + divId + "')", 40);
	}
	else{
		curFadeOpa = 1;
		theDiv.style.opacity = 0;
		theDiv.style.display = "none";
	}

}

function getWindowHeight(){
	var winH;
	if (window.XMLHttpRequest) {
		// Decent browsers
		//winH = document.body.offsetHeight;
		winH = window.offsetHeight;
	}
	else{
		// IE
		winH = document.documentElement.body.clientHeight;
	}
	return winH;
}

// ****************************************************************





function createDimmer(){

	var d = document.createElement("div");
	d.id = "dimmer";
	document.getElementsByTagName("body")[0].appendChild(d);

}
createDimmer();

function createModal(){

	var d = document.createElement("div");
	d.id = "modal";
	d.innerHTML = "<div id='infoAndcomments'><div id='info'>INFO</div><div id='comments'>COMMENTS</div></div> <!-- infoAndcomments --><div id='image'>IMAGE</div>";
	document.getElementsByTagName("body")[0].appendChild(d);

}
createModal();

var picLinks;
function grabPicLinks(){

	picLinks = document.getElementsByClassName("picLink");

	for(i in picLinks){

		var me = picLinks[i];

		me.onclick = function(){
			openPic(this.rel);
			return false;
		}

	}

}
grabPicLinks();


function openPic(myPic){

	openModal(myPic);
	modal.innerHTML = "<img src='" + MYROOT + "assets/img/ajax-loader.gif' alt='' id='ajaxLoader' />";
	return false;

}






















var modal = document.getElementById("modal");
var dimmer = document.getElementById("dimmer");
var modalCentered = 0;

window.onresize = function(){

	modalCentered = 0;

}

function openModal(myPic){

	openDimmer();
	modal.style.display = "inline";
	if(modalCentered == 0) centerDivHorizontally("modal");
	modalCentered = 1;

	modalLoadContent(myPic);

}

function getHashLocation(){
	var myHref = window.location.href;
	var bits = myHref.split("#");
	return bits[1];
}

function resetHashLocation(){
	var myLoc = getHashLocation();
	if(myLoc != undefined) window.location.href = window.location.href.replace(myLoc, "");
}

function closeModal(){
	closeDimmer();
	modal.style.display = "none";
	if(document.getElementById("directMessage")){
		document.getElementsByTagName("body")[0].removeChild(document.getElementById("directMessage"));
	}
	resetHashLocation();
}

function openDimmer(){
	dimmer.style.display = "inline";
	stretchDimmer();
	dimmer.onclick = closeModal;
}

function stretchDimmer(){
	var toHeight = getWindowHeight();
	dimmer.style.height = toHeight + "px";
}

function closeDimmer(){
	dimmer.style.display = "none";
}

function modalLoadContent(picID){

	var url = MYROOT + "code/ajax/picture.php?picID=" + picID;
	commentPage = 1;
	ajaxGET(url);

}







function picFromAjax(id, title, description, ts, image, nextId, previousId){

	var m = "";

	//echo "<a href='#' id='modalPrevious' onclick='modalPrevious(\" + id + \"); return false;'><img src='\" + MYROOT + \"assets/img/modal_previous.gif' alt='&lt;' /></a>";

	if(previousId){
		m += "<a href='#' id='modalPrevious' onclick='openModal(" + previousId + "); return false;'><img src='" + MYROOT + "assets/img/modal_previous.gif' alt='&lt;' /></a>";
	}
	//echo "<a href='#' id='modalNext' onclick='modalNext(\" + id + \"); return false;'><img src='\" + MYROOT + \"assets/img/modal_next.gif' alt='&lt;' /></a>";
	if(nextId){

		m += "<a href='#' id='modalNext' onclick='openModal(" + nextId + "); return false;'><img src='" + MYROOT + "assets/img/modal_next.gif' alt='&lt;' /></a>";
	}

	m += "<a href='#' id='closeModalLink' onclick='closeModal(); return false;'><img src='" + MYROOT + "assets/img/modal_close.gif' alt='X' /></a>";

	m += "<div id='infoAndcomments'><div id='info'><h4>“" + title + "”</h4><p>Uploaded " + ts + "</p><p>" + description + "</p></div><h5>Comments</h5><div id='comments'></div><p><a href='#' class='active' id='commentLink' onclick='openCommentDialog(" + id + "); return false;'>Add comment</a></p></div> <!-- infoAndcomments --><div id='image' onmouseover='overlayZoom(this);'><a href='" + image + "' onclick='this.target=\"_blank\";'><img src='" + image + "'></a></div>";

	modal.innerHTML = m;
	fadeIn("image");

	getComments(id);

}

/*
function modalPrevious(currentId){

	ajaxGET(MYROOT + "code/ajax/getPreviousNext.php?direction=previous&currentId=" + currentId);

}
function modalNext(currentId){

	ajaxGET(MYROOT + "code/ajax/getPreviousNext.php?direction=next&currentId=" + currentId);

}
*/
// Commenting -->

var commentPage = 1;
function getComments(id){

	document.getElementById("comments").innerHTML = "<div id='commentsAjaxLoader'><img src='" + MYROOT + "assets/img/comments-ajax-loader.gif' alt='Loading comments' /></div>";
	ajaxGET(MYROOT + "code/ajax/getComments.php?picID=" + id + "&page=" + commentPage);

}
function insertComments(string){

	document.getElementById("comments").innerHTML = string;
	fadeIn("comments");
	if(document.getElementById("commentLink")){
		document.getElementById("commentLink").style.display = "inline";
		fadeIn("commentLink");
	}

}
function openCommentDialog(id){

	var myLink = document.getElementById("commentLink");
	myLink.className = "deactivated";

	var box = document.createElement("div");
	box.id = "commentingDialog";
	var m = "";

	m += "<form method='post' action='#' onsubmit='sendComments(this); return false;' id='commentingForm'>";
	m += "<h1>Add Comment</h1>";
	m += "<a href='#' onclick='closeCommentDialog(); return false;'>X</a>";
	m += "<p><input type='text' name='name' value='Your name' class='text' maxlength='100' /></p>";
	m += "<p><textarea name='comment' cols='10' rows='10'>Your comment</textarea></p>";
	m += "<input type='hidden' name='pictureId' value='" + id + "' />";
	m += "<p><input type='submit' value='' class='submit' /></p>";
	m += "</form>";

	box.innerHTML = m;

	document.getElementById("infoAndcomments").appendChild(box);

	fadeIn("commentingDialog");
	document.getElementById("commentingForm").name.focus();

}

function sendComments(frm){

	var name = frm.name.value;
	var comment = frm.comment.value;
	var picId = frm.pictureId.value;

	if(name == "" || comment == "" || name == "Your name" || comment == "Your comment"){
		alert("Please fill in your name and a comment before submitting!");
		return false;
	}

	ajaxGET(MYROOT + "code/ajax/commentHandler.php?picId=" + picId + "&name=" + name + "&comment=" + comment.replace(/\n/g, "<br/>"));

	var myLink = document.getElementById("commentLink");
	myLink.className = "active";

	commentPage = 1;

}

function closeCommentDialog(){
	document.getElementById("infoAndcomments").removeChild(document.getElementById("commentingDialog"));
}

function overlayZoom(el){

	if(document.getElementById("zoomIcon")) return;

	el.onmouseout = closeZoom;

	var z = document.createElement("img");
	z.src = MYROOT + "assets/img/zoom.png";
	z.id = "zoomIcon";

	z.style.top = el.offsetTop + ((el.offsetHeight / 2) - (111 / 2)) + "px";
	z.style.left = el.offsetLeft + ((el.offsetWidth / 2) - (111 / 2)) + "px";

	el.appendChild(z);

}

function closeZoom(){

	if(!document.getElementById("zoomIcon")) return;
	var me = document.getElementById("zoomIcon");
	document.getElementById("image").removeChild(me);

}


function commentsPreviousPage(picId){
	commentPage --;
	getComments(picId);
}
function commentsNextPage(picId){
	commentPage ++;
	getComments(picId);
}




// Direct link stuff
if(document.getElementById("directMessageLink")){

	var directMessageLink = document.getElementById("directMessageLink");
	directMessageLink.onclick = function(){

		openDirectMessage();
		return false;

	}

}
var rememberDirectMessageMarkup = "";
function openDirectMessage(){

	openDimmer();

	var d = document.createElement("div");
	d.id = "directMessage";

	var m = "";

	m += "<a href='#' onclick='closeModal(); return false;' id='closeDirectMessage'>X</a>";
	m += "<h5>Send me a direct message:</h5>";
	m += "<form method='post' action='#' id='directMessageForm' onsubmit='sendDirectMessage(this); return false;'>";
	m += "<p><input type='text' name='email' class='text' value='Your email' /></p>";
	m += "<p><textarea name='message' cols='10' rows='10'>Your message</textarea></p>";
	m += "<input type='submit' value='' class='submit' title='Send' />";
	m += "";
	m += "</form>";

	d.innerHTML = m;

	rememberDirectMessageMarkup = m;

	document.getElementsByTagName("body")[0].appendChild(d);

	centerDivHorizontally("directMessage");

	fadeIn("directMessage");

}



function sendDirectMessage(frm){

	var email = frm.email.value;
	var message = frm.message.value;

	if(email == "" || email == "Your email" || message == "" || message == "Your message"){
		alert("Please fill in your email adress and a message before submitting");
		return false;
	}

	document.getElementById("directMessage").innerHTML = "<br/><br/><br/><br/><center>Validating and sending your message...<br/><img src='" + MYROOT + "assets/img/message-ajax-loader.gif' alt='' /></center>";

	ajaxGET(MYROOT + "code/ajax/messageHandler.php?email=" + email + "&message=" + message);

}

function resetDirectMessageForm(){

	document.getElementById("directMessage").innerHTML = rememberDirectMessageMarkup;

}




// Thumbnail list logic

var thPageNum = 1;

if(document.getElementById("nextThumbs")){
	var nextThumbs = document.getElementById("nextThumbs");
	nextThumbs.onclick = function(){
		getNextThumbs();
		return false;
	}
}



function getPreviousThumbs(){

	if(thPageNum == 1) return false;
	thPageNum --;
	refreshThumbsView();

}



function getNextThumbs(){

	thPageNum ++;
	refreshThumbsView();

}



function refreshThumbsView(){

	document.getElementById("art").innerHTML = "<br/><br/><br/><center><img src='" + MYROOT + "assets/img/thumnail-ajax-loader.gif' alt='Loading...' /></center>";
	ajaxGET(MYROOT + "code/ajax/refreshThumbList.php?page=" + thPageNum);

}