var intId = 0;
var curImg;
var faderSpeed = 0.075;
var fadeOut = false;

function loadGallery(name)
{
	if (curImg != null)
	{
		curImg.style.display = 'none';
//		curImg = document.getElementById('div_dummy')
//		curImg.style.display = 'block';
	}

	// Create the AJAX request
	if (window.XMLHttpRequest)     // Object of the current windows
	{
		request = new XMLHttpRequest();     // Firefox, Safari, ...
	}
	else if (window.ActiveXObject)   // ActiveX version
	{
		request = new ActiveXObject("Microsoft.XMLHTTP");    // Internet Explorer
	}

	url = 'get.php?or=horiz&rc=1&h=70&ph=' + name;

	request.onreadystatechange = function() { processResponse(request); };
	request.open('GET', url, true);
	request.send(null);
}

function processResponse(http_request)
{
	if (http_request.readyState == 4)
	{
		if (http_request.status == 200)
		{
			var html = http_request.responseText;
			var mnu = document.getElementById('menu');
			mnu.style.top = 0;

			mnu.innerHTML = html;
		}
		else
		{
			alert('There was a problem with the request (' + http_request.status + ').');
		}
	}
}

function sanitizeId(s)
{
	t = s;
	while (t.search('/') != -1)
	{
		t = t.replace('/', '_');
	}

	return t;
}

function showImage(name, size)
{
	sName = sanitizeId(name);

	divId = "div_" + sName;
	imgId = "img_" + sName;

	if (curImg && curImg.id == divId)
	{
		return;
	}
	
	var pic = document.getElementById('picture');

	var cnt = document.getElementById(divId);
	var im = document.getElementById(imgId);
	if (cnt == null)
	{
		cnt = document.createElement('div');

		cnt.setAttribute('id', divId);
		//cnt.style.position = 'absolute';
		cnt.style.display = 'none';
		//cnt.style.width = pic.offsetWidth + 'px';
		cnt.style.textAlign = 'center';
		
		im = document.createElement('img');
		im.setAttribute('id', imgId);
		im.src = 'pic.php/' + name + '?e=' + size;		

		var ln = document.createElement('a');
		ln.href = name;
		ln.target = 'gal2_full';
		ln.appendChild(im);

		cnt.appendChild(ln);
		pic.appendChild(cnt);
	}

	// Show "loading" image
	var ld = document.getElementById('loading');
	ld.style.top = (getElementPosition(pic).top + 80) + 'px';
	ld.style.width = pic.offsetWidth + 'px';
	ld.style.zIndex = 1000;
	ld.style.display = 'block';

	// Wait for the image to be loaded
	intId = setInterval(function() { waitForImage(im, cnt, curImg); }, 5);
}

function isImageLoaded(i)
{
	if (i.complete == undefined)
	{
		if (i.getAttribute('completed') == undefined)
		{
			i.setAttribute('completed', false);
			i.onload = function() { im.setAttribute('completed', true); }
		}
			
		return i.getAttribute('completed');
	}
	
	return i.complete;
}

function waitForImage(im, dv, prev) {
	if (isImageLoaded(im))
	{
		// Hide "loading" image
		var ld = document.getElementById('loading');
		ld.style.display = 'none';
		
		clearInterval(intId);

		// "show" the new image as completely transparent!
		dv.style.opacity = 0;
		dv.style.filter = 'alpha(opacity:0)';
		dv.style.display = 'block';

//		dv.style.left = prev.offsetLeft + 'px';
//		dv.style.top = prev.offsetTop + 'px';

		// Resize the image to fit in the container
		var main = document.getElementById('main_cell');
		var pic = document.getElementById('picture')
		aspect = im.offsetWidth / im.offsetHeight;
		var picWidth = pic.offsetWidth;
		var picHeight = pic.offsetHeight;
		if (im.offsetWidth > (picWidth * 0.8))
		{
			w = (picWidth * 0.8);
			im.width = w;
			im.height = (w / aspect);
		}
		if (im.offsetHeight > picHeight)
		{
			h = (picHeight * 0.95);
			im.height = h;
			im.width = (h * aspect);
		}

		// Fade the new image in ...
		var f = new Fader(dv, true, faderSpeed);
		f.start();

		// ... and the old one out.
		if (prev != null)
		{
			if (fadeOut)
			{
				var fOut = new Fader(prev, false, faderSpeed);
				fOut.start();
			}
			else {
				prev.style.display = 'none';
			}
		}

		curImg = dv;
	}
}

function mnuUp()
{
	var mnu = document.getElementById('menu');
	var cnt = document.getElementById('menuContainer');//mnu.offsetParent;
	
	var cntTop = getElementPosition(cnt).top;
	var mnuTop = getElementPosition(mnu).top;
	
	if (mnuTop >= cntTop)
		return;
		
	var cur = parseInt(getElementStyle(mnu, 'top', 'top'));
	mnu.style.top = (cur + 50) + 'px';
}

function mnuDown()
{
	var mnu = document.getElementById('menu');
	var cnt = document.getElementById('menuContainer');//mnu.offsetParent;
	
	var cntBottom = getElementPosition(cnt).top + cnt.offsetHeight;
	var h = getElementStyle(mnu, 'height', 'height');
	var mnuBottom = getElementPosition(mnu).top + parseInt(h == 0 ? mnu.offsetHeight : h);
	
	var childer = mnu.getElementsByTagName('div');
	
	mnuBottom = getElementPosition(childer[childer.length-1]).top + childer[childer.length-1].offsetHeight;
	
	if (mnuBottom <= cntBottom)
		return;
	
	var cur = parseInt(getElementStyle(mnu, 'top', 'top'));
	mnu.style.top = (cur - 50) + 'px';
}

function mnuWheel(event)
{
       var delta = 0;
        if (!event) /* For IE. */
                event = window.event;
        if (event.wheelDelta) { /* IE/Opera. */
                delta = event.wheelDelta/120;
                /** In Opera 9, delta differs in sign as compared to IE.
                 */
                if (window.opera)
                        delta = -delta;
        } else if (event.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -event.detail/3;
        }
        /** If delta is nonzero, handle it.
         * Basically, delta is now positive if wheel was scrolled up,
         * and negative, if wheel was scrolled down.
         */
        if (delta < 0)
                mnuDown();
        else if (delta > 0)
        	mnuUp();
        	
        /** Prevent default actions caused by mouse wheel.
         * That might be ugly, but we handle scrolls somehow
         * anyway, so don't bother here..
         */
        if (event.preventDefault)
                event.preventDefault();
	event.returnValue = false;
}

function getElementStyle(elem, IEStyleAttr, CSSStyleAttr) {
    if (elem.currentStyle) {
        return elem.currentStyle[IEStyleAttr];
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, "");
        return compStyle.getPropertyValue(CSSStyleAttr);
    }
    return "";
}

function getElementPosition(elem) {
    var offsetTrail = elem;
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {left:offsetLeft, top:offsetTop};
}

function resizePicture() {
	var main = document.getElementById('mainPane');
	var right = document.getElementById('rightPane');
	var pic = document.getElementById('picture');
	var extra = 50/*navigator.userAgent.indexOf('MSIE') != -1 ? 50 : 0*/;
	pic.style.width = main.offsetWidth - right.offsetWidth - extra + 'px';
}