BLIP.Class.create("BLIP.Unit.ShowFlipcard", BLIP.Unit,
	function(config) {
		BLIP.Unit.call(this, config);
	},
	{
		selector : ".ShowFlipcard",

		init : function() {
			this.initContents();
			this.poster = this.domRoot.find(".ShowPoster");
			this.info = this.domRoot.find(".ShowInfo");
			this.rotator = this.domRoot.find(".Rotator");
			this.initAnimationParams();
			this.registerEvents();
		},

		initContents : function () {
			if(BLIP.Unit.SubscribeButton) {
				this.subscribeButton = this.initSubUnit(BLIP.Unit.SubscribeButton).single();
			}
		},

		initAnimationParams : function() {
			this.animLength = 400; // ms
			this.fps = 1000/32; // 32fps
			this.steps = this.animLength / this.fps;
			this.rotTarget = 180;
			this.rotPerStep = this.rotTarget / this.steps;
			this.rot = 0;
		},

		setRotation : function(el, amount){
			el[0].style.webkitTransform = "rotateY(" + amount + "deg)";


			if(amount === 180) {
				this.poster.hide();
			}
			else {
				this.poster.show();
			}
		},

		animateIn : function() {
			this.rot += this.rotPerStep;
			this.inStep++;

			if(this.rot > 90) {
				this.poster.css({ "z-index":1, "display":"none" });
				this.info.css({ "z-index":2, "display":"block" });
			}

			if(this.rot >= 180 || this.inStep >= this.steps) {
				this.rot = 180;
				clearInterval(this.outInterval);
				this.isAnimatingIn = false;
				this.animateInFinish();
			}
			this.setRotation(this.rotator, this.rot);
		},

		animateOut : function() {
			this.rot -= this.rotPerStep;
			this.outStep++;

			if(this.rot < 90) {
				this.poster.css({ "z-index":2, "display":"block" });
				this.info.css({ "z-index":1, "display":"none" });
			}

			if(this.rot <= 0  || this.outStep >= this.steps) {
				this.rot = 0;
				clearInterval(this.outInterval);
				this.isAnimatingOut = false;
				this.animateOutFinish();
			}
			this.setRotation(this.rotator, this.rot);
		},

		onHoverIn : function() {

			this.inStep = 0;
			this.isAnimatingIn = true;
			clearInterval(this.inInterval);
			clearInterval(this.outInterval);
			this.inInterval = setInterval(this.delegate(this.animateIn), this.fps);
		},

		onHoverOut : function() {

			this.outStep = 0;
			this.isAnimatingout = true;
			clearInterval(this.inInterval);
			clearInterval(this.outInterval);
			this.outInterval = setInterval(this.delegate(this.animateOut), this.fps);
		},

		onPosterLoad : function() {
			this.poster.css('display','block');
			this.info.css("display","block");
		},

		onDescriptionClick : function() {
			window.location = this.domRoot.find('a.Name').attr('href');
		},

		registerEvents : function() {
			this.domRoot.unbind(); // unbind before we bind, in case the events get re-bound later - prevents
								// duplicate event firings
			this.domRoot.hover(
				this.delegate(this.onHoverIn),
				this.delegate(this.onHoverOut)
			);
			this.domRoot.find('.ShowInfoContents').bind('click', this.delegate(this.onDescriptionClick));
			this.onPosterLoad();
		},

		animateOutFinish : function() {
			//noop
		},
		animateInFinish : function() {
			//noop
		}
});