var CardHelp = new JS.Class({

    extend: {
	    AMEX:         	'American Express',
	    MASTER_CARD:	'MasterCard',
	    MAESTRO:      	'Maestro',
	    VISA:			'Visa',
	    SHOW_FRONT:		1,
	    SHOW_BACK:		2
	},

	initialize: function() {
		this._cardFrontShown	= true;
		this._cardType			= CardHelp.VISA;
		this._lastCardType 		= '';
		this._cardElement 		= Ojay.byId('card');
		this._highlightElement 	= Ojay.byId('cardHighlight');
		
		Ojay('DIV.card-image').forEach(function(el) {
			el.setStyle({opacity : '0'}).hide();
		});

		Ojay.byId('visaCardFront').setStyle({opacity : '1'}).show();
		
		this._highlightElement.hide();
	},
	
	showCard: function (el) {
		var index = el.node.selectedIndex;
		this._lastCardType = this._cardType;
		this._cardType = el.node.options[index].text;

		var lastCardId = this._cardFrontShown ? this._lastCardType.replace(' ','').toLowerCase() + 'CardFront' 
			: this._lastCardType.replace(' ','').toLowerCase() + 'CardBack';
		var nextCardId = this._cardType.replace(' ','').toLowerCase() + 'CardFront';
		Ojay.byId(lastCardId).animate(
			{ opacity : {to : 0}}, 
			0.5, 
			{ after : function(el, i) {
		  		el.hide();
				Ojay.byId(nextCardId).show().animate(
					{ opacity : {to : 1}}, 0.5);
			}
		});
		this._cardFrontShown = true;
	},
	
	flipCard: function (showSide) {
		if(showSide == CardHelp.SHOW_FRONT) {
			this._highlightElement
				.animate ({opacity : {to: 0}}, 0.5)
				.hide();
			if(this._cardType == CardHelp.AMEX || this._cardFrontShown)
				return;
		}
		else if(!this._cardFrontShown)
			return;
		
		switch(this._cardType) {
			case CardHelp.AMEX: 		
				var w=30,h=14,t=38,l=115;
				break;
			case CardHelp.MASTER_CARD: 	
				var w=22,h=18,t=27,l=105;
				break;
			case CardHelp.MAESTRO: 		
				var w=22,h=18,t=27,l=112;
				break;
			default: 
				var w=22,h=18,t=27,l=125;
		}
		
		if (this._cardType == CardHelp.AMEX) {
			this._highlightElement
				.show()
				.setStyle({opacity : 0})
				.animate ({
		    		opacity:	{from: 0, to: 1},
		    		width:		{from: 1, to: w},
		    		height:		{from: 1, to: h},
		    		marginLeft:	{from: 0, to: l},
		    		marginTop:	{from: 0, to: t}}, 0.75);
			return;
		}

		if(showSide == CardHelp.SHOW_BACK) {
			var fromCard = 'CardFront', toCard = 'CardBack';
			this._cardFrontShown = false;
		}
		else {
			var fromCard = 'CardBack', toCard = 'CardFront';
			this._cardFrontShown = true;
		}
		
		var fromCardId  = this._cardType.replace(' ','').toLowerCase() + fromCard,
			toCardId	= this._cardType.replace(' ','').toLowerCase() + toCard;
		this._highlightElement.hide();
		this._cardElement.animate({
				width: 		 {to: 0},
				marginRight: {to: 80}
			}, 0.5, {
			easing : 'easeOut',
			after : function(element, i) {
            	Ojay.byId(fromCardId)
            		.setStyle({opacity : 0})
            		.hide();
            	Ojay.byId(toCardId)
            		.setStyle({opacity : 1})
            		.show();
            	Ojay.byId('card').animate({
            			width: 		{to: 160},
						marginRight: {to: 0}
            		}, 0.5, {
					easing: 'easeOut',
					after : function(e, j){
						if(showSide == CardHelp.SHOW_BACK) {
							Ojay.byId('cardHighlight')
								.show()
								.setStyle({opacity : 0})
								.animate ({
						    		opacity:	{from: 0, to: 1},
						    		width:		{from: 1, to: w},
						    		height:		{from: 1, to: h},
						    		marginLeft:	{from: 0, to: l},
						    		marginTop:	{from: 0, to: t}}, 0.75);
						}
					}}
				);
			}}
		);
	}

});