var THUMBS_VERT_HEIGHT = 60;
var THUMBS_HORZ_WIDTH = 80;
var MAX_SLIDE_SPEED = 4;

var isIE = document.all ? true : false;
var mouseX;
var mouseY;
var setPanelHeight = true;

var gallery_list = Array();

function Gallery() {
	this.id = 0;
	this.panel_alignment = "horizontal";
	this.slide_speed = 4;
	this.thumb_width = 80;
	this.thumb_height = 60;
}


// Initialize a gallery
// gid			= Gallery ID
// panelalign		= Panel Alignment - horizontal|vertical
// thumb_width		= thumbnail width
// thumb_height		= thumbnail height
// sp			= Slide speed
function add_gallery(gid, panelalign, thumb_width, thumb_height,sp) {
	if(!gid) return false;

	var g = new Gallery();
	g.id = gid;
	if(typeof(panelalign) != 'undefined') {
		if(panelalign=="vertical") g.panel_alignment = "vertical";
	}
	if(typeof(thumb_width) != 'undefined') {
		if(thumb_width) g.thumb_width = thumb_width;
	}
	if(typeof(thumb_height) != 'undefined') {
		if(thumb_height) g.thumb_height = thumb_height;
	}
	if(typeof(sp) != 'undefined') g.slide_speed = sp;

	gallery_list[gallery_list.length] = g;
}

function get_gallery(gid) {
	for(i=0;i<gallery_list.length;i++) {
		if(gallery_list[i].id == gid) return gallery_list[i];
	}
	return null;
}

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

function slider() {
	for(i=0;i<gallery_list.length;i++) {
		if(gallery_list[i].panel_alignment == 'horizontal') {
			SetHorizontalPanel(gallery_list[i].id);
		} else {
			SetVerticalPanel(gallery_list[i].id);
		}
	}
}


function showImage(obj) {
	if (fadeTO) {
		clearInterval( fadeTO );
	}
	var g = get_gallery(obj.getAttribute('gid'));

	var bigimage = document.getElementById("mainimage" + g.id);
	setOpacity(bigimage, 0);

	var img_title = '<b>'+obj.getAttribute('title')+'</b>';
	if(obj.getAttribute('alt')) img_title += ' - ' + obj.getAttribute('alt');

	bigimage.onload = function () {
		fadeIn("mainimage" + g.id, 0);
	};
	bigimage.setAttribute("src", obj.getAttribute('imgsrc'));
	bigimage.setAttribute("title", obj.getAttribute('title'));
	bigimage.setAttribute("alt", obj.getAttribute('alt'));
	var ref = document.getElementById("mainimagelink"+g.id);
	if (ref) {
		ref.setAttribute("href", obj.getAttribute('imgorg'));
		ref.setAttribute("title", obj.getAttribute('title'));
		ref.setAttribute("alt", obj.getAttribute('alt'));
	}
	ref = document.getElementById("mainimagetitle"+g.id);
	if (ref) {
		ref.innerHTML = img_title;
	}
	var thumbs = document.getElementById("gallery"+g.id).getElementsByTagName("LI");
	for (var i = 0; i < thumbs.length; i++) {
		if (thumbs[i].firstChild.className == "selected") {
			thumbs[i].firstChild.className = "";
		}
	}
	obj.className = "selected";
}
var fadeTO;
function fadeIn(objId, opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		setOpacity(obj, opacity);
		if (opacity < 100) {
			opacity += 10;
			fadeTO = window.setTimeout("fadeIn('" + objId + "'," + opacity + ")", 100);
		} else {
			delete(fadeTO);
		}
	}
}

function setOpacity(obj, opacity) {
	opacity = opacity == 100 ? 99.999 : opacity;
	obj.style.filter = "alpha(opacity:" + opacity + ")";
	obj.style.KHTMLOpacity = opacity / 100;
	obj.style.MozOpacity = opacity / 100;
	obj.style.opacity = opacity / 100;
	return true;
}

