var REF_TOP = "topNav";
var REF_SIDE = "sideWrap";
var REF_CONTENT = "studentContent";
var REF_CONTENT_WRAPPER = "contentWrapper";
var REF_RESOURCE = "ote_drawer_resources";
var REF_RESOURCE_CONTENT = "resourceContent";
var templateType;
var CONTENT_HEIGHT = 885;
var CONTENT_WIDTH = 1130;

var isIE = navigator.userAgent.indexOf('MSIE') != -1;
var H_MARGIN = 100;
document.onmousemove = null;
document.onmouseup = null;

//Main Element positioning  ---------------------------------------------------------------------------------------
function DocumentPositions() {
	this.topNavHeight = 80;
	this.sideWrapWidth = 252;
	
	this.setSize = function() {
		//this.sizeTop();
		if(templateType == "type1" || templateType == "type2") {
			this.sizeSide();
		}
		this.sizeContent();
		if(templateType == "type1" || templateType == "type3") {
			this.sizeResource();
		}
	}
	
	this.sizeTop = function() {
		var top = _(REF_TOP);
		top.style.height = String(this.topNavHeight) + "px";
	}
	
	this.sizeSide = function() {
		var side = _(REF_SIDE);
		side.style.top = String(this.topNavHeight) + "px";
		side.style.width = String(this.sideWrapWidth) + "px";
		side.style.height = String(f_clientHeight() - this.topNavHeight) + "px";
	}
	
	this.sizeContent = function() {
		var contentWapper = _(REF_CONTENT_WRAPPER);
		contentWapper.style.top = String(this.topNavHeight) + "px";
		contentWapper.style.left = String(this.sideWrapWidth) + "px";
		contentWapper.style.height = String(f_clientHeight() - this.topNavHeight) + "px";
		contentWapper.style.width = String(f_clientWidth() - this.sideWrapWidth) + "px";
		
	}
	
	this.sizeResource = function() {
		var resource = _(REF_RESOURCE);
		if(resource == null) return;
		
		if(resource.positionState == "down") {
			resource.style.top = String(this.getResourceDownTop()) + "px";
		} else {
			var resourceContent = _(REF_RESOURCE_CONTENT);
			if(resourceContent == null) return;
			resourceContent.style.height = String(this.getResourceUpHeight()) + "px";
		}	
	}
	
	this.clickResource = function() {
		
		var resource = _(REF_RESOURCE);
		var resourceContent = _(REF_RESOURCE_CONTENT);

		var trans = new Transition(this.slideResourceTab, this.getResourceDownTop(), this.getResourceUpTop(), 0.5,null);
		if(resource.positionState == "down") {
			resource.positionState = "up"
			trans.start();
			resourceContent.style.height = String(this.getResourceUpHeight()) + "px";
			
		} else {
			resource.positionState = "down"
			trans.reverse();
			
		}
	
	}
	
	this.slideResourceTab = function(x) {
		_(REF_RESOURCE).style.top = String(x) + "px";
	} 
	
	this.initResource = function() {
		var resource = _(REF_RESOURCE);
		resource.positionState = "down";
	}
	
	this.getResourceDownTop = function() {
		return f_clientHeight() - 60;
	}
	
	this.getResourceUpTop = function() {
		var RESOURCE_UP_TOP_CAP = this.topNavHeight + 60; // 155
		var temp = f_clientHeight() - _(REF_RESOURCE).offsetHeight; //79
		return (temp > RESOURCE_UP_TOP_CAP) ? temp : RESOURCE_UP_TOP_CAP;
	}
	
	this.getResourceUpHeight = function() {
		var max = 645;
		var result = f_clientHeight() - 180;
		return (result < max) ? result : max;
	}
}

var documentPositions = new DocumentPositions();



function insertTopNav() {
	var topNav = document.createElement("div");
	var body = document.childNodes[0].childNodes[1];
	body.appendChild(topNav);
	topNav.setAttribute("id","topNav");
	topNav.innerHTML = "Top Nav bar will go here.";

}

function doClickResource() {
	documentPositions.clickResource();
}

function initBreadcrumb() {
	var breadcrumb = _('breadcrumb');
	xml_addImage(breadcrumb,"ui-images/bc_arrow.gif","absmiddle");
	var anchor = xml_addAnchor(breadcrumb,"../index.html");
	xml_addTextNode(anchor,"Home");
	
	xml_addImage(breadcrumb,"ui-images/bc_arrow.gif","absmiddle");
	anchor = xml_addAnchor(breadcrumb,"#");
	xml_addTextNode(anchor,"Unit 1");
	
	xml_addImage(breadcrumb,"ui-images/bc_arrow.gif","absmiddle");
	anchor = xml_addAnchor(breadcrumb,"#");
	xml_addTextNode(anchor,"Story 1");
	
	xml_addImage(breadcrumb,"ui-images/bc_arrow.gif","absmiddle");
	xml_addTextNode(breadcrumb,"2 - 2");

}

function xml_addImage(parent,src,align) {
	var newImage = document.createElement("img");
	parent.appendChild(newImage);
	newImage.setAttribute("src",src);
	if(align != null) newImage.setAttribute("align",align);
	return newImage;
}

