// JavaScript Document
window.onload = init;
function init() {
	//animate('page_loading_icon', 70);
	animate('initLoading_icon', 70);
	animate('intro', 70, true, kickStart);
	kickStart();
}
// check if loading is done or animation is finished (via global start var), whichever first, then delete loading graphic & show page
var start = false
function kickStart() {
	if (start == true) {
		deleteObj('initLoading');
		document.getElementById('main').style.visibility = "visible";
		drawPage('pages/start.html', 'content', true);
		makeFadeObj('spotlight', true);
	} else {
		start = true;	
	}
}
// delete object
function deleteObj(id) {
	var obj = document.getElementById(id);
	obj.parentNode.removeChild(obj)
}

// animations
function animate(id, iv, once, func) {
	var obj = document.getElementById(id);
	var jump = obj.parentNode.offsetHeight;
	if (!iv) var iv = 30;
	obj.ivID = setInterval(animFrame, iv);
	//
	function animFrame(){
		if (document.getElementById(id) != null) {
			var nextFrame = obj.offsetTop-jump;
			if (nextFrame <= obj.offsetHeight*-1) {
				if (once == true) {
					clearInterval(obj.ivID);
					nextFrame+=jump;
					if (func) setTimeout(func,500);
				} else {
					nextFrame = 0;
				}
			}
			obj.style.top = nextFrame+"px";
		} else {
			clearInterval(obj.ivID);
		}
	}
}

// Detect if the browser is IE or not.
function checkBrowser() { 
	var browser=navigator.appName;
	var b_version=navigator.appVersion;
	var version=parseFloat(b_version);
	switch (browser){
		case "Microsoft Internet Explorer":
			return("IE")
			break;
		case "Netscape":
			return ("NE")
			break;
		case "Safari":
			return("SA")
			break;
		default:
			return("other");
			break;
	}
}
var browser = checkBrowser();


// get mouse position
var mousex = 0;
var mousey = 0;
function updateMouseXY(e) {
	if (browser == "IE") {
	// grab the x-y pos.s if browser is IE
	mousex = event.clientX + document.body.scrollLeft;
	mousey = event.clientY + document.body.scrollTop;
	} else {
	// grab the x-y pos.s
	mousex = e.pageX
	mousey = e.pageY
	}
	// catch possible negative values in NS4
	if (mousex < 0){mousex = 0}
	if (mousey < 0){mousey = 0}
	moveLight();
	// fade fadeObjects
	for (var obj in fadeObjs_ar) {
		fade(fadeObjs_ar[obj][0],fadeObjs_ar[obj][1],fadeObjs_ar[obj][2],fadeObjs_ar[obj][3],fadeObjs_ar[obj][4]);
	}
}

// capture mousemovement
if (window.captureEvents){
	window.captureEvents(Event.MOUSEMOVE);
	window.onmousemove=updateMouseXY;
} else {
	document.onmousemove=updateMouseXY;
}


// Global array for fading objects
var fadeObjs_ar = Array();
function makeFadeObj(id, resize, opDef, foSpd, fiFct, maxOp) {
	var obj = document.getElementById(id);
	obj.props = Array(obj, resize, opDef, foSpd, fiFct, maxOp)
	fadeObjs_ar[id]=obj.props;
	// avoiding flash by displaying at max opacity from beginning 
	if (maxOp) {
		obj.style.opacity = maxOp/100;
		obj.style.filter='alpha(opacity='+maxOp+')';//IE
	}
	// start fading already (adjusted on mousemovement)
	fade(obj, resize, opDef, foSpd, fiFct, maxOp)
	// clean out array
	for (var i in fadeObjs_ar) {
		if (!document.getElementById(fadeObjs_ar[i][0].id)) {
			fadeObjs_ar[i] = undefined;
		}
	}
}


