var Balloon = new Class({

	consts: {
		open:{
			height: 177,
			top: 30
		},
		closed:{
			height: 42,
			top: 170
		}
	},
	
    initialize: function(el){
        this.el = el;
		this.top = $$(this.el).getElement('.balloon-top')[0];		
		this.copy = $$(this.el).getElement('.copy')[0];
		this.copy.fade('hide').setStyle('display', 'block');
		this.positionTween = 	new Fx.Tween(this.top, 	{property:'top'});
		this.sizeTween =		new Fx.Tween(this.top,  {property:'height'});
		this.copyFadeTween = 	new Fx.Tween(this.copy, {property:'opacity', duration:400});
	},
	
	open: function(){
		this.clearAnimations();
		this.positionTween.start(this.consts.open.top);
		this.sizeTween.start(this.consts.open.height);
		this.sizeTween.addEvent('complete', function(){
			this.copyFadeTween.start(1);
			this.sizeTween.removeEvents('complete');
		}.bind(this));		
	},
		
	close: function(){
		this.clearAnimations();
		this.positionTween.start(this.consts.closed.top);
		this.sizeTween.start(this.consts.closed.height);
		this.copyFadeTween.start(0);	
	},
	
	clearAnimations: function() {
		this.positionTween.cancel();
		this.sizeTween.cancel();			
		this.copyFadeTween.cancel();
		this.sizeTween.removeEvents('complete');
	}
});


var Animal = new Class({
	
	consts: {
		body: {
			over: 0,
			out: 5
		},
		reflection: {
			over: 135,
			out: 130
		}
	},
		
	initialize: function(el){
		this.el = el;
		this.body = $$(this.el).getElement('.animal-body')[0];
		this.reflection = $$(this.el).getElement('.animal-reflection')[0];
		this.bodyTween = new Fx.Tween(this.body, { property:'top', duration:180 });
		this.reflectionTween = new Fx.Tween(this.reflection, { property:'top', duration:180 });
	},
	
	over: function() {
		this.clearAnimations();
		this.bodyTween.start(this.consts.body.over);
		this.reflectionTween.start(this.consts.reflection.over);
	},
	
	out: function() {
		this.clearAnimations();
		this.bodyTween.start(this.consts.body.out);
		this.reflectionTween.start(this.consts.reflection.out);
	},
	
	clearAnimations: function() {
		this.bodyTween.cancel();
		this.reflectionTween.cancel();
	}
	
});


var Plan = new Class({

	Implements: Events,
	currentlyOpen:  false,	
	
    initialize: function(el){
        this.el = $$(el)[0];
		this.balloon = new Balloon(this.el);
		this.animal = new Animal($$(this.el).getElement('.animal')[0]);
		var clickAreas = new Array();
		clickAreas[0] = $$(this.el).getElement('.animal-body')[0];
		clickAreas[1] = $$(this.el).getElement('.balloon-top .balloon-name')[0];
		for (var i=0; i < clickAreas.length; i++) {
			$(clickAreas[i]).addEvent('click', this.open.bind(this));
			$(clickAreas[i]).addEvent('mouseover', this.animal.over.bind(this.animal));
			$(clickAreas[i]).addEvent('mouseout', this.animal.out.bind(this.animal));
			if(!(Browser.Engine.trident4 || Browser.Engine.trident5)){
				$(clickAreas[i]).addEvent('focus', clickAreas[i].blur);
			}
		};
		
	},

	open: function(e){
		if(!this.currentlyOpen){
			this.fireEvent('open');
			this.balloon.open();
			this.currentlyOpen = true;
		}else{
			this.close();
		}
	},
	
	close: function(){
		if(this.currentlyOpen){
			this.balloon.close();
			this.currentlyOpen = false;
		}
	}

});


var Carousel = new Class({
	
	Implements: Events,
	carouselSize: 950,
	tabs: [],
	
	initialize: function(plans, tabSelectors) {
		this.plans = plans;
		for (var i=0; i < tabSelectors.length; i++) {
			this.tabs[i]=$(tabSelectors[i]).getElement('a');
			this.tabs[i].addEvent('click', this.go.bind(this, i));
			if(!(Browser.Engine.trident4 || Browser.Engine.trident5)){
				$(this.tabs[i]).addEvent('focus', this.tabs[i].blur);
			}
		}
		this.carousel = $('carousel');
		this.slideTween = new Fx.Tween(this.carousel, { property:'left', duration:750 });
		for (var i=0; i < this.plans.length; i++) {
			this.plans[i].addEvent('open', this.planOpen.bind(this));
		};
	},
	
	planOpen: function(){
		for (var i=0; i < this.plans.length; i++) {
			this.plans[i].close();
		};
	},
	
	go: function(activeIndex) {
		for (var i=0; i < this.tabs.length; i++) {
			this.tabs[i].removeClass('active');
		};
		this.tabs[activeIndex].addClass('active');
		this.slideTween.cancel();
		this.slideTween.start((this.carouselSize*activeIndex)*-1);
		this.fireEvent('open', activeIndex);
	}
});


window.addEvent("domready", function() {
	
	// setup all plans
	var elements = $$('#carousel .plan');
	var plans = new Array();
	for (var i=0; i < elements.length; i++) {
		plans[i] = new Plan(elements[i]);
	};
	
	// setup the carousel
	var c = new Carousel(plans, ['nav-payg', 'nav-pm']);
	
	// setup the hash deeplinks
	POKE.Util.Rel2Hash.setup();
	POKE.Util.Rel2Hash.execute();
	
	// attach events to open the promos.
	var promoTween = new Fx.Tween('promos', {property:'height'});	
	c.addEvent('open', function(tabIndex){
		if(tabIndex == 0){
			promoTween.start(130);
		}else{
			promoTween.start(0);
		}
	});
	
});