var references_autoAdvanceEnabled = true;
var references_autoAdvancePeriod = 4000;
var references_advanceFuncs = {};

var fading = false;

var enableDebug = 0;
var debugElement = null;

var efx = {};

window.addEvent('domready', function() {
	$('grid').setStyle('opacity', 1);
	$('references').setStyle('opacity', 0);

	var thumbs = $$('#grid img');
	thumbs.each(function(el) {
		el.addEvents({click: function() {	clickReference(this.getProperty('id')); }});
	});

	var imgs = $$('.refImages img');
	imgs.each(function(el) {
		el.setStyle('opacity', 0);
	});

	$('previous').setStyle('opacity', 0);
	$('next').setStyle('opacity', 0);

	$('previous').addEvents({click: function() {	previousReference(); }});
	$('next').addEvents({click: function() {	nextReference(); }});

	var imgbuttons = $$('.refImageNumbers div');
	imgbuttons.each(function(el) {
		el.addEvents({click: function() {	gotoImage(el.getProperty('refName'), el.getProperty('index')); }});
	});

	if(enableDebug) {
		debugElement = new Element('div', {html:'debug', styles:{display:'block', position:'fixed', width:'320px', height:'320px', 'overflow-y':'auto', 'text-align':'left', 'background-color':'#000000', 'color':'#00ff00'}});
		var temp = $('container');
		debugElement.inject(temp, 'before');
	}
});

function openRef(href) {
	if(window.open(href, 'reference')) {
		return false;
	} else {
		return true;
	}
}

function debug(txt) {
	if(!debugElement) return;
	var str = '';
	if(!txt.toString) {
		str = "debug: can't convert parameter to string";
	} else {
		str = txt.toString();
	}
	var txt = new Element('div', {html:str});
	txt.inject(debugElement);
	debugElement.scrollTop = debugElement.scrollHeight;
}

function gotoImage(name, index) {
	stopReference(name);
	references_fadeImageIn(name, index-1);
}

function clickReference(name) {
	showReference(name);
}

function references_grid() {
	var cur = getCurrentReference();
	if(cur) {
		// stop the current reference, and start fading it out, set callback to show grid after fadeout
		var curName = cur.getProperty('name');
		stopReference(curName);

		hideButton('previous');
		hideButton('next');

		references_fadeImageOut(curName);

		efx.fadeImgOut = new Fx.Tween($('reference_images_'+curName));
		efx.fadeImgOut.start('opacity', 0);
		efx.fadeNumOut = new Fx.Tween($('reference_numbers_'+curName));
		efx.fadeNumOut.start('opacity', 0);

		efx.fadeReferencesOut = new Fx.Tween($('references'));
		efx.fadeReferencesOut.addEvent('complete', function() {showGrid()} );
		efx.fadeReferencesOut.start('opacity', 0);
	} else {
		showGrid();
	}
	return false;
}