// fade in & out for light (object, resize boolean, opacity Default, fade out speed, fade in factor)
function fade(obj, resize, opDef, foSpd, fiFct, maxOp) {
	// mouse history to detect mousemovement
	if (!obj.currentMouseX) obj.currentMouseX = mousex;
	if (!obj.currentMouseY) obj.currentMouseY = mousey;
	obj.mouseHistoryX = obj.currentMouseX;
	obj.mouseHistoryY = obj.currentMouseY;
	obj.currentMouseX = mousex;
	obj.currentMouseY = mousey;
	// set size factor & original size (w & h)
	if (!obj.sizeF) obj.sizeF = 1;
	if (!obj.orW) obj.orW = obj.offsetWidth;
	if (!obj.orH) obj.orH = obj.offsetHeight;
	// set opacity variable
	if (!opDef) var opDef = 0
	if (!obj.op && obj.op != 0) obj.op = opDef;
	// set fadeOut speed + fadeIn factor + max opacity
	if (!foSpd) var foSpd = 5;
	if (!fiFct) var fiFct = 1;
	if (!maxOp) var maxOp = 100;
	//call fade
	if (!obj.ivID) obj.ivID = setInterval(fadeStep, 50)
	function fadeStep() {
		if (obj.currentMouseX == obj.mouseHistoryX) {
		// NO MOUSE MOVEMENT
			obj.op >= 1 ? obj.op = (obj.op*(100-foSpd)/100)-.1 : obj.op = 0;
			if (resize == true) {
				if (obj.sizeF > 1) {
					obj.sizeF *= .97;
				} else {
					obj.sizeF = 1;
				}
			}
		} else {
		// MOUSE MOVEMENT	
			// check mouse speed
			var mouseDist = Math.abs(obj.currentMouseX-obj.mouseHistoryX);
			browser == 'IE' ? mouseDist *= 2 : null;//IE lightening up is too soft
			// update opacity var according to mouse speed
			obj.op += (mouseDist/10)*fiFct;
			// increase sizeFactor up to 10 when moving
			if (obj.op >= 100)	{
				obj.op = 100;
				// exclude IE cause of bug
				if (browser != 'IE' && resize == true) {
					if (obj.sizeF < 10) {
						obj.sizeF += .1//mouseDist/1000;	
					} else {
						obj.sizeF = 10;
					}
				}
			}
		}
		// APPLY VALUES
		maxOp != 100 ? obj.style.opacity = ((obj.op/100)*maxOp)/100 : obj.style.opacity = obj.op/100;// saving calculating time in most cases;
		obj.style.filter='alpha(opacity='+((obj.op/100)*maxOp)+')';//IE
		if (obj.sizeF != 1) {// saving calculating time for most cases;
			obj.style.width = (obj.orW*obj.sizeF)+"px";
			obj.style.height = (obj.orH*obj.sizeF)+"px";
		}
		// update mouse history
		obj.mouseHistoryX = obj.currentMouseX;
		obj.mouseHistoryY = obj.currentMouseY;
		// clear interval when light is out
		if (obj.op == 0) { clearInterval(obj.ivID); obj.ivID = undefined; obj.topSize =1}
	}
}
// move spotlight
function moveLight() {
	var light = document.getElementById('spotlight');
	light.style.left = mousex+"px";
	light.style.top = mousey+"px";
}



