var Control = new Class({
    initialize: function(){
    
    },
    eventHandler: function(eventObject, params){
        switch (params.get('action')) {
        
        }
    },
    addKeyEvent: function(params){
        document.addEvent('keydown', this.eventHandler.bindWithEvent(this, params));
    },
    addEvent: function(eventType, elementName, params){
        var eventElement = $(elementName);
        if (eventElement) {
            $(elementName).addEvent(eventType, this.eventHandler.bindWithEvent(this, params));
        }
    }
});

var cardGallery = new Class({
	Extends : Control,
	cardData : null,
	showCount : 4,
	offset : -110,
	current : null,
	defaultText : '',
	max : null,
	fx : null,
	fxRunning : false,
	initialize : function(cardData, defaultText)
	{
		this.showCount = 4;
		this.offset = -110;
		this.fx = null;
		this.fxRunning = false;
		this.current = null;
		this.max = null;
		this.cardData = cardData;
		this.defaultText = defaultText;
		this.showImage(0);
	},
	showImage : function(index) {
		var card = this.cardData[parseInt(index)];
		$('cardSelect').setStyle('background-image', 'url(/ecards/'+card.filename+')');
        $('ecard-id').set('value', card.id);
        $('cardSelect').empty();
        if(card.description) {
        	$('cardBenefit').set('html', card.description);
        }
        else {
        	$('cardBenefit').set('html', this.defaultText);
        }
	},
    eventHandler: function(eventObject, params){
        //call parent eventHandler method
        this.parent(eventObject, params);
        //switch action
        switch (params.get('action')) {
            case 'set_card':
                this.showImage(params.get('index'));
                return false;
                break;
            case 'move_left':
                if(this.current > 0 && !this.fxRunning)
                {
                	this.fxRunning = true;
                	var from = this.current * this.offset;
                	this.current--;
                	var to = this.current * this.offset;
                	this.fx.start('left', from, to);
                	this.showImage(this.current);
                }
                return false;
                break;
            case 'move_right':
                if(this.current < this.max-this.showCount && !this.fxRunning)
                {
                	this.fxRunning = true;
                	var from = this.current * this.offset;
                	this.current++;
                	var to = this.current * this.offset;
                	this.fx.start('left', from, to);
                	this.showImage(this.current);
                }
                return false;
                break;
        }
    },	
	init : function()
	{
    	//set start point
    	this.current = 0;
    	//set max
    	this.max = this.cardData.length;
    	//select events
    	this.cardData.each(function(value, key) {
    		this.addEvent('click', 'card'+key, $H({ action : 'set_card' , index : key }));
    	}.bind(this));
    	//bind fx
    	this.fx = new Fx.Tween('cardList', {
    		unit : 'px',
    		transition : Fx.Transitions.Pow.easeOut,
    		duration : 500,
    		onComplete : function() {
    			this.fxRunning = false;
    		}.bind(this)
    	});
    	this.fx.set('left', 0);
		//move events
		this.addEvent('click', 'moveLeft', $H({ action : 'move_left' }));
		this.addEvent('click', 'moveRight', $H({ action : 'move_right' }));
	}
});