var Billboard = new Class({
	initialize: function() {
		this.billboard = $(document.body).getElement('div.billboard');
		
		// Variables
		this.seconds = 0;
		this.over = false;
		this.pos = 1;
		this.preload = false;
		this.timelimit = 10;
		this.rainbow = false;
		
		// Tracker
		this.billboard.getElement('a').addEvent('click', function(e) {
			e.stop();
			var anchor = this;
			// Name of product
			var name = this.get('href').split('/');
			name = name[name.length-2];
			// Track page for goals
			if (!window.location.href.contains('labs.totem')) _gaq.push(['_trackPageview', '/billboard/'+name+'/']);
			// Delay change of location (http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55527)
			(function() { window.location = anchor.get('href') }).delay(200);
		});
		
		// Tmp billboard (slices)
		for(i=0; i<16; i++) {
			new Element('div', {'class': 'tmpboard', 'styles': {
				'width': (i<15 ? 45 : 35),
				'height': 474,
				'position': 'absolute',
				'top': 0,
				'left': (45*i),
				'overflow': 'hidden',
				'opacity': 0
			}}).inject($(document.body).getElement('div.content'));
		}
		
		// Billboard change
		this.periodical = this.change.periodical(500, this);
	},
	
	change: function() {
		var obj = this;
		// Preload images if billboard is not rollovered
		if (promos.over==false || !$defined(promos.over)) {
			// Preload at start of timer
			if (this.seconds==0) this.preloadImg();
			// Timer continues
			this.seconds++;
		}
		// Change color
		if (this.seconds==this.timelimit/2) {
			if ($chk(this.rainbow)) {
				rainbow.change();
				this.rainbow=false;
			} else {
				this.rainbow=true;
			}
		}

		// Start changing billboard (only after timelimit and if images are loaded)
		if (this.seconds>=this.timelimit && this.preload!=false) {
			// Reset variables
			this.seconds = 0;
			// Clear periodical while changing the board
			$clear(this.periodical);
			// Remove focus
			this.billboard.toggleClass('focus');
			// Every browsers but IE6 and IE8 (apparently)
			if (!(Browser.Engine.trident && Browser.Engine.version==4) /*
&&
				!(Browser.Engine.trident && Browser.Engine.version==6)
*/) {
				// New image
				$each($(document.body).getElements('div.tmpboard'), function(div, index) {
					// Prepare animation
					var morph = function() {
						new Fx.Tween(div, {property: 'opacity', duration: 1500, onComplete: function() {
							if (index==15) {
								// Set new element with preload informations
								obj.billboard.getElement('a').set('href', obj.preload.href);
								// Show new images
								obj.newImgs[16].setStyles({'visibility': 'hidden', 'z-index': 5}).replaces(obj.billboard.getElement('img'));
								obj.newImgs[17].setStyle('z-index', 0).replaces(obj.billboard.getElements('img')[1]);
								// Set paper fold
								obj.billboard.getElement('img.fold').set('src', '/images/elements/paperfold/large-'+obj.preload.paperfold+'.png');
								obj.billboard.getElement('div.foldtext').setStyle('background-image', ($defined(obj.preload.foldtext) ? 'url(\'/images/elements/paperfold/'+obj.preload.foldtext+'.png\')' : 'none'));
								// Make billboard mouseoverable
								obj.billboard.toggleClass('focus');
								if (promos.over==true) obj.billboard.fireEvent('mouseover');
								// Delete tmp board
								$each($(document.body).getElements('div.tmpboard'), function(tmp) {
									tmp.setStyle('opacity', 0);
									tmp.empty();
								});
								// Reset value
								obj.preload = false;
								obj.pos++;
								if (obj.pos==3) obj.pos=0;
								obj.periodical = obj.change.periodical(500, obj);
							}
						}}).start(1);
					}
					// Make tmp board appear
					morph.delay(75*index);
				});
			// IE6 fade in fade out billboard
			} else {
				// Get proper images
				var largeImg = obj.billboard.getElement('img');
				var oldImg = obj.billboard.getElements('img')[1];
				var newImg = obj.newImgs[17].setStyles({'position': 'absolute', 'opacity': 0, 'z-index': 5}).inject(oldImg, 'before');
				// Fade in new image
				new Fx.Tween(newImg, {duration: 1500, property: 'opacity', onComplete: function() {
					// Replace old image
					obj.newImgs[16].setStyles({'visibility': 'hidden', 'z-index': 5}).replaces(largeImg);
					oldImg.destroy();
					// Erease tmp image
					newImg.setStyle('z-index', 0);
					// Change link
					obj.billboard.getElement('a').set('href', obj.preload.href);
					// Make billboard mouseoverable
					obj.billboard.toggleClass('focus');
					if (obj.over==true) obj.billboard.fireEvent('mouseover');
					// Reset value
					obj.preload = false;
					obj.pos++;
					if (obj.pos==3) obj.pos=0;
					obj.periodical = obj.change.periodical(500, obj);
				}}).start([0, 1]);
			}
		}
	},
	
	preloadImg: function() {
		var obj = this;
		// Fetch next image infos
		new Request.JSON({url: 'getBillboards.json?id='+this.pos, onSuccess: function(response) {
			// Preload next images
			obj.newImgs = new Asset.images(response.images, {onComplete: function() {
				// Preset styles on new images
				obj.newImgs[16].set({'width': 710, 'height': 474});
				obj.newImgs[17] = obj.newImgs[0].clone().set({'width': 710, 'height': 474});
				// Prepare tmp billboard
				if (!(Browser.Engine.trident && Browser.Engine.version==4)) {
					// 16 slices
					for(i=0; i<16; i++) {
						// Put clone image in slices
						$(document.body).getElements('div.tmpboard')[i].setStyle('opacity', 0);
						obj.newImgs[i].setStyles({'position': 'absolute', 'left': -(45*i), 'z-index': 0, 'filter': 'inherit'}).inject($(document.body).getElements('div.tmpboard')[i]);
					}
				}
				// Firefox mac: place image in billboard in the back so it loads the image without seeing it as
				// as it tends to load the image twice
				if (Browser.Engine.gecko && Browser.Platform.mac)
					obj.newImgs[17].setStyle('z-index', -1).inject($(document.body).getElement('div.billboard'));
				// Keep new images infos
				obj.preload = response;
			}});
		}}).send();
	}
});

var billboard;
window.addEvent('domready', function() { billboard = new Billboard(); });