function getPadding(elm) {
	var elm_padding_side;
	var elm_padding_tops;
	if(isIE) {
		elm_padding_side = parseInt(elm.currentStyle['paddingLeft']) + parseInt(elm.currentStyle['paddingRight']);
		elm_padding_tops = parseInt(elm.currentStyle['paddingTop']) + parseInt(elm.currentStyle['paddingBottom']);
	} else {
		elm_padding_side = parseInt(document.defaultView.getComputedStyle(elm,null).getPropertyValue('padding-left'));
		elm_padding_side += parseInt(document.defaultView.getComputedStyle(elm,null).getPropertyValue('padding-right'));
		elm_padding_tops = parseInt(document.defaultView.getComputedStyle(elm,null).getPropertyValue('padding-top'));
		elm_padding_tops += parseInt(document.defaultView.getComputedStyle(elm,null).getPropertyValue('padding-bottom'));
	}
	return Array(elm_padding_side,elm_padding_tops);
}
function getMargin(elm) {
	var elm_margin_side;
	var elm_margin_tops;
	if(isIE) {
		elm_margin_side = parseInt(elm.currentStyle['marginLeft']) + parseInt(elm.currentStyle['marginRight']);
		elm_margin_tops = parseInt(elm.currentStyle['marginTop']) + parseInt(elm.currentStyle['marginBottom']);
	} else {
		elm_margin_side = parseInt(document.defaultView.getComputedStyle(elm,null).getPropertyValue('margin-left'));
		elm_margin_side += parseInt(document.defaultView.getComputedStyle(elm,null).getPropertyValue('margin-right'));
		elm_margin_tops = parseInt(document.defaultView.getComputedStyle(elm,null).getPropertyValue('margin-top'));
		elm_margin_tops += parseInt(document.defaultView.getComputedStyle(elm,null).getPropertyValue('margin-bottom'));
	}
	return Array(elm_margin_side,elm_margin_tops);
}


function SetHorizontalPanel(gid) {

	var g = get_gallery(gid);
	var panel1 = document.getElementById("panel1_"+g.id);
	var panel2 = document.getElementById("panel2_"+g.id);

	var listitems = panel2.getElementsByTagName("LI");
	var gallerysliderwidth = 0;
	var listitem_margin = 0;
	for(i=0;i<listitems.length;i++) {
		if(i==0) listitem_margin = getMargin(listitems[i]);
		var thumb = listitems[i].firstChild;
		thumb.removeAttribute("width");
		thumb.setAttribute("height", g.thumb_height);
		gallerysliderwidth += thumb.offsetWidth + listitem_margin[0];
	}

	panel2.style.left = "0px";
	panel2.style.top = "0px";

	panel1_paddings = getPadding(panel1);
	panel2_paddings = getPadding(panel2);

	panel2.style.width = gallerysliderwidth + panel2_paddings[0] + "px";
	if ( setPanelHeight ) {
		panel2.style.height = g.thumb_height + listitem_margin[1] + panel2_paddings[1] + "px";
		panel1.style.height = parseInt(panel2.style.height) + panel2_paddings[1] + "px";
	}
	var timer=null;
	panel1.onmouseover = function () {trackthemouse();timer=setInterval("SlidePanelHorizontal(" + gid + ");", 10);};
	panel1.onmouseout = function () {donttrackthemouse();clearInterval(timer);};
}

function SetVerticalPanel(gid) {
	
	var g = get_gallery(gid);
	var panel1 = document.getElementById("panel1_"+g.id);
	var panel2 = document.getElementById("panel2_"+g.id);

	var listitems = panel2.getElementsByTagName("LI");
	var gallerysliderheight = 0;
	var listitem_margin = 0;
	for(i=0;i<listitems.length;i++) {
		if(i==0) listitem_margin = getMargin(listitems[i]);
		var thumb = listitems[i].firstChild;
		thumb.removeAttribute("height");
		thumb.setAttribute("width", g.thumb_width);
		gallerysliderheight += thumb.offsetHeight + listitem_margin[1];
	}
	panel2.style.left = "0px";
	panel2.style.top = "0px";

	panel1_paddings = getPadding(panel1);
	panel2_paddings = getPadding(panel2);

	panel2.style.width = g.thumb_width + listitem_margin[0] + panel2_paddings[0] + "px";
	panel2.style.height = gallerysliderheight + panel2_paddings[1] + "px";
	panel1.style.width = parseInt(panel2.style.width) + panel2_paddings[0] + "px";

	var timer = null;
	panel1.onmouseover = function () {trackthemouse();timer=setInterval("SlidePanelVertical(" + gid + ")", 10);};
	panel1.onmouseout = function () {donttrackthemouse();clearInterval(timer);};
}



function SlidePanelHorizontal(gid) {

	if(!mouseX) return;

	var g = get_gallery(gid);
	var panel1 = document.getElementById("panel1_"+g.id);
	var panel2 = document.getElementById("panel2_"+g.id);
	
	var panel1_pos = findPos(panel1);
	var mouse_at_panel1X = (mouseX - panel1_pos[0]) - (panel1.offsetWidth * 0.5);
	var slide_speed = parseInt(MAX_SLIDE_SPEED / (panel1.offsetWidth * 0.5) * mouse_at_panel1X);

	var new_left = panel2.style.left;
	if( (slide_speed < -2) || (slide_speed > 2) ) new_left = parseInt(panel2.offsetLeft - slide_speed) + "px";
	if (slide_speed > 0) {
		if(panel2.offsetLeft <= -(panel2.offsetWidth - panel1.offsetWidth)) {
			new_left = parseInt(-(panel2.offsetWidth - panel1.offsetWidth)) + "px";
		}
	} else if (slide_speed < 0) {
		if(panel2.style.left >= "0px") new_left = "0px";
	}
	panel2.style.left = new_left;
}

function SlidePanelVertical(gid) {
	if(!mouseY) return;

	var g = get_gallery(gid);
	var panel1 = document.getElementById("panel1_"+g.id);
	var panel2 = document.getElementById("panel2_"+g.id);

	var panel1_pos = findPos(panel1);
	var mouse_at_panel1Y = (mouseY - panel1_pos[1]) - (panel1.offsetHeight * 0.5);
	var slide_speed = parseInt(MAX_SLIDE_SPEED / (panel1.offsetHeight * 0.5) * mouse_at_panel1Y);

	var new_top = panel2.style.top;
	if( (slide_speed < -2) || (slide_speed > 2) ) new_top = parseInt(panel2.offsetTop - slide_speed) + "px";
	if (slide_speed > 0) {
		if(panel2.offsetTop <= -(panel2.offsetHeight - panel1.offsetHeight)) {
			new_top = parseInt(-(panel2.offsetHeight - panel1.offsetHeight)) + "px";
		}
	} else if (slide_speed < 0) {
		if(panel2.style.top >= "0px") new_top = "0px";
	}
	panel2.style.top = new_top;
}



// Mouse Events
// ---------------------------------------
function trackthemouse() {
	document.onmousemove = getMouseXY;
	isIE = document.all ? true : false;
}

function donttrackthemouse() {
	document.onmousemove = null;
}

function getMouseXY(e) {
	if (isIE) {
		tempX = event.clientX + document.documentElement.scrollLeft;
		tempY = event.clientY + document.documentElement.scrollTop;
	} else {
		tempX = e.pageX;
		tempY = e.pageY;
	}
	if (tempX < 0) tempX = 0;
	if (tempY < 0) tempY = 0;
	mouseX = tempX;
	mouseY = tempY;
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft;
		curtop  = obj.offsetTop;
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
	}
	return [curleft,curtop];
}

addLoadEvent(slider);