var Geometry = {};

if (window.screenLeft) { //IE
    Geometry.getWindowX = function() { return window.screenLeft; };
    Geometry.getWindowY= function() { return window.screenTop; };
}
else if (window.screenX) { // Firefox
    Geometry.getWindowX = function() {return window.screenX; };
    Geometry.getWindowY = function() { return window.screenY; };
}

if (window.innerWidth) { // All browsers but IE
    Geometry.getViewportWidth = function() { return window.innerWidth; };
    Geometry.getViewportHeight = function() { return window.innerHeight; }
    Geometry.getHorizontalScroll = function() {return window.pageXOffset; };
    Geometry.getVerticalScroll = function() { return window.pageYOffset; };
}
else if (document.body.clientWidth) {
    // For IE without a DOCTYPE
    Geometry.getViewportWidth = function() { return document.body.clientWidth; };
    Geometry.getViewportHeight = function() { return document.body.clientHeight; };
    Geometry.getHorizontalScroll = function() { return document.body.scrollLeft; };
    Geometry.getVerticalScroll = function() { return document.body.scrollTop; };
}
else if (document.documentElement && document.documentElement.clientWidth){
    // For IE when there is a DOCTYPE
    Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; };
    Geometry.getViewportHeight = function() { return document.documentElement.clientHeight; };
    Geometry.getHorizontalScroll = function() { return document.documentElement.scrollLeft; };
    Geometry.getVerticalScroll = function() { return document.documentElement.scrollTop; };
}

if (document.documentElement && document.documentElement.scrollWidth) {
    Geometry.getDocumentWidth = function() { return document.documentElement.scrollWidth; };
    Geometry.getDocumentHeight = function() { return document.documentElement.scrollHeight; }
}
else if (document.body.scrollWidth) {
    Geometry.getDocumentWidth = function() { return document.body.scrollWidth; };
    Geometry.getDocumentHeight = function() { return document.body.scrollHeight; };
}

/* Module to drag an element
 * 
 * Arguments:
 *
 *  elementToDrag: the element that received the mousedown event or
 *    some containing element.  It must be absolutely positioned.  Its
 *    style.left and style.top values will be changed based on the user's
 *    drag.
 *
 *  event:  the Event object for the mousedown event.
 *
 */

function drag(elementToDrag, event){
    // The mouse position, in window coordinates, at which the 
    // drag event begins.
    var startX = event.clientX, startY = event.clientY;
    
    // The original position, in document coordinates, of the  element
    // that is going to be dragged.  Since elementToDrag is absolutely positioned
    // we assume that its offsetParent is the document body.
    var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

    // Even though the coordinates are computed in different coordinate systems
    // we can still compute the difference between them and use it in the 
    // moveHandler() function.  This works because the scrollbar position never
    // changes during the drag.
    var deltaX = startX - origX, deltaY = startY - origY;

    // Register the event handlers that will respond to the mousemove events
    // and the mouseup event that follow this mousedown event.
    document.addEventListener("mousemove",moveHandler,true);
    document.addEventListener("mouseup",upHandler,true);

    // We've handled this event.  Don't let anybody else see it.
    event.preventDefault();

    /*
     * This is the handler that captures mousemove events when an element is
     * being dragged.  It is responsible for moving the element.
     */

    function moveHandler(e) {
	// Move the element to the current mouse position adusted as necessary by
	// the offset of the initial mouse click.
	elementToDrag.style.left = (e.clientX - deltaX) + "px";
	elementToDrag.style.top = (e.clientY - deltaY) + "px";
	// Don't let anyone else see this event.
	e.stopPropagation();
    }

    /*
     * This is the handler that captures the final mouseup event that occurs at
     * the end of a drag.
     */

    function upHandler(e) {
	// Unregister the capturing event handlers.
	document.removeEventListener("mouseup",upHandler,true);
	document.removeEventListener("mousemove",moveHandler,true);
	// Don't let the event propagate any further.
	e.stopPropagation();
    }
}

/* End drag functions */



var getX = function (e) {
    var x = 0;
    while(e) {
	x += e.offsetLeft;
	e = e.offsetParent;
    }
    return x;
};
var getMenuX = function (e) {
    var x = 0;
    /*
      while(e.getAttribute('id') != 'menu-container') {
      x += e.offsetLeft;
      e = e.offsetParent;
      }
    */
    x += e.offsetLeft;
    return x;
};
var getY = function (e) {
    var y = 0;
    while(e) {
	y += e.offsetTop;
	e = e.offsetParent;
    }
    return y;
};
var rectangle = function (item) {
    return {left:getX(item),
            right:getX(item) + item.offsetWidth,
	    top:getY(item),
	    bottom:getY(item) + item.offsetHeight};
}
    var point = function (event) {
	return {x:event.clientX + document.body.scrollLeft,y:event.clientY + document.body.scrollTop};
    }
	var inRectangle = function (p,r) {
	    var result = p.x > r.left && p.x < r.right && p.y > r.top && p.y < r.bottom;
	    return result;
	};
