var selectedImage = 'timage0';
var x;
var timer;
function load(page){
	if(document.getElementById('pannel2')){
		document.getElementById('pannel2').innerHTML = '';
	}

	document.getElementById('loadframe').src = 'thumbs.php?page=' + page + '&gallery=' + getURLVar('gallery') +'&' + Date.parse(Date());
	document.getElementById('mainimage').src='loading.gif';
	jsload();
	var obj = document.getElementById('pannel1');
}
function jsload(){
	if(document.getElementById('timage0')){
		document.getElementById('pannel2').style.left="0px";
		thumbclick(document.getElementById('timage0'));
		document.getElementById('pannel1').onmouseover = function(e){
			trackthemouse(e);
			timer = setTimeout("move()", 10);
		}
		var links = document.getElementsByTagName('img')
		for (var i=0; i<links.length; i++) {
			if(links[i].className == 'selectedtimage' || links[i].className == 'timage'){
				links[i].onmouseover = function(){
					if(this.className != 'selectedtimage'){
					this.className = 'timagehover';
					}
				}
				links[i].onmouseout = function(){
					if(this.className != 'selectedtimage'){
					this.className = 'timage';
					document.getElementById(selectedImage).className = 'selectedtimage';
					}
				}
			}
			links[i].onmousemove = function(e){
				trackthemouse(e);
			}
		}
		document.getElementById('pannel2').onmousemove = function(e){
			trackthemouse(e);
		}

        document.getElementById('pannel1').onmouseout = function(){
            document.getElementById('pannel2').onmousemove = null;
            clearInterval(timer);
        }

		document.getElementById('pannel2').onmouseout = function(){
			document.getElementById('pannel2').onmousemove = null;
			clearInterval(timer);
		}
	}else{
		setTimeout("jsload()", 100);
	}
}
function getURLVar(urlVarName) {
//divide the URL in half at the '?' 
var urlHalves = String(document.location).split('?');
var urlVarValue = '';
if(urlHalves[1]){
//load all the name/value pairs into an array 
var urlVars = urlHalves[1].split('&');
//loop over the list, and find the specified url variable 
for(i=0; i<=(urlVars.length); i++){
if(urlVars[i]){
//load the name/value pair into an array 
var urlVarPair = urlVars[i].split('=');
if (urlVarPair[0] && urlVarPair[0] == urlVarName) {
//I found a variable that matches, load it's value into the return variable 
urlVarValue = urlVarPair[1];
}
}
}
}
return urlVarValue;   
}
function thumbclick(e){
	document.getElementById(selectedImage).className='timage';
	document.getElementById('mainimage').src=e.getAttribute('mainimage');
	selectedImage = e.id;
	e.className="selectedtimage";
}
function trackthemouse(e){
	x = (e) ? e.pageX : event.clientX;
	var pannel1 = document.getElementById('pannel1');
	var pannel2 = document.getElementById('pannel2');
	var obj = pannel1;
	while(obj){
		x -= obj.offsetLeft;
		obj = obj.offsetParent;
	}
	x -= pannel1.offsetWidth/2;

	if(x<0){var tmp= 0-x}else{var tmp=x;}
	if(x!=0 && (tmp/180) <= 1){
		x=0;
	}else{
		x /= 80;
	}
	//document.getElementById('div').innerHTML = x;
}

function move(){
	var pannel1 = document.getElementById('pannel1');
	var pannel2 = document.getElementById('pannel2');
	var offset = pannel2.style.left.replace(/[A-Za-z]/g, '');
	if(x<0){
		if(offset-x < 0){
			pannel2.style.left = (offset - x)+"px";
		}
		if(offset-x >= 0){
			pannel2.style.left = "0px";
		}
	}else if(x>0){
		if(pannel2.offsetWidth == pannel1.offsetWidth){
			pannel2.style.left = (offset - x)+"px";
		}
		if((offset-pannel1.offsetLeft-pannel1.offsetWidth) > (0-(pannel1.offsetLeft+pannel2.offsetWidth))){
			pannel2.style.left = (offset - x)+"px";
		}
	}
	timer = setTimeout("move()", 10);
}