glamTile = {

	duration : 1000,
	wait : 10000,
	rowCount : 3,
	colCount : 7,
	tileWidth : 130,
	tileHeight : 130,

	init : function () {
	
		// guess if we're actually on a phone and never show the rotator (check for touch and )
		
		if ( window.innerWidth != undefined ) {
			if ( window.innerWidth < 601 ) {
				return;
			}
		}
	
		// hide all the children
		
			$$('#rotator .child').setStyle('display','none');
			
		// get a list of all the images
		
			var rotImages = $('rotator').getElements('img');
			
		// grab the url of the last image
			
			var rotLastImage = rotImages[(rotImages.length-1)].get('src');
			
		// check that last image has loaded, then set off go
		
			objImage = new Image();
			objImage.onLoad = glamTile.go(0);
			objImage.src = rotLastImage;
		
	},
	
	go : function (key) {
			
		// get a list of all the images and find the required one
		
			var rotImages = $('rotator').getElements('img');
			if (key >= rotImages.length) key = 0;
			var rotLReqImage = rotImages[key].get('src');
			
		// is this image wrapped in a link?
		
			var link = false;
			var imageParent = rotImages[key].getParent();
			if (imageParent.get('tag') == 'a') {
				link = imageParent.get('href');
			}
			
		// create the tile container
		
			var tileContainer = new Element('div',{
				'id' : 'rotator_tile_container'
			});
			tileContainer.inject($('rotator'),'bottom');
			
		// create the tiles
			
			for (var row = 0 ; row < glamTile.rowCount ; row++) {
				for (var col = 0 ; col < glamTile.colCount ; col++) {
				
					var thisTile = new Element('div');
					var theTileX = col*glamTile.tileWidth;
					var theTileY = row*glamTile.tileHeight;
					
					thisTile.setStyles({
						'left':theTileX,
						'top':theTileY,
						'background-image':'url(' + rotLReqImage + ')',
						'background-position':(-theTileX) + 'px ' + (-theTileY) + 'px',
						'-webkit-transition-delay':Math.random() + 's',
						'-moz-transition-delay':Math.random() + 's',
						'-ms-transition-delay':Math.random() + 's',
						'-o-transition-delay':Math.random() + 's',
						'transition-delay':Math.random() + 's'
					})
					// only set the opacity if we're doing it the javascript way
					if (!Modernizr.csstransitions) {
						thisTile.setStyles({
							'opacity':0
						});
					}
					
					// add a link to the tile
					if (link != false) {
						thisTile.setStyles({
							'cursor':'pointer'
						});
						thisTile.addEvents({
							'click':
							function() {
								self.location = link;
							},
							'mouseover':
							function() {
								window.status = link;
							},
							'mouseout':
							function() {
								window.status = '';
							}
						})
					}
					
					// inject into container
					thisTile.inject(tileContainer);
					
				}
			}
			
		// fade in the tiles
		
			if (Modernizr.csstransitions) {
			
				setTimeout(function() {
					$('rotator_tile_container').addClass('roll');
				},0);
				
			} else {
			
				var allTiles = $('rotator_tile_container').getChildren('div');
				$each(allTiles,function(el) {
					setTimeout(function() {
						new Fx.Morph(el,{'duration':glamTile.duration}).start({'opacity':1});
					},Math.random()*1000)
				});
			
			}
			
		// roll the title
		
			setTimeout(function() {
				glamTile.rollTitles(key);
			},glamTile.duration)
			
		// fade out title
		
			setTimeout(function() {
				glamTile.disposeTitles(key);
			},glamTile.wait - glamTile.duration - 50)
			
		// fade out and run the alternative cycle
		
			if (rotImages.length>1) {
				setTimeout(function() {
					glamTile.goAlt(key+1);
				}, glamTile.wait );
			}
		
		// clean up the aftermath
		
			setTimeout(function() {
				$('rotator_tile_container').dispose();
			}, glamTile.duration + glamTile.duration + glamTile.wait + 500 );
		
	},
	
	goAlt : function (key) {
			
		// get a list of all the images and find the required one
		
			var rotImages = $('rotator').getElements('img');
			if (key >= rotImages.length) key = 0;
			var rotLReqImage = rotImages[key].get('src');
			
		// is this image wrapped in a link?
		
			var link = false;
			var imageParent = rotImages[key].getParent();
			if (imageParent.get('tag') == 'a') {
				link = imageParent.get('href');
			}
			
		// create the box container
		
			var boxContainer = new Element('div',{
				'id' : 'rotator_box_container'
			});
			boxContainer.setStyles({
				'background-image':'url(' + rotLReqImage + ')'
			})
			boxContainer.inject($('rotator'),'bottom');
					
		// add a link to the tile
		
			if (link != false) {
				boxContainer.setStyles({
					'cursor':'pointer'
				});
				boxContainer.addEvents({
					'click':
					function() {
						self.location = link;
					},
					'mouseover':
					function() {
						window.status = link;
					},
					'mouseout':
					function() {
						window.status = '';
					}
				})
			}
			
		// fade the tiles out revealing the box
		
			if (Modernizr.csstransitions) {
			
				setTimeout(function() {
					$('rotator_tile_container').removeClass('roll');
				},0);
				
			} else {
			
				var allTiles = $('rotator_tile_container').getChildren('div');
				$each(allTiles,function(el) {
					setTimeout(function() {
						new Fx.Morph(el,{'duration':glamTile.duration}).start({'opacity':0});
					},Math.random()*1000)
				});
			
			}
			
		// roll the title
		
			setTimeout(function() {
				glamTile.rollTitles(key);
			},glamTile.duration)
			
		// fade out title
		
			setTimeout(function() {
				glamTile.disposeTitles(key);
			},glamTile.wait - glamTile.duration - 50)
			
		// fade out and run the alternative cycle
		
			setTimeout(function() {
				glamTile.go(key+1);
			}, glamTile.wait );
		
		// clean up the aftermath
		
			setTimeout(function() {
				$('rotator_box_container').dispose();
			}, glamTile.duration + glamTile.duration + glamTile.wait + 500 );
			
	
	},
	
	rollTitles : function(key) {
	
		// get a list of all the images and find the required one
		
			var rotImages = $('rotator').getElements('img');
			var rotLReqTitle = rotImages[key].get('alt');
			var rotLReqClass = rotImages[key].get('class');
			
		// if there's already a title, kill it
		
			if ($('rotator_title') != undefined) $('rotator_title').dispose();
			
		// create the title
		
			var rotTitle = new Element('h4', {
				'html': rotLReqTitle,
				'id': 'rotator_title',
				'class': rotLReqClass
			});
			// only set the opacity if we're doing it the javascript way
			if (!Modernizr.csstransitions) {
				rotTitle.setStyles({
					'opacity':0
				});
			}
			
			rotTitle.inject($('rotator'));
			
		// fade up
		
			if (Modernizr.csstransitions) {
			
				setTimeout(function() {
					rotTitle.addClass('roll');
				},0);
				
			} else {
			
				new Fx.Morph(rotTitle,{'duration':glamTile.duration}).start({
					'opacity':1
				});
			
			}
	
	},
	
	disposeTitles : function() {
		
		if (Modernizr.csstransitions) {
		
			setTimeout(function() {
				$('rotator_title').removeClass('roll');
			},0);
			
		} else {
		
			new Fx.Morph($('rotator_title'),{'duration':glamTile.duration}).start({
				'opacity':0
			});
		
		}
		
	}

}

window.addEvent('domready', function() {
	glamTile.init();
})