var inEqRectangle = function (p,r) {
    var result = p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
    return result;
};
var swapImage = function (id) {
    document.getElementById(id).src = 'biography-green.jpg';
};
var swapImageBack = function (id) {
    document.getElementById(id).src = 'biography-16-georgia-italic.jpg';
};
var showSubMenu = function (A) {
    var item = document.getElementById(A[0]);
    var subitem = document.getElementById(A[1]);
    var x = item.offsetLeft;
    var y = item.offsetTop;
    var h = item.offsetHeight;
    subitem.style.top = (getY(item) + h) +"px";
    subitem.style.left = getX(item);
    subitem.style.display = 'block';
};
var hideSubMenu = function (A,event) {
    var item1 = document.getElementById(A[1]); //submenu
    var item0 = document.getElementById(A[0]); //menu
    var p = point(event);
    var tmp0 = inRectangle(p,rectangle(item0));
    var tmp1 = inEqRectangle(p,rectangle(item1));
    var r1 = {left:item1.offsetLeft,//item1 abs position
	      right:item1.offsetLeft + item1.offsetWidth,
	      top:item1.offsetTop,
	      bottom:item1.offsetTop + item1.offsetHeight};
    var r0 = {left:getX(item0),
	      right:getX(item0) + item0.offsetWidth,
	      top:getY(item0),
	      bottom:getY(item0) + item0.offsetHeight};
    var p = {x:event.clientX,y:event.clientY};
    alert('X: '+p.x+'  Y: '+p.y+'   submenu:  Left: '+r1.left+'  Right: '+r1.right+' Top: '+r1.top+'  Bottom: '+r1.bottom+'  menu:  Left: '+r0.left+'  Right: '+r0.right+' Top: '+r0.top+'  Bottom: '+r0.bottom);

    if (!tmp0 && !tmp1) {
        document.getElementById(A[1]).style.display = 'none';
    }
};
var keepSub = function (A,e) {
};
var loseSub = function (A,event) {
    var item1 = document.getElementById(A[1]); //submenu
    var item0 = document.getElementById(A[0]);
    var p = point(event);
    if (!inRectangle(p,rectangle(item0)) && !inRectangle(p,rectangle(item1))) {
        document.getElementById(A[1]).style.display = 'none';
    } 
};

var menuInit = function () {
    var paintings = document.getElementById('paintings');
    var paintingsSub = document.getElementById('paintings-sub');
    var A = ['paintings','paintings-sub'];
    paintings.onmouseover = function () {
	showSubMenu(A);
	var r0 = rectangle(document.getElementById('paintings'));
	var r1 = rectangle(document.getElementById('paintings-sub'));
	document.body.onmousemove = function (event) {
	    var e = !event ? window.event : event;
	    var p = point(e);
	    var result = document.getElementById('result');
	    if ( !inEqRectangle(p,r1) && !inEqRectangle(p,r0) ) {
		document.getElementById('paintings-sub').style.display = 'none';
		document.body.onmousemove = null;
	    };
	};
	
    };
    for (var a in paintingsSub.getElementsByTagName('a')) {
	a.onclick = paintingsSub.style.display = 'none';
    };
};