function showReference(name) {
	if($('grid').getStyle('opacity') != 0) {
		hideGrid(name);
	} else {
		var cur = getCurrentReference();
		if(cur) {
			// stop all references
			stopAllReferences();
			// start fading current reference out, set callback to retry show after fadeout
			var curName = cur.getProperty('name');
			efx.fadeDescOut = new Fx.Tween($('reference_desc_'+curName));
			efx.fadeDescOut.addEvent('complete', function() {hideReferenceAndShow(curName, name)} );
			efx.fadeDescOut.start('opacity', 0);

			efx.fadeImgOut = new Fx.Tween($('reference_images_'+curName));
			efx.fadeImgOut.start('opacity', 0);

			references_fadeImageOut(curName);

			efx.fadeNumOut = new Fx.Tween($('reference_numbers_'+curName));
			efx.fadeNumOut.start('opacity', 0);

			fading = true;
		} else {
			hideAllReferences();
			displayReference(name);
			efx.fadeReferenceIn = new Fx.Tween($('references'));
			efx.fadeReferenceIn.addEvent('complete', function() {startReference(name)} );
			efx.fadeReferenceIn.start('opacity', 1);

			$('reference_desc_'+name).setStyle('opacity', 0);
			$('reference_images_'+name).setStyle('opacity', 0);
			$('reference_numbers_'+name).setStyle('opacity', 0);

			efx.fadeDescIn = new Fx.Tween($('reference_desc_'+name));
			efx.fadeDescIn.start('opacity', 1);

			efx.fadeImgIn = new Fx.Tween($('reference_images_'+name));
			efx.fadeImgIn.start('opacity', 1);

			var imgCount = references_getImageCount(name);
			if(imgCount && imgCount > 1) {
				efx.fadeNumIn = new Fx.Tween($('reference_numbers_'+name));
				efx.fadeNumIn.start('opacity', 1);
			}

			references_fadeImageIn(name, 0);

			var allRef = $$('#refDescHolder .refDescription');
			var cnt = allRef.length;
			var curRef = $('reference_desc_'+name).getProperty('index');

			showButton('previous');
			showButton('next');
/*
			if(curRef > 0) {
				showButton('previous');
			} else {
				hideButton('previous');
			}
			if(curRef < cnt-1) {
				showButton('next');
			} else {
				hideButton('next');
			}
*/
			fading = true;

		}
	}
}

function getCurrentReference() {
	var allRef = $$('#refDescHolder .refDescription');
	for(var i = 0; i < allRef.length; i++) {
		if(allRef[i].getStyle('display') != 'none') {
			return allRef[i];
		}
	}
	return null;
}

function nextReference() {
	if(fading) return;
	var cur = getCurrentReference();
	if(cur) {
		if(cur.getNext()) {
			var nextName = cur.getNext().getProperty('name');
			showReference(nextName);
		} else {
			var p = cur.getParent();
			var nextName = p.getFirst().getProperty('name');
			showReference(nextName);
		}
	}
}

function previousReference() {
	if(fading) return;
	var cur = getCurrentReference();
	if(cur) {
		if(cur.getPrevious()) {
			var prevName = cur.getPrevious().getProperty('name');
			showReference(prevName);
		} else {
			var p = cur.getParent();
			var nextName = p.getLast().getProperty('name');
			showReference(nextName);
		}
	}
}

function showButton(id) {
	var bFade = new Fx.Tween($(id));
	bFade.start('opacity', 1);
}

function hideButton(id) {
	var bFade = new Fx.Tween($(id));
	bFade.start('opacity', 0);
}

function hideAllReferences() {
	var descs = $$('#refDescHolder .refDescription');
	descs.each(function(el) {
		el.setStyle('display', 'none');
	});

	var imgs = $$('#refImageHolder .refImages');
	imgs.each(function(el) {
		el.setStyle('display', 'none');
	});

	var imgs = $$('#refImageHolder .refImageNumbers');
	imgs.each(function(el) {
		el.setStyle('display', 'none');
	});
}

function displayReference(name) {
	var el = $('reference_desc_'+name);
	el.setStyle('display', 'block');
	el = $('reference_images_'+name);
	el.setStyle('display', 'block');
	el = $('reference_numbers_'+name);
	el.setStyle('display', 'block');
}

function hideReference(name) {
	var el = $('reference_desc_'+name);
	el.setStyle('display', 'none');
	el = $('reference_images_'+name);
	el.setStyle('display', 'none');
	el = $('reference_numbers_'+name);
	el.setStyle('display', 'none');
}

function hideReferenceAndShow(toBeHidden, toShow) {
	hideReference(toBeHidden);
	showReference(toShow);
}

function hideGrid(name) {
	efx.hideGrid = new Fx.Tween($('grid'));
	efx.hideGrid.addEvent('complete', function() {showReference(name)} );
	efx.hideGrid.start('opacity', 0);
}

