BLIP.Class.create("BLIP.Controls.DistributionLogoFlipper", BLIP.Controls.Control, 
		function(config) {
			var thisContext = this;
			this.logos = config.logos;
			this.target = config.target;
			$(document).ready(function(){	
			     thisContext.initialize();
			});
		}, 
		{
			config: {},
			interval: 36,
			logos: [],
			currentSlide: 0,
			currentFlips: 0,
			randomFlips: 0,

			animateBottomFlipDown: function(i, callback) {
				setTimeout(BLIP.Delegate.create(this, this.showBottomImage, {i:i, stage: 1}), this.interval);
				setTimeout(BLIP.Delegate.create(this, this.showBottomImage, {i:i, stage: 2}), this.interval*2);
				setTimeout(BLIP.Delegate.create(this, this.showBottomImage, {i:i, stage: 3}), this.interval*3);
				setTimeout(BLIP.Delegate.create(this, callback), this.interval*4);
			},
			
			animateTopFlipDown: function(i, callback) {
				setTimeout(BLIP.Delegate.create(this, this.showTopImage, {i:i, stage: 1}), this.interval);
				setTimeout(BLIP.Delegate.create(this, this.showTopImage, {i:i, stage: 2}), this.interval*2);
				setTimeout(BLIP.Delegate.create(this, this.showTopImage, {i:i, stage: 3}), this.interval*3);
				setTimeout(BLIP.Delegate.create(this, callback), this.interval*4);
			},
	        
	        flip: function(callback) {
	        	this.moveToBack(this.currentSlide, function() {
	        		callback();
	        	});
		        this.currentSlide = this.currentSlide > 0 ? this.currentSlide-=1 : this.currentSlide = (this.logos.length-1);
	        },
	        
	        flipToRandomItem: function() {
	        	if (this.currentFlips == this.randomFlips) {
	        		this.currentFlips = 0;
	        		this.updateExpanation();
	        		this.randomFlips = Math.floor(Math.random()*(this.logos.length*3)) + 1;
	        		setTimeout(BLIP.Delegate.create(this, this.flipToRandomItem), 5000);
	        	} else {
	        		var thisContext = this;
	        		this.currentFlips++;
	        		this.flip(function() {
	        			thisContext.flipToRandomItem();
	        		});
	        	}
	        },
	        
	        getExplanationHtml: function(explanation) {
	        	var html = 	"<div class='DestinationExplanationContents'>";
	        	html += 	explanation;
	        	html += 	"</div>";
	        	return html;
	        },
	        
			getFlipperItem: function(i) {
				var html = '<div class="FlipperItem" id="Flipper' + i + '">';
				html +=		'<div class="FlipperTopSlab">';
				html += 		'<div class="FlipperSlab" style="background-image: url(' + this.logos[i].logo + ');"></div>';
				html +=		'</div>';
				html +=		'<div class="FlipperBottomSlab">';
				html += 		'<div class="FlipperSlab" style="background-image: url(' + this.logos[i].logo + ');"></div>';
				html +=		'</div>';
				html += 	'</div>';
				return html;
			},
			
			getHtml: function() {
				var html = "";
				for (var i=0; i<this.logos.length; i++) {
					html += this.getFlipperItem(i);
				}
				return html;
			},

			initialize: function() {
				this.currentSlide = (this.logos.length-1);
				$("#" + this.target).html(this.getHtml());
				$("#Flipper" + this.currentSlide + " .FlipperBottomSlab").show();
				this.flipToRandomItem();
	        },
	        
	        moveToBack: function(i, callback) {
	        	var thisContext = this;
	        	var html = $("#Flipper" + i).html();
	        	this.animateTopFlipDown(i, function() {
	        		var tempHtml = $("#Flipper" + i).html();
	        		$("#Flipper" + i).remove();
					$("#Flipper" + this.currentSlide).before('<div class="FlipperItem" id="Flipper' + i + '">' + tempHtml + '</div>');
		        	this.animateBottomFlipDown(this.currentSlide, function() {
						$("#Flipper" + i).remove();
						$("#" + this.target).prepend('<div class="FlipperItem" id="Flipper' + i + '">' + html + '</div>');
						callback();
					});
	        	});
	        },
	        

	        
	        showBottomImage: function(params) {
	        	var i = params.i;
	        	var stage = params.stage;
	        	if (stage == 1) {
					$("#Flipper" + i + " .FlipperBottomSlab").addClass("FlipBottom1");
					$("#Flipper" + i + " .FlipperBottomSlab").show();
	        	} else if (stage == 2) {
					$("#Flipper" + i + " .FlipperBottomSlab").addClass("FlipBottom2");
					$("#Flipper" + i + " .FlipperBottomSlab").removeClass("FlipBottom1");
	        	} else {
					$("#Flipper" + i + " .FlipperBottomSlab").removeClass("FlipBottom2");
	        	}
	        },
	        
	        showTopImage: function(params) {
	        	var i = params.i;
	        	var stage = params.stage;
	        	if (stage == 1) {
					$("#Flipper" + i + " .FlipperTopSlab .FlipperSlab").addClass("FlipTop1");
					$("#Flipper" + i + " .FlipperTopSlab .FlipperSlab").html("<img src='/skin/mercury/destination/images/home.flipper.top.1.png'>");
	        	} else if (stage == 2) {
					$("#Flipper" + i + " .FlipperTopSlab .FlipperSlab").removeClass("FlipTop1");
					$("#Flipper" + i + " .FlipperTopSlab .FlipperSlab").addClass("FlipTop2");
					$("#Flipper" + i + " .FlipperTopSlab .FlipperSlab").html("<img src='/skin/mercury/destination/images/home.flipper.top.2.png'>");
	        	} else {
					$("#Flipper" + i + " .FlipperTopSlab").remove();
	        	}
	        },
	        
	        updateExpanation: function() {
	        	var thisObj = this;
				$(".DestinationExplanationContents").fadeOut(500, function() {
		           	$("#DistributionExplanation").html(thisObj.getExplanationHtml(thisObj.logos[thisObj.currentSlide].description));
					$(".DestinationExplanationContents").fadeIn(500);
				});
			}

		}
	);