function $ (id) {
	return document.getElementById(id);
}
function $C (name, id, obj) {
	var el=document.createElement(name);
	el.setAttribute('id', id);
	obj.appendChild(el);
	return el;
}

function addEvent (obj, ev, func) {
	if (obj.addEventListener) obj.addEventListener(ev, func, false);
	else if (obj.attachEvent) obj.attachEvent('on'+ev, func);
}
function removeEvent (obj, ev, func) {
	if (obj.removeEventListener) obj.removeEventListener(ev, func, false);
	else if (obj.detachEvent) obj.detachEvent('on'+ev, func);
}

var timer, animator;

function setupTrail() {
	var pd=$C('div', 'preview_div', document.getElementsByTagName('body')[0]);
	var pl=$C('div', 'preview_loader', pd);
	var plt=$C('div', 'preview_loader_text', pl);
	plt.appendChild(document.createTextNode('Loading template preview...'));
	var plb=$C('div', 'preview_loader_bg', pl);
	$C('div', 'preview_progress', plb);

	var imgs=document.getElementsByTagName('img');
	for (var i=0, counti=imgs.length; i<counti; i++) {
		var img=imgs[i];
		if (!img || !img.src) continue;
		if (img.src.indexOf('/files/')!=-1 && (img.src.indexOf('_middle')!=-1 || img.src.indexOf('_small')!=-1)) {
			addEvent(img, 'mouseover', showTrail);
			addEvent(img, 'mouseout', hideTrail);
		}
	}
	animator=setInterval(animate, 20);
}

function hideTrail(){
	removeEvent(document, 'mousemove', followMouse);
	$('preview_div').style.display='none';
	clearTimeout(timer);
}

function showTrail(e){
	e=e||window.event;
	if (!e) {
		return;
	}
	var d=e.target||e.srcElement;
	timer=setTimeout("show('"+d.src.replace(/_middle/, '_big').replace(/_small/, '_big')+"','"+escape(d.alt)+"')",200);
}
function show(src,alt){
	addEvent(document, 'mousemove', followMouse);

	var pd=$('preview_div');
	with (pd.style) {
		width='400px';
		height='400px';
	}

	var pt=$('preview_title'), pi=$('preview_image');
	if (pt) {
		pd.removeChild(pt);
	}
	if (pi) {
		pd.removeChild(pi);
	}

	$('preview_loader').style.display='block';

	var pt=$C('div', 'preview_title', pd);
	if (alt) {
		pt.appendChild(document.createTextNode(unescape(alt)));
	}

	var pi=$C('img', 'preview_image', pd);
	pi.setAttribute('src', src);
	addEvent(pi, 'load', removeLoading);
	if (pi.complete || pi.readyState=='complete') {
		removeLoading();
	}

	pd.style.display='block';
}

function followMouse(e){
	var w_width, w_height;
	if (self.innerHeight) {
		w_width=self.innerWidth+self.pageXOffset;
		w_height=self.innerHeight+self.pageYOffset;
	} else if (document.documentElement.clientHeight || document.documentElement.scrollTop) {
		w_width=document.documentElement.clientWidth+document.documentElement.scrollLeft;
		w_height=document.documentElement.clientHeight+document.documentElement.scrollTop;
	} else if (document.body.clientHeight || document.body.scrollTop) {
		w_width=document.body.clientWidth+document.body.scrollLeft;
		w_height=document.body.clientHeight+document.body.scrollTop;
	} else {
		w_width=800;
		w_height=600;
	}

	var pd=$('preview_div');
	var el_width=pd.offsetWidth, el_height=pd.offsetHeight;

	e=e||window.event;
	var x, y;
	if (e.pageY) {
		x=e.pageX;
		y=e.pageY;
	} else if (window.event && document.documentElement && document.documentElement.scrollTop) {
		x=event.clientX+document.documentElement.scrollLeft;
		y=event.clientY+document.documentElement.scrollTop;
	} else if (window.event && document.body) {
		x=event.clientX+document.body.scrollLeft;
		y=event.clientY+document.body.scrollTop;
	} else {
		x=800;
		y=600;
	}

	if ((w_width-x)<=el_width) {
		x-=el_width+20;
	}
	if ((w_height-y)<=el_height) {
		y-=el_height+30;
	}

	with (pd.style) {
		left=(x+15)+'px';
		top=(y+25)+'px';
	}
}

var pos=0;
var dir=2;
var len=0;
function animate() {
	var el=$('preview_progress');
	if (el) {
		if (pos==0) {
			len+=dir;
		}
		if (len>32 || pos>79) {
			pos+=dir;
		}
		if (pos>79) {
			len-=dir;
		}
		if (pos>79 && len==0) {
			pos=0;
		}

		with (el.style) {
			left=pos+'px';
			width=len+'px';
		}
	}
}

function removeLoading() {
	var pi=$('preview_image');
	with ($('preview_div').style) {
		width=pi.offsetWidth+'px';
		height=(pi.offsetHeight+$('preview_title').offsetHeight+(document.compatMode&&(document.compatMode=='CSS1Compat')?0:5))+'px';
	}
	$('preview_loader').style.display='none';
}

addEvent(window, 'load', setupTrail);