function showGrid() {
	hideAllReferences();
//	hideButton('previous');
//	hideButton('next');
	efx.showGrid = new Fx.Tween($('grid'));
	efx.showGrid.start('opacity', 1);
}

function startReference(name) {
	stopAllReferences();
	fading = false;

	var imgs = references_getImages(name);
	if(imgs.length <= 1) return;

	var imageContainer = $('reference_images_'+name);

	if(!references_advanceFuncs[name]) {
		references_advanceFuncs[name] = references_autoAdvance.bind(imageContainer);
	}
	var timer = references_advanceFuncs[name].periodical(references_autoAdvancePeriod);
	imageContainer.setProperty('timer', timer);
	debug('reference '+name+' started');
	references_setNumber(name);
}

function stopAllReferences() {
	var allRef = $$('#refImageHolder .refImages');
	if(allRef) {
		for(var i = 0; i < allRef.length; i++) {
			var name = allRef[i].getProperty('name');
			stopReference(name);
		}
	}
}

function stopReference(name) {
	var imageContainer = $('reference_images_'+name);
	var timer = imageContainer.getProperty('timer');
	if(timer) {
		clearInterval(timer);
		imageContainer.removeProperty('timer');
		debug('reference '+name+' stopped');
	}
}

function references_autoAdvance() {
	if(!references_autoAdvanceEnabled) return;
	var name = this.getProperty('name');
	debug('reference_autoAdvance: '+name);
	references_nextImage(name);
}

function references_fadeImageIn(name, num) {
	var imgs = references_getImages(name);
	var cur = references_getCurrentImage(name);
//	debug('references_fadeImageIn: name='+name+" cur="+cur);
	for(var i = 0; i < imgs.length; i++) {
		if(i != num) {
			if(i != cur) {
				imgs[i].setStyle('opacity', 0.0);
				imgs[i].setStyle('z-index', 0);
			} else {
				imgs[i].setStyle('z-index', 5);
			}
		} else {
			imgs[i].setStyle('z-index', 10);
			imgs[i].setStyle('opacity', 0.0);
			var tween = new Fx.Tween(imgs[i]);
			tween.addEvent('complete', function() {references_setNumber(name)} );
			tween.start('opacity', 1.0);
//			debug('fadeImageIn: '+name+" / "+i);
		}
	}
}

function references_fadeImageOut(name) {
	var imgs = references_getImages(name);
	var cur = references_getCurrentImage(name);
	for(var i = 0; i < imgs.length; i++) {
		if(i == cur) {
			imgs[i].setStyle('z-index', 10);
			var tween = new Fx.Tween(imgs[i]);
			tween.start('opacity', 0.0);
//			debug('fadeImageOut: '+name+" / "+i);
		} else {
			imgs[i].setStyle('opacity', 0.0);
		}
	}
}

function references_getImageCount(name) {
	imgs = $$("#reference_images_"+name+" img");
	if(imgs) {
		return imgs.length;
	} else {
		return null;
	}
}

function references_getImages(name) {
	imgs = $$("#reference_images_"+name+" img");
	var cnt = imgs.length;
	if(cnt == 0) return null;
	return imgs;
}

function references_getCurrentImage(name) {
	var cur = null;
	var imgs = references_getImages(name);
	for(var i = 0; i < imgs.length; i++) {
		if(imgs[i].getStyle('z-index') == 10) {
			cur = i;
			break;
		}
	}
	return cur;
}

function references_nextImage(name) {
	var imgs = references_getImages(name);
	var cur = references_getCurrentImage(name);
	cur = cur + 1;
	if(cur > imgs.length-1) cur = cur - imgs.length;
	references_fadeImageIn(name, cur);
}

function references_setNumber(name) {
	var cur = references_getCurrentImage(name);
	nums = $$("#reference_numbers_"+name+" div");
	for(var j = 0; j < nums.length; j++) {
		if(j == cur) {
			nums[j].setProperty('class', 'active');
		} else {
			nums[j].setProperty('class', '');
		}
	}
}