(function () {
	var xhr,              // XHR object
		currentImage = 0, // keep track of which one is showing
		galleryData = {}, // the loaded data about the gallery
		anim = 0,         // pointer to the animation interval
		autoPlay = 0,     // pointer to the auto-play interval

		FRAME_INTERVAL = 50;

	function addEvent(element, eventName, handler)
	{
		function _ev(ev)
		{
			var theEvent = ev || window.event;
			theEvent.targetElement = theEvent.target || theEvent.srcElement;

			var eventResult = handler.call(element, theEvent);

			if(ev.preventDefault && (eventResult === false))
			{
				ev.preventDefault();
				ev.stopPropagation();
			}

			return eventResult;
		}

		if (element.attachEvent)
		{
			element.attachEvent("on" + eventName, _ev);
		}
		else
		{
			element.addEventListener(eventName, _ev, false);
		}

		if (element != window) addEvent(window, "unload", function () {element = null});
	}

	function addOnload(handler)
	{
		addEvent(window, "load", handler);
	}

	function makeXhr()
	{
		var reqObject;

		if(window.XMLHttpRequest)
		{
			reqObject = new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			try
			{
				reqObject = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch (e)
			{
				reqObject = false
			}
		}
		else
		{
			throw ("Error");
		}

		reqObject.onreadystatechange = handle;

		return reqObject;
	}

	function getGallery()
	{
		var url = location.pathname.substring(location.pathname.lastIndexOf("/") + 1),
			json;

		url = url.split(".");

		if(url.length == 2)
		{
			json = url[0] + ".json";
		}
		else
		{
			json = "index.json";
		}

		xhr = xhr || makeXhr();

		xhr.open("GET", json);

		xhr.send(null);

	}


	function handle()
	{
		if((xhr.readyState == 4) && (xhr.status == 200))
		{
			makeGallery(eval("(" + xhr.responseText + ")"));
		}
	}

	function galleryClick(ev)
	{
		if(this.auto !== true)
		{
			clearInterval(autoPlay);
		}

		switch(this.rel)
		{
			case 'next':
				currentImage = (currentImage + 1) % galleryData.images.length;
				break;
			case 'prev':
				currentImage = (currentImage + galleryData.images.length - 1) % galleryData.images.length;
				break;
			default:
				currentImage = this.rel * 1;
		}

		setImage();

		return false;
	}

	function makeGallery(data)
	{
		galleryData = data;

		galleryData.fadeTime = 100 * Math.floor((galleryData.fadeTime || 1200) / 100);

		var imageCache = [],
			nav = document.createElement("div"),
			mask = document.createElement("a"),
			container = document.getElementById("container"),
			main = document.getElementById("main"),
			html = '<ul><li id="left_arrow"><a href="" rel="prev"></a></li><li id="right_arrow"><a href="" rel="next"></a></li><li class="selected"><a href="" rel="0">1</a></li>';

		
		imageCache[0] = new Image();
		imageCache[0].src = data.images[0];

		for (var i = 1, l = galleryData.images.length; i < l; i++)
		{
			html = html + '<li><a href="" rel="' + i + '">' + (i+1) + '</a></li>';
			imageCache[i] = new Image();
			imageCache[i].src = galleryData.images[i];
		}

		html = html + '</ul>';

		nav.id = "secondary_nav";
		nav.innerHTML = html;

		var links = nav.getElementsByTagName("a");

		for (var i = 0; i < l + 2; i++)
		{
			addEvent(links[i], 'click', galleryClick);
		}

		container.insertBefore(nav, main);

		mask.innerHTML = '&nbsp;';
		mask.id = "mask";
		mask.setAttribute('href','/products/gfx');
		mask.style.display = "block";
		mask.style.height = document.documentElement.clientHeight + "px";
		mask.className = "frame0";
		
		container.insertBefore(mask,document.getElementById('secondary_nav'));

		if(galleryData.autoPlay)
		{
			autoPlay = setInterval(function(){galleryClick.call({rel: "next", auto: true})}, galleryData.autoPlay * 1000);
		}
	}

	function getOp(time)
	{
		var t = 100 - 100 * Math.pow((2 * time / galleryData.fadeTime) - 1, 2);

		if (t > 100)
		{
			return 100;
		}
		else if (t < 0)
		{
			return 0;
		}
		else
		{
			return Math.floor(t);
		}
	}

	function setOp(op, el)
	{
		el.style.opacity = op / 100;
		el.style.filter = "alpha(opacity=" + op + ")";
	}

	function setImage()
	{
		clearInterval(anim);

		var nav = document.getElementById("secondary_nav"),
			links = nav.getElementsByTagName("li"),
			mask = document.getElementById("mask"),
			height = document.documentElement.clientHeight;

		addEvent(window, "unload", function () {nav = null; links = null; mask = null});

		var time = 0,
			opacity = 0;

		mask.style.display = "block";
		mask.style.height = height + "px";
		mask.className = "frame0";

		anim = setInterval(_frame, FRAME_INTERVAL);

		function _frame()
		{
			if(time >= galleryData.fadeTime)
			{
				clearInterval(anim);
				setOp(0, mask);
			}
			else
			{
				time += FRAME_INTERVAL;

				opacity = getOp(time);
				setOp(opacity, mask);

				if(opacity == 100)
				{
					document.getElementById('container').style.backgroundImage = "url(" + galleryData.images[currentImage] +")";
					document.getElementById('mask').setAttribute('href', galleryData.links[currentImage]);
					for(var i = 2, l = links.length; i < l; i++)
					{
						links[i].className = "";
					}

					links[currentImage + 2].className = "selected";
				}
			}
		}
	}

	addOnload(getGallery);

})();