var pageInit = function () {
    if (window.location.search) { 
	var search = window.location.search;
	var pattern = /^\?n=(.*)$/;
	var result = pattern.exec(search);
	node = result[1];
    }
    else node = "";
    //alert(node);
    var viewportWidth = Geometry.getViewportWidth();
    var viewportHeight = Geometry.getViewportHeight();
    if ( node.match(/^art/) !== null ) {
	var artMenu = document.getElementById('art-menu');
	//artMenu.style.top = (viewportHeight-frontImageHeight)/2 - 60+'px';
	//artMenu.style.left = (viewportWidth-artMenu.offsetWidth)/2+'px';
	artMenu.style.top = '0px';
	artMenu.style.left = '0px';
	var paintings = document.getElementById('paintings');
	var paintingsSub = document.getElementById('paintings-sub');
	var A = ['paintings','paintings-sub'];
	paintings.onmouseover = function () {
	    showSubMenu(A);
	    var r0 = rectangle(document.getElementById('paintings'));
	    var r1 = rectangle(document.getElementById('paintings-sub'));
	    document.body.onmousemove = function (event) {
		var e = !event ? window.event : event;
		var p = point(e);
		if ( !inEqRectangle(p,r1) && !inEqRectangle(p,r0) ) {
		    document.getElementById('paintings-sub').style.display = 'none';
		    document.body.onmousemove = null;
		};
	    };
	
	};
	    var stepper = document.getElementById('picture-stepper');
	    var buttons = stepper.getElementsByTagName('span');
	    buttons[0].onclick = function () {// showPrevious
		var mainPic = document.getElementById('gallery-pic');
		if (currPicNum > minPicNum) {
		    mainPic.setAttribute('src',imageLib[currPicNum - 1].src);
		    currPicNum -= 1;
		} else {
		    mainPic.setAttribute('src',imageLib[maxPicNum].src);
		    currPicNum = maxPicNum;
		}
		
		var gallPic = document.getElementById('gallery-pic');
		var gallPicWidth = gallPic.offsetWidth;
		gallPic.style.left = (frontImageWidth-gallPicWidth)/2+'px';
	    };
	    buttons[1].onclick = function () {// showNext
		var mainPic = document.getElementById('gallery-pic');
		if (currPicNum < maxPicNum) {
		    mainPic.setAttribute('src',imageLib[currPicNum + 1].src);
		    currPicNum += 1;
		} else {
		    mainPic.setAttribute('src',imageLib[minPicNum].src);
		    currPicNum = minPicNum;
		}
		var gallPic = document.getElementById('gallery-pic');
		var gallPicWidth = gallPic.offsetWidth;
		//var gallPicHeight = gallPic.offsetHeight;
		//gallPic.style.top = (frontImageHeight-gallPicHeight)/2+'px';
		gallPic.style.left = (frontImageWidth-gallPicWidth)/2+'px';
	    };
	    stepper.style.top = (viewportHeight+frontImageHeight)/2 + 30+'px';
	    stepper.style.left = (viewportWidth-stepper.offsetWidth)/2+'px';
    } else if (node.match(/^bio$/) !== null ) {
	var bioTab = document.getElementById('bio-table');
	bioTab.style.top = '100px';
	bioTab.style.left = '100px';
    } else if ( node.match(/^statement$/) !== null ) {
	var staTab = document.getElementById('statement-table');
	staTab.style.top = '100px';
	staTab.style.left = '100px';
    } else if ( node.match(/^cv$/) !== null ) {
	var cvTab = document.getElementById('cv-table');
	cvTab.style.top = '100px';
	cvTab.style.left = '100px';
    } else if ( node.match(/^contact$/) !== null ) {
	var conBox = document.getElementById('contact-info');
	var artMenu = document.getElementById('art-menu');
	var conMess = document.getElementById('contact-message');
	conBox.style.top = artMenu.offsetHeight + 100 + 'px';
	conBox.style.left = (artMenu.offsetWidth - conBox.offsetWidth)/2 + 'px';
	conMess.style.top = conBox.offsetHeight + artMenu.offsetHeight + 200 + 'px';
	conMess.style.left = 0 + 'px';
	conMess.style.width = artMenu.offsetWidth - 50 + 'px';
    } else if ( node === "news" ) {
	var artMenu = document.getElementById('art-menu');
	var newsBox = document.getElementById('news-box');
	var newsHeight = newsBox.offsetHeight;
	var newsWidth = newsBox.offsetWidth;
	newsBox.style.top = artMenu.offsetHeight + 10 + 'px';
	newsBox.style.left = (viewportWidth - newsWidth)/2 + 'px';
    }else if ( node === "" ) {
	//alert('Default');
	    var frontImage = document.getElementById('front-image');
	    frontImage.style.position = 'absolute';
	    var frontImageWidth = frontImage.offsetWidth;
	    var w = frontImageWidth;
	    var frontImageHeight = frontImage.offsetHeight;
	    var h = frontImageHeight;
	    var uw = viewportWidth;
	    var uh = viewportHeight - 60;//allow space at top for art menu
	    var iw,ih;
	    if ( w > 0.7*uw || h > 0.7*uh ) {
		if ( w/uw > h/uh) {
		    iw = 0.7*uw;
		    ih = uw/w*0.7*h;
		} else {
		    ih = 0.7*uh;
		    iw = uh/h*0.7*w;
		}
	    
	    } else {
		iw = w; ih = h;
	    }
	    frontImage.style.top = 60+(viewportHeight-60-ih)/2+'px';
	    frontImage.style.left = (viewportWidth-iw)/2+'px';
	    frontImage.width = iw;
	    frontImage.height = ih;
    } else {  }
};