function xml_addAnchor(parent,href) {
	var newAnchor = document.createElement("a");
	parent.appendChild(newAnchor);
	newAnchor.setAttribute("href",href);
	return newAnchor;
}

function xml_addTextNode(parent,text) {
	var text = document.createTextNode(text);
	parent.appendChild(text);
}

function doOnload(tt,width, height) {
	templateType = tt;

	var content = _(REF_CONTENT);
	var holder = _("contentHolder");
	if(height == null) height = CONTENT_HEIGHT;
	if(width == null) width = CONTENT_WIDTH;
	content.style.height = String(height) + "px";
	content.style.width = String(width) + "px";
	holder.style.height = String(height + 70) + "px";
	
	if(templateType == "type3" || templateType == "type4") {
		
		documentPositions.sideWrapWidth = 20;
	}
	if(templateType == "type1" || templateType == "type3") {
		documentPositions.initResource();
	}
	documentPositions.setSize();
	//initBreadcrumb();
	initPanTool();
	displayScroll();
	//menuInit();
}

function doOnloadIndex(tt,width, height) {
	templateType = tt;

	var content = _(REF_CONTENT);
	var holder = _("contentHolder");
	if(height == null) height = CONTENT_HEIGHT;
	if(width == null) width = CONTENT_WIDTH;
	content.style.height = String(height) + "px";
	content.style.width = String(width) + "px";
	holder.style.height = String(height + 70) + "px";
	
	if(templateType == "type3" || templateType == "type4") {
		
		documentPositions.sideWrapWidth = 20;
	}
	if(templateType == "type1" || templateType == "type3") {
		documentPositions.initResource();
	}
	documentPositions.setSize();
	//initBreadcrumb();
	displayScroll();

}

function doResize() {
	documentPositions.setSize();
	displayScroll();
	//alert(_("contentWrapper").offsetLeft);
	//alert(_("studentContent").offsetLeft);
}

//  Utility  ------------------------------------------------------------------------------------------------------------------------------------
function _(id) {
	return document.getElementById(id);
}

function fixPNG(img) {
	if (!isIE) {
		img.onreadystatechange = null;
		return;
	}
	if (img.readyState != 'complete')
		return;

	var src = img.src;

	if (src.indexOf('.png') == src.length - 4) {
		img.width = img.offsetWidth;
		img.height = img.offsetHeight;
		img.style.filter = 
			"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
		img.src = 'ui-images/blank.gif';
	}
}


// Size -------------------------------------------------------------------------------------------------------------------------------------

	function f_clientWidth() {
		return f_filterResults (
			window.innerWidth ? window.innerWidth : 0,
			document.documentElement ? document.documentElement.clientWidth : 0,
			document.body ? document.body.clientWidth : 0
		);
	}
	
	function f_clientHeight() {
		return f_filterResults (
			window.innerHeight ? window.innerHeight : 0,
			document.documentElement ? document.documentElement.clientHeight : 0,
			document.body ? document.body.clientHeight : 0
		);
	}
	
	function f_scrollLeft() {
		return f_filterResults (
			window.pageXOffset ? window.pageXOffset : 0,
			document.documentElement ? document.documentElement.scrollLeft : 0,
			document.body ? document.body.scrollLeft : 0
		);
	}
	
	function f_scrollTop() {
		return f_filterResults (
			window.pageYOffset ? window.pageYOffset : 0,
			document.documentElement ? document.documentElement.scrollTop : 0,
			document.body ? document.body.scrollTop : 0
		);
	}
	
	function f_filterResults(n_win, n_docel, n_body) {
		var n_result = n_win ? n_win : 0;
		if (n_docel && (!n_result || (n_result < n_docel)))
			n_result = n_docel;
		return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
	}
	
	
// Pan Tool ----------------------------------------------------------------------------------------------------------------------------------------
var pageImg;
var pageViewBox;
var scale = 0;
var dragX;
var dragged = false;
var currentPos = 0;
var panTransition;
var scale;
var lastPos = 0;



function initPanTool() {
	var content = _('studentContent');
	pageImg = _('pageImage');
	pageViewBox = _('pageViewBox');
	if(pageImg == null) return;
	panTransition = new Transition(displayScroll, 0, 0, 0.4);
	if (isIE) {
		pageViewBox.style.height = (pageViewBox.offsetHeight + 3) + 'px';
	}
	pageImg.onmousedown = grab;
	scale = content.offsetWidth / pageImg.offsetWidth;
}

function slideContent() {
	var content = _('studentContent');
	if (panTransition.inTransition)
		return;
	panTransition.startValue = currentPos;
	if ((pageImg.offsetWidth - document.body.clientWidth/scale)/2 > currentPos)
		panTransition.endValue = content.offsetWidth - document.body.clientWidth + H_MARGIN + documentPositions.sideWrapWidth;
	else
		panTransition.endValue = 0;
	panTransition.start();
}

function grab(e) {
	if (!e) e = event;
	dragX = e.clientX;
	lastPos = currentPos;
	dragged = false;
	document.onmousemove = drag;
	document.onmouseup = drop;
}

function drag(e) {
	if (!e) e = event;
	if (document.selection)
		document.selection.clear();
	dragged = true;
	currentPos = ((e.clientX - dragX)*scale)+lastPos;
	displayScroll();
}

function drop(e) {
	if (!e) e = event;
	//if (dragged)
	//	drag(e);
	//else
	//	slideContent();
	
	document.onmousemove = null;
	document.onmouseup = null;
}

function displayScroll(pos) {
	if(pageImg == null) return;
	var content = _('studentContent');
	if (pos == undefined)
		pos = currentPos;
		
	var width = document.body.clientWidth;
	
	if (width >= content.offsetWidth + H_MARGIN + documentPositions.sideWrapWidth) {
		
		width = pageImg.offsetWidth + H_MARGIN;
		pageViewBox.style.visibility = 'hidden';
	}
	else {
		
		pageViewBox.style.visibility = 'visible';
		if (isIE)
			width += 5*scale;
		else
			width -= 5*scale;
		pageViewBox.style.width = ((width- documentPositions.sideWrapWidth)/scale - 5) + 'px';
		
		if (pos < 0) {
			pos = 0;
		} else if (pos > content.offsetWidth + H_MARGIN - document.body.clientWidth + documentPositions.sideWrapWidth) {
			pos = content.offsetWidth + H_MARGIN - document.body.clientWidth + documentPositions.sideWrapWidth;
			
		}
		currentPos = pos;
		pageViewBox.style.left = pos/scale  + 'px';
		content.style.left = ((H_MARGIN / 2) - pos) + 'px';
	}
}
	
// Transition ----------------------------------------------------------------------------------------------------------------------------------------
Array.prototype.remove = function(i) {
		for (; i < this.length - 1; i++)
			this[i] = this[i + 1];
		delete this[i];
	};

	var currentTransitions = [];

	var record;
	var callBackFunction;

	function Transition(setValue, start, end, duration, callBackFunction) {
		this.callBackFunction = callBackFunction;
	
		if (typeof(setValue) == 'string')
			this.setValue = new Function('_pos_', setValue + ' = _pos_;');
		else
			this.setValue = setValue;

		this.startValue = start;
		this.endValue = end;
		this.duration = duration / 0.03;

		this.inTransition = false;

		this.currentTransitionIndex = -1;

		this.start = function() {
			if (this.inTransition)
				return;
			this.inTransition = true;
			this.currentTransitionIndex = currentTransitions.length;
			currentTransitions[currentTransitions.length] = this;
			this.t = 0;
			this.a = 30 * (this.endValue - this.startValue) / (this.duration * this.duration * this.duration * this.duration * this.duration);
			this.C1 = this.duration * this.duration / 3;
			this.step();
		}
	
		this.step = function() {
			if (!this.inTransition)
				return;
			else if (this.t >= this.duration) {
				this.setValue(this.endValue);
				this.stop();
			}
			else {
				var t = this.t;
				var t1 = this.duration;
				var value = this.a * t * t * t * (t * (t/5 - t1/2) + this.C1);

				this.setValue(value + this.startValue);

				this.t++;

				setTimeout('currentTransitions['+this.currentTransitionIndex+'].step()', 30);
			}
		}

		this.stop = function() {
			this.inTransition = false;
			currentTransitions.remove(this.currentTransitionIndex);
			if(this.callBackFunction != null) {
				this.callBackFunction();
			}
		}

		this.reverse = function() {
			if (this.inTransition)
				return;
			var swap = this.startValue;
			this.startValue = this.endValue;
			this.endValue = swap;
			this.start();
		}
	}
	
	// thumbs and nav functions
	Array.prototype.getIndex = function(item) {
		for(var i = 0; i < this.length; i++) {
			if(this[i] == item) {
				return i;
			}
		}
		return -1;
	}


	function getLeftThumb() {
		var pageName = getPageName();
		var name = pageName;
		var index = pageName.indexOf("-");
		if(index > -1) {
			name = pageName.substring(0,index);
		}
		return "images/thumb_" + name + ".png";
	}
	
	function getRightThumb() {
		//thumb_blank.png
		var pageName = getPageName();
		var name = pageName;
		var index = pageName.indexOf("-");
		if(index > -1) {
			name = pageName.substring(index + 1);
		} else {
			name = "blank";
		}
		return "images/thumb_" + name + ".png";
	}
	
	function getLeftArrowHREF() {
		var index = pageList.getIndex(getPageName());
		var prev;
		prev = (index == 0) ? pageList.length - 1 : index - 1;
		return pageList[prev] + ".html";
	}
	
	function getRightArrowHREF() {
		var index = pageList.getIndex(getPageName());
		var next;
		next = (index == pageList.length - 1) ? 0 : index + 1;
		return pageList[next] + ".html";
	}
	
	function getPageName() {
		var url = document.URL;
		var index = url.lastIndexOf("/");
		var indexFile = url.lastIndexOf("\\");
		if(indexFile > index) index = indexFile;
		var index2 = url.lastIndexOf(".htm");
		var name = url.substring(index + 1,index2);
		return name.toLowerCase();
	}