// move navigation & draw page
function drawPage(url, id, jump) {
	if (!id) return
	// check url with current loaded page, to avoid reload on same page
	var main = document.getElementById('main');
	if (main.url && main.url == url) return;
	main.url = url;
	// delete current instance
	if (document.getElementById(id)) deleteObj(id);
	// delete gallery
	if (document.getElementById('gallery')) deleteObj('gallery');
	// display loading message after short delay (only when page takes a while to load)
	setTimeout(function() {
		if (document.getElementById(id).innerHTML == "") {
			document.getElementById('page_loading').style.display="block";
			// animate icon unless it's already moving
			if (!document.getElementById('page_loading_icon').ivID) animate('page_loading_icon', 70);
		}
	}, 500);
	// create new div
	var newdiv = document.createElement('div');
	newdiv.setAttribute('id', "content");
	if (browser != 'IE') { newdiv.setAttribute('class', "flexcroll"); } else { newdiv.style.overflow='auto'; };
	newdiv.style.position = 'absolute';
	newdiv.style.width = 400+"px";
	newdiv.style.height = 300+"px";
	newdiv.style.left = 100+"px";
	newdiv.style.color = "#999999";
	//newdiv.style.backgroundColor = "#ff0000";
	newdiv.style.display = "none";
	newdiv.w = parseFloat(newdiv.style.width);
	newdiv.h = parseFloat(newdiv.style.height);
	newdiv.left = parseFloat(newdiv.style.left);
	main.appendChild(newdiv);
	// assigning random position
	var radius = 300;// max distance to move
	var marg = 10;// distance to stay away from the side
	var ww = getWindowWidth();
	var wh = getWindowHeight();
	main.xpos = main.offsetLeft
	main.ypos = main.offsetTop
	if (url == "pages/gallery.html" || url == "pages/reviews.html") {
		//var img_ar;
		var varholder;
		if (url == "pages/gallery.html") {
			varholder = gal;
		} else if (url == "pages/reviews.html") {
			varholder = rev;
		}
		//
		var x_move = (main.xpos-marg)*-1;
		var y_move = (main.ypos-marg)*-1;
		//
		// create gallery div
		if (document.getElementById('gallery')) deleteObj('gallery');
		var gallerydiv = document.createElement('div');
		gallerydiv.setAttribute('id', "gallery");
		gallerydiv.style.position = 'absolute';
		gallerydiv.style.top = 45+"px";
		gallerydiv.style.width = (ww-marg*2-newdiv.left-8)+"px";//8 = flexcroll padding
		gallerydiv.style.height = (wh-marg-45-30)+"px";
		gallerydiv.style.left = 100+"px";
		//gallerydiv.style.backgroundColor = "#00ff00";
		gallerydiv.varholder = varholder;
		gallerydiv.innerHTML = '<a href="javascript:replaceImg('+varholder.name+'.ar['+varholder.name+'.nxtnr-1], '+varholder.name+', \'fw\')" id="gallery_img"><span id="imgspan"></span></a>';
		main.appendChild(gallerydiv);
		// load first image
		replaceImg(varholder.ar[varholder.nxtnr-1], varholder);
		gallerydiv.style.display = "none";
	} else {
		var x_move = Math.round((Math.random()-.5)*(radius*2));
		var y_move = Math.round((Math.random()-.5)*(radius*2));
	}
	// keep main div withing windown boundaries
	if (x_move+main.xpos-newdiv.left+newdiv.w > ww-marg) {
		x_move*-1+main.xpos > marg ? x_move *= -1: x_move = 0;
	} else if (x_move+main.xpos < marg) {
		x_move*-1+main.xpos-newdiv.left+newdiv.w < ww-marg ? x_move *= -1: x_move = 0;
	}
	if (y_move+main.ypos+newdiv.h > wh-marg) {
		y_move*-1+main.ypos > marg ? y_move *= -1 : y_move = 0;
	} else if (y_move+main.ypos < marg) {
		y_move*-1+main.ypos+newdiv.h < wh-marg ? y_move *= -1: y_move = 0;
	}
	// MOVE NAVIGATION
	if (jump) {
		// jump straight to new position
		main.style.left = (main.xpos-parseFloat(getStyle(main, 'marginLeft'))+x_move)+"px";
		main.style.top = (main.ypos-parseFloat(getStyle(main, 'marginTop'))+y_move)+"px";
		ajaxpage(url, id);
	} else {
		// trigger the animation, load content when it's done
		reposition(main, x_move, y_move, false, 10, function(){ajaxpage(url, id)});
	}
}

// get window dimensions
function getWindowWidth() {
	var x = 0;
	if (self.innerHeight) {
		x = self.innerWidth;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		x = document.documentElement.clientWidth;
	} else if (document.body) {
		x = document.body.clientWidth;
	}
	return x;
}

function getWindowHeight() {
	var y = 0;
	if (self.innerHeight) {
		y = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		y = document.documentElement.clientHeight;
	} else if (document.body) {
		y = document.body.clientHeight;
	}
	return y;
}

// get style 
function getStyle(el, cssprop){
 if (el.currentStyle) //IE
  return el.currentStyle[cssprop]
 else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
  return document.defaultView.getComputedStyle(el, "")[cssprop]
 else //try and get inline style
  return el.style[cssprop]
}

// show/hide layer (layer, default display, new link name)
function showhide(id, btnId, name2) {
	var obj = document.getElementById(id);
	// check current display mode and define opposite
	if(!obj.disp1) {
		obj.disp1 = getStyle(obj, 'display');
		obj.disp1 == 'none' ? obj.disp2 = 'block' : obj.disp2 = 'none';
	}
	// switch
	!obj.style.display || obj.style.display == obj.disp1 ? obj.style.display = obj.disp2 : obj.style.display = obj.disp1;
	
	// change text link
	if (name2) {
		var btn = document.getElementById(btnId);
		if (!btn.name1) { btn.name1 = btn.innerHTML; btn.name2 = name2;}
		btn.innerHTML == btn.name1 ? btn.innerHTML = btn.name2 : btn.innerHTML = btn.name1;
	}
}