var thumbInit = function () {
    var thumBox = document.getElementById('thumbs');
    var viewportWidth = Geometry.getViewportWidth();
    var viewportHeight = Geometry.getViewportHeight();
    var menuBox = document.getElementById('art-menu');
    var sideBox = document.getElementById('side-box');
    var menuWidth = menuBox.offsetWidth;
    var menuHeight = menuBox.offsetHeight;
    var thumWidth = thumBox.offsetWidth;
    var thumHeight = thumBox.offsetHeight;
    thumBox.style.position = 'absolute';
    thumBox.style.left = (viewportWidth-thumWidth)/2+'px';
    thumBox.style.top = (viewportHeight-menuHeight-thumHeight)/2+menuHeight+'px';
    sideBox.style.left =0+'px';
    sideBox.style.top = menuHeight+50+'px';
    sideBox.style.height = viewportHeight - menuHeight - 50 +'px';
    //sideBox.style.border = 'solid 1px blue';
    //document.getElementById('navbuts').style.paddingTop = viewportHeight - menuHeight - 250 +'px';
    var showFull = function (j,vw,vh) {
	var clearSideBox = function () {
	    while (document.getElementById('pictitle').firstChild) {
		document.getElementById('pictitle').removeChild(document.getElementById('pictitle').firstChild);
	    }
	    while (document.getElementById('year').firstChild) {
		document.getElementById('year').removeChild(document.getElementById('year').firstChild);
	    }
	    while (document.getElementById('media').firstChild) {
		document.getElementById('media').removeChild(document.getElementById('media').firstChild);
	    }
	    while (document.getElementById('dimen').firstChild) {
		document.getElementById('dimen').removeChild(document.getElementById('dimen').firstChild);
	    }
	    while (document.getElementById('sold').firstChild) {
		document.getElementById('sold').removeChild(document.getElementById('sold').firstChild);
	    }
	}
	if (document.getElementById('imgBox')) {
	    document.body.removeChild(document.getElementById('imgBox'));
	    clearSideBox();
	}
	document.body.style.backgroundColor = 'white';

	var w = imagList[j].pw;
	var h = imagList[j].ph;
	//usable width and height
	var uw = vw - sideBox.offsetWidth;
	var uh = vh - menuBox.offsetHeight;
	var iw,ih;
	if ( w > 0.8*uw || h > 0.8*uh ) {
	    if ( w/uw > h/uh) {
		iw = 0.8*uw;
		ih = uw/w*0.8*h;
	    } else {
		ih = 0.8*uh;
		iw = uh/h*0.8*w;
	    }
	    
	} else {
	    iw = w; ih = h;
	}
	var imgBox = document.createElement('div');
	imgBox.id = 'imgBox';
	imgBox.style.position = 'absolute';
	imgBox.style.padding = '10 10 10 10';
	imgBox.style.backgroundColor = 'white';
	imgBox.style.width = iw+'px';
	imgBox.style.height = ih+'px';
	imgBox.style.border = 'solid 2px #979e9c';
	/*
	var infoBox = document.createElement('div');
	infoBox.id = 'infoBox';
	infoBox.style.height = '40px';
	infoBox.style.backgroundColor = 'white';
	infoBox.style.color = '#626d6a';
	infoBox.style.fontSize = '10px';
	infoBox.style.paddingTop = '10px';
	*/
	/* var titBox = document.createElement('span');
	titBox.style.fontSize = '11px';
	titBox.appendChild(document.createTextNode(imagList[j].title));
	infoBox.appendChild(titBox); */
	document.getElementById('pictitle').appendChild(document.createTextNode(imagList[j].title));
	if ( imagList[j].year !== '' ) {
	    //infoBox.appendChild(document.createTextNode(', '+imagList[j].year));
	    document.getElementById('year').appendChild(document.createTextNode(imagList[j].year));
	}
	if ( imagList[j].media !== '' ) {
	    //infoBox.appendChild(document.createTextNode(', '+imagList[j].media));
	    document.getElementById('media').appendChild(document.createTextNode(imagList[j].media));
	}
	if ( imagList[j].width !== '' ) {
	    //infoBox.appendChild(document.createTextNode(', '+imagList[j].width+'"x'+imagList[j].height+'"'));
	    document.getElementById('dimen').appendChild(document.createTextNode(imagList[j].width+'" x '+imagList[j].height+'"'));
	}
	if ( imagList[j].sold === 'sold' ) {
	    //infoBox.appendChild(document.createTextNode(', '+'private collection'));
	    document.getElementById('sold').appendChild(document.createTextNode('private collection'));
	}
	var padTLR = 10;
	var padB = 50;
	var fullImg = document.createElement('img');
	fullImg.id = 'fullImg';
	fullImg.src = origsrcpath+imagList[j].fullsrc;
	fullImg.width = iw;
	fullImg.height = ih;
	//fullImg.style.position = 'absolute';
	//imgBox.style.left = (uw-iw-2*padTLR)/2+sideBox.offsetWidth+'px';
	imgBox.style.left = sideBox.offsetWidth + 100 +'px';
	imgBox.style.top = (uh-ih-padTLR-padB)/2+menuBox.offsetHeight+'px';
	imgBox.style.zIndex = '1';
	imgBox.appendChild(fullImg);
	//imgBox.appendChild(infoBox);
	document.body.appendChild(imgBox);
	
	document.getElementById('navbuts').style.display = 'block';
	    
	document.getElementById('stop').style.display = 'block';
	document.getElementById('stop').getElementsByTagName('span')[0].onclick = function () {//stop button
	    return function () {
		document.body.removeChild(document.getElementById('imgBox'));
		document.getElementById('thumbs').style.display = 'block';
		document.getElementById('stop').style.display = 'none';
		document.getElementById('navbuts').style.display = 'none';
		clearSideBox();
		document.body.style.backgroundColor = 'white';
	    }
	}();
	
	/*
	document.getElementById('stop').getElementsByTagName('span')[1].onclick = function (w,h,vw,vh,fullImg,j) {//super button
	    var superPos = function (w,h,uw,uh,img) {
		var iw,ih;
		if ( w > 0.8*uw || h > 0.8*uh ) {
		    if ( w/uw > h/uh) {
			iw = 0.8*uw;
			ih = uw/w*0.8*h;
		    } else {
			ih = 0.8*uh;
			iw = uh/h*0.8*w;
		    }
	    
		} else {
		    iw = w; ih = h;
		}
		img.width = iw;
		img.height = ih;
		img.style.left = (uw-iw)/2+'px';
		img.style.top = (uh-ih)/2+'px';
	    };
	    return function () {
		//document.body.removeChild(document.getElementById('fullImg'));
		document.getElementById('thumbs').style.display = 'none';
		document.getElementById('side-box').style.display = 'none';
		document.getElementById('art-menu').style.display = 'none';
		clearSideBox();
		superPos(w,h,vw,vh,fullImg);
		var superMenu = document.getElementById('super-menu');
		superMenu.style.display = 'block';
		superMenu.style.left = '50px';
		superMenu.style.top = '50px';
		document.getElementById('drag-bar').setAttribute('onmousedown','drag(this.parentNode,event)');
		document.getElementById('super-back').onclick = function () {
		    return function () {
			if ( j === 0 ) { j = imagList.length - 1; } else { j = j - 1; }
			fullImg.src = origsrcpath+imagList[j].fullsrc;
		    }
		}(fullImg);
		document.getElementById('super-forward').onclick = function () {
		    return function () {
			if ( j < imagList.length-1 ) { j = j+1; } else { j = 0; }
			fullImg.src = origsrcpath+imagList[j].fullsrc;
		    }
		}(fullImg);
		document.getElementById('super-stop').onclick = function () {
		    return function () {
			document.getElementById('super-menu').style.display = 'none';
		    }
		}();
	    }
	}(w,h,vw,vh,fullImg,j);
	*/

    }
    //activate thumbnails
    var thums = thumBox.getElementsByTagName('img');
    for (var i = 0; i < thums.length; i++) {
	thums[i].style.cursor = 'pointer';
	thums[i].onclick = function(j,vw,vh,sideBox,menuBox,thumBox,showFull){
	    return function () {
		thumBox.style.display = 'none';
		document.getElementById('navbuts').style.display = 'inline';
		document.getElementById('back').onclick = function () {
		    return function () {
			if (j === 0){ j = imagList.length-1; } else { j = j-1; }
			showFull(j,vw,vh);}
		}();
		document.getElementById('forward').onclick = function () {
		    return function () {
			if (j === imagList.length-1){ j = 0; } else { j = j+1; }
			showFull(j,vw,vh);}
		}();
		showFull(j,vw,vh);
	    }
	}(i,viewportWidth,viewportHeight,sideBox,menuBox,thumBox,showFull);
    }
	

}