var tp_inMotion = true;
var tp_currentIconSelected = null;
var tp_currentBoxSelected = null;
var tp_currentContentSelected = null;

var tp_iconOrigX = 0;
var tp_iconOrigY = 0;
var tp_boxOrigX = 0;
var tp_boxOrigY = 0;
var tp_boxOrigWidth = 0;

var tp_contentHash = new Hash({
	aboutcontent: 'about-frag.html', 
	rulescontent: 'rules-frag.html',
	cardscontent: 'cards-frag.html',
	playcontent: 'play-frag.html'
});

Effect.BlindRight = function(element) {
	element = $(element);
	var elementDimensions = element.getDimensions();
	return new Effect.Scale(element, 100, Object.extend({
		scaleContent: false,
		scaleY: false,
		scaleFrom: 0,
		scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
		restoreAfterFinish: true,
		afterSetup: function(effect) {
			effect.element.makeClipping().setStyle({
				width: '0px',
				height: effect.dims[0] + 'px'
			}).show();
		},
		afterFinishInternal: function(effect) {
			effect.element.undoClipping();
		}
	}, arguments[1] || { }));
};

function notInMotion() {
	tp_inMotion = false;
	return false;
}

function divAppear(id, delayamt) {
	new Effect.Appear(id, {
		delay:delayamt,
		duration:1.5
	});
}

function divWipe(id, delayamt) {
	new Effect.BlindRight(id, {delay:delayamt, duration:0.8});
	new Effect.Appear(id, {delay:delayamt, duration:0.8});
}
		
function startAnims() {
	new Effect.Fade('throbbergif', {
		duration:0.5
	});

	new Effect.Fade('throbbertxt', {
		duration:0.5
	});
	
	divAppear('tablebar',   0.5);
	divAppear('pokertable', 0.5);
	
	divAppear('chips',      0.5);
	divAppear('lowercard',  0.5);
	divAppear('uppercards', 0.5);			
	divAppear('title',      1.5);
	
	divAppear('swordicon',  2.5);
	divAppear('coinicon',   2.9);
	divAppear('cupicon',    3.3);
	divAppear('wandicon',  	3.7);   
	
	divWipe('aboutbox', 2.5);
	divWipe('rulesbox', 2.9);
	divWipe('cardsbox', 3.3);
	divWipe('playbox',  3.7);
	
	new Effect.Appear('shinmalogo', {
		delay:5.0,
		duration:1.5,
		afterSetup:function() {
			tp_inMotion = false;
			return false;
		}
	});

}

function deactivateCurrentSelection(inMotionAfter) {
	if (tp_currentIconSelected == null) {
		return false;
	}
	
	var deactivatedelay = 0.0;
	if (!inMotionAfter) {
		deactivatedelay = 0.8;
	}
	
	iconStyle = 'margin-top: ' + tp_iconOrigY + '; margin-left: ' + tp_iconOrigX;
	boxStyle = 'margin-top: ' + tp_boxOrigY + '; margin-left: ' + tp_boxOrigX + '; width: ' + tp_boxOrigWidth;
	
	new Effect.Morph(tp_currentIconSelected, {
		delay: deactivatedelay,
		style: iconStyle,
		duration: 0.8
	});

	new Effect.Morph(tp_currentBoxSelected, {
		delay: deactivatedelay,
		style: boxStyle,
		duration: 0.8
	});

	if (inMotionAfter) {
		new Effect.Fade(tp_currentContentSelected, { duration: 0.4 });
	} else {
		new Effect.BlindUp(tp_currentContentSelected, { duration: 0.8, afterFinish: notInMotion });
	}
				
	tp_currentIconSelected = null;
	tp_currentBoxSelected = null;
	tp_currentContentSelected = null;
	
	return false;
}

function loadContent(contentId) {
	var pageName = tp_contentHash.get(contentId);
	if (pageName != null) {
		new Ajax.Updater(contentId, pageName, {
			evalScripts: true
		});
		tp_contentHash.unset(contentId);
	}
}

function activateSelection(iconId, boxId, contentId) {	
	if (tp_inMotion) {
		return false;
	}
	tp_inMotion = true;
	
	var freshfield = false;
	if (tp_currentContentSelected == null) {
		freshfield = true;
	}
	
	if (tp_currentIconSelected == iconId) {
		deactivateCurrentSelection(false);
		return false;
	}
	
	deactivateCurrentSelection(true);

	icon = $(iconId);
	box = $(boxId);
	
	tp_iconOrigX = icon.getStyle('margin-left');
	tp_iconOrigY = icon.getStyle('margin-top');
	tp_boxOrigX = box.getStyle('margin-left');
	tp_boxOrigY = box.getStyle('margin-top');
	tp_boxOrigWidth = box.getStyle('width');
	
	new Effect.Morph(iconId, {
		style: 'margin-top: 30px; margin-left: 315px',
		duration: 0.8
	});

	new Effect.Morph(boxId, {
		style: 'margin-top: 38px; margin-left: 371px; width: 540px',
		duration: 0.8
	});
	
	if (freshfield) {
		new Effect.BlindDown(contentId, {
			delay: 0.8,
			duration: 0.8,
			afterFinish:function() {
				tp_inMotion = false;
				return false;
			}
		});
	} else {
		new Effect.Appear(contentId, {
			delay: 0.4,
			duration: 0.8,
			afterFinish: notInMotion
		});
	}
	
	tp_currentIconSelected = iconId;
	tp_currentBoxSelected = boxId;
	tp_currentContentSelected = contentId;
	
	loadContent(contentId);
							
	return false;
}

Event.observe(window, 'load', function() {
	startAnims();

	Event.observe('swordicon', 'click', function() {activateSelection('swordicon', 'aboutbox', 'aboutcontent')});
	Event.observe('aboutbox', 'click', function() {activateSelection('swordicon', 'aboutbox', 'aboutcontent')});

	Event.observe('coinicon', 'click', function() {activateSelection('coinicon', 'rulesbox', 'rulescontent')});
	Event.observe('rulesbox', 'click', function() {activateSelection('coinicon', 'rulesbox', 'rulescontent')});

	Event.observe('cupicon', 'click', function() {activateSelection('cupicon', 'cardsbox', 'cardscontent')});
	Event.observe('cardsbox', 'click', function() {activateSelection('cupicon', 'cardsbox', 'cardscontent')});

	Event.observe('wandicon', 'click', function() {activateSelection('wandicon', 'playbox', 'playcontent')});
	Event.observe('playbox', 'click', function() {activateSelection('wandicon', 'playbox', 'playcontent')});
});