var bgImages = [
			'http://www.dockgate4.com/images/dg4_bg1.jpg',
			'http://www.dockgate4.com/images/dg4_bg2.jpg'
];

var loader = null;
var loader_anim = null;
var preloadImages = [];

var _bg = false;
var _container = false;
var _ct = false;
var _anext = false;
var _aprev = false;
var _btnclose = false;
var _btnopen = false;
var _footer = false;
var wWidth = 0;
var wHeight = 0;
var _current_bg = 0;

function initGallery()
{
	_container = document.getElementById('container');
	_loader = document.getElementById("loader-holder");
	
	if (_loader) {
		loader_anim = new AnimatedPNG(_loader, 'loader', 'http://www.dockgate4.com/images/loader/loader0001.png', 11, 100);
	}
	
	_c = document.getElementById('content');
	_bg = document.getElementById('bg');
	_anext = document.getElementById('next');
	_aprev = document.getElementById('prev');
	_footer = document.getElementById('footer');
	_btnclose = document.getElementById('btnclose');
	_btnopen = document.getElementById('btnopen');

	if(_bg && _container)
	{
		for (i = 0; i < bgImages.length; i++) {
			preloadImages.push(false);
		}
		_container.parentNode.style.overflow = "hidden";
		_container.parentNode.style.height = _c.offsetHeight + 39 + "px"
		initA();
		_container._offsetHeight = _container.offsetHeight;
		_container._offsetWidth = _container.offsetWidth;			

		fixFooter();
		initNextPrev();
		
	}
	
}

function fixFooter()
{
		getWindowSize();

		var __wHeight = wHeight;
		_footer.style.height = "120px";
		if(_container._offsetHeight + _footer.offsetHeight + 12 < __wHeight)
		{
			_footer.style.height = wHeight - _container._offsetHeight - 12 + "px";
		}
}


function initA()
{
	var _as = document.getElementsByTagName('a');
	for(var i=0; i < _as.length; i++)
	{
		if(_as[i].getAttribute('rel') == 'open-gallery')
		{
			_as[i].href = "javascript:;";
			_as[i].onclick = openGallery;
		}
	
		if(_as[i].getAttribute('rel') == 'close-gallery')
		{
			_as[i].href = "javascript:;";
			_as[i].onclick = closeGallery;
		}
		
	}
}

function openGallery()
{
	_container.style.display = "none";
	_anext.style.display = "block";
	_aprev.style.display = "block";
	_btnopen.style.display = "none";
	_btnclose.style.display = "block";
	_footer.onclick = closeGallery;	
}

function closeGallery()
{
	_container.style.display = "block";
	_anext.style.display = "none";
	_aprev.style.display = "none";	
	_btnopen.style.display = "block";
	_btnclose.style.display = "none";
	loader_anim.hide();
	_footer.onclick = null;
}

function initNextPrev()
{
	getWindowSize();
	if(_anext)
	{
		_anext.href = "javascript:;";
		_anext.onclick = _next;
		if(_container._offsetWidth)
			_anext.style.width = Math.round(Math.max(wWidth,_container._offsetWidth)/2) + "px";
		_anext.style.height = _container._offsetHeight + "px";
	}
	if(_aprev)
	{
		_aprev.href = "javascript:;";
		_aprev.onclick = _prev;		
		if(_container._offsetWidth)
			_aprev.style.width = Math.round(Math.max(wWidth/2,_container._offsetWidth/2)) + "px";
		_aprev.style.height = _container._offsetHeight + "px";
	}
}

function _next()
{
	var __next = (_current_bg + 1)%bgImages.length;
	switchBG(__next);
	_current_bg = __next;	
}

function _prev()
{
	var __next = _current_bg - 1;
	if(__next < 0) __next = bgImages.length - 1;
	switchBG(__next);
	_current_bg = __next;
	
}

function switchBG(_index, ieFix)
{
	if(bgImages[_index])
	{
		if (preloadImages[_index])
		{
			_bg.style.background = 'url("' + bgImages[_index] + '") no-repeat';	
		}
		else
		{
			if (loader_anim)
			{
				loader_anim.draw();
			}
			var img = new Image;
			img.src = bgImages[_index];
			img._index = _index;
			img.onload = onloadBg;
		}
	}
	
/*
	if(!ieFix && window.addEventListener)
	{
		setTimeout('switchBG('+_index+',true)',500);
	}
*/	
}

function onloadBg() {
	preloadImages[this._index] = true;
	_bg.style.background = 'url("' + bgImages[this._index] + '") no-repeat';	
	if (loader_anim)
	{
			loader_anim.hide();
	}
}

function getWindowSize()
{
	if( typeof( window.innerWidth ) == 'number' )
	{
	    wWidth = window.innerWidth;
	    wHeight = window.innerHeight;
	}
	else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
	{
	    wWidth = document.documentElement.clientWidth;
	    wHeight = document.documentElement.clientHeight ;
	}
	else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
	{
	    wWidth = document.body.clientWidth;
	    wHeight = document.body.clientHeight;
	}
}

function onwResize()
{
	fixFooter();
	initNextPrev();
}


if (window.addEventListener)
{
	window.addEventListener("resize", onwResize, false);
	window.addEventListener("load", initGallery, false);
}
else if (window.attachEvent)
{
	window.attachEvent("onload", initGallery);
	window.attachEvent("onresize", onwResize);
}