var thumbWidth = 225;
var thumbHeight = 198;
var hoverWidth = 400;
var hoverHeight = 352;
var preloadImages = [];
var bookPage = 0;
var bookPages = [];
var ap_instances = [];

function ap_stopAll(playerID) {
	for(var i = 0;i<ap_instances.length;i++) {
		try {
			if(ap_instances[i] != playerID) 
				document.getElementById('ap'+ap_instances[i].toString()).SetVariable("closePlayer", 1);
			else 
				document.getElementById('ap' + ap_instances[i].toString()).SetVariable("closePlayer", 0);
		} catch( errorObject ) {
			// stop any errors
		}
	}
}

function setupPlayer(el, pathPrefix) {
	if(!el) {
		return;
	}
	var count = 1;
	el.getElements('li').each(function(li) {
		var span = new Element('span');
		span.inject(li);
		var swiff = new Swiff('assets/flash/player.swf',{
			id: 'ap'+count,
			width: 180,
			height: 11,
			container: span,
			params: {
				wMode: 'transparent'
			},
			vars: {
				playerID: count, 
				soundFile: pathPrefix+li.title,
				lefticon: '0xffffff',
				righticon: '0xffffff',
				rightbghover: '0xbbbef1',
				righticonhover: '0xffffff',
				leftbg: '0x3b4e87', 
				rightbg: '0x5675ca',
				bg: '0xbbbef1',
				slider: '0x3b4e87',
				text: '0x3b4e87'
			}
		});
		ap_instances.push(count);
		++count;
	});
}

function mosaicMenu(id, zoomedImgBase, nameOffset) {
	document.getElements('#'+id+' img').each(function(el) {
		el.addEvents({
			'mouseenter': function(item) {
				var img = item.target || el;
				var link = img.getParent().getParent();
				var imgCoords = img.getCoordinates();
				var sectionCoords = $(id).getCoordinates();
				var footerCoords = $('footer').getCoordinates();
				var imgBaseName = img.src.substring(img.src.lastIndexOf('/')+1);
				var hoverImgLeft = (imgCoords.left-(hoverWidth-thumbWidth)/2);
				if(hoverImgLeft<sectionCoords.left) {
					hoverImgLeft = sectionCoords.left;
				}
				if(hoverImgLeft+hoverWidth>sectionCoords.right) {
					hoverImgLeft = sectionCoords.right-hoverWidth;
				}
				var hoverImgTop = (imgCoords.top-(hoverHeight-thumbHeight)/2);
				if(hoverImgTop<sectionCoords.top) {
					hoverImgTop = sectionCoords.top-20;
				}
				if(hoverImgTop+hoverHeight>footerCoords.top) {
					hoverImgTop = footerCoords.top-hoverHeight;
				}
				var zoomedImg = 'assets/images/'+zoomedImgBase+'/'+imgBaseName;
				preloadImages.push(zoomedImg);
				var hoverImg = new Element( 'img', { 
					'src' : zoomedImg, 
					'styles' : {
						'position': 'absolute',
						'top' : imgCoords.top+'px',
						'left' : imgCoords.left+'px',
						'width' : thumbWidth+'px',
						'height' : thumbHeight+'px',
						'border' : '1px solid #2a2627',
						'z-index' : 10,
						'cursor' : 'pointer'
					},
					'events' : {
						'mouseleave': function() {
							hoverImg.dispose();
						},
						'click': function() {
							var sectionPage = img.src.substring(img.src.lastIndexOf('/')+nameOffset);
							sectionPage = sectionPage.replace(/.jpg/, ".html");
							
							document.location=link.href;							
						}
					}
				});
				hoverImg.injectBefore($('content'));
				var zoomEffect = new Fx.Morph(hoverImg, {duration: 200, transition: Fx.Transitions.Quad.easeOut});
				zoomEffect.start({
				    'height': [thumbHeight, hoverHeight], 
				    'width': [thumbWidth, hoverWidth],
				    'top': [imgCoords.top , hoverImgTop],
				    'left': [imgCoords.left , hoverImgLeft]
				});


			}
		})
		
	}.bind(this));
}

function displayDiv(id) {
	$(id).setStyle('display', 'block');
	$(id+'_overlay').setOpacity(0.9);
}

function hideDiv(id) {
	$(id).setStyle('display', 'none');
	$(id+'_overlay').setOpacity(0);
}

var SlideShow = new Class({
	Implements: [Options, Events],
	options: {
		crossfade: true,
		duration: 300,
		loop: true,		
		start: 0,
		transition: Fx.Transitions.linear,
		onChange: Class.empty,
		onFaded: Class.empty
	},
	initialize: function(el, images, options) {
		// assign div wrapping main photo to this.main
		this.main = $(el);
		if(!this.main) {
			return;
		}
		this.main.setStyle('overflow', 'hidden');
		
		// store the list of image URLs
		this.images = images;

		// assign first photo inside this.main to this.mainpic, this should be the large photo
		this.mainpic = this.main.getElement('img');

		// process options passed in
		this.setOptions(options);

		// create reusable preloader
		this.preloader = new Element('img');
		this.preloader.addEvent('load', function() {
			this.preloaded = true;
			this.swap('preloaded');
		}.bind(this));

		// setup internal variables
		this.current = this.options.start;
		this.swapped = true;
		this.usingalt = false;

		// setup secondary image for crossfade
		if (this.options.crossfade) {
			this.mainalt = new Element('img');
			this.main.setStyles({
				position: 'relative'
			});
			var mainpos = this.main.getPosition();
			var mainpicpos = this.mainpic.getPosition();
			//alert("main=("+mainpos.x+","+mainpos.y+")\nmainpic=("+mainpicpos.x+","+mainpicpos.y+")");
			this.mainalt.setStyles({
				position: 'absolute',
				top: mainpicpos.y-mainpos.y,
				left: mainpicpos.x-mainpos.x
			});
			this.mainalt.setOpacity(0);
			this.mainalt.injectInside(this.main);
		}
		
		// setup effects
		this.fx = {			
			resizer: new Fx.Tween(this.main, { property: 'height', duration: this.options.duration, transition: this.options.transition }),
			fadeoutMain: new Fx.Tween(this.mainpic, {
				property: 'opacity',
				duration: this.options.duration, 
				transition: this.options.transition, 
				onComplete: function() {
					this.faded = true;
					this.fireEvent('onFaded');
					this.swap('faded');
				}.bind(this)
			}),
			fadeoutAlt: new Fx.Tween(this.mainalt, {
				property: 'opacity',
				duration: this.options.duration,
				transition: this.options.transition, 
				onComplete: function() {
					this.faded = true;
					this.fireEvent('onFaded');
					this.swap('faded');
				}.bind(this)
			}),
			fadeinMain: new Fx.Tween(this.mainpic, {
				property: 'opacity',
				duration: this.options.duration,
				transition: this.options.transition,
				onComplete: function() {
					this.swapped = true;
				}.bind(this)
			}),
			fadeinAlt: new Fx.Tween(this.mainalt, {
				property: 'opacity',
				duration: this.options.duration,
				transition: this.options.transition,
				onComplete: function() {
					this.swapped = true;
				}.bind(this)
			})
		};
		if (Fx.Scroll) this.fx.scroller = new Fx.Scroll(window, { offset: { 'x': 0, 'y': this.options.scrollOffset } });
	},
	next: function() {
		this.change(this.current+1);
	},
	prev: function() {
		this.change(this.current-1);
	},
	change: function(to) {
		// change to specified picture
		if (!this.swapped) return false;
		if (this.options.loop) {
			// if new image is outside bounds, loop around to opposite end
			if (to >= this.images.length) to = 0;
			if (to < 0) to = this.images.length-1;
		} else {
			// if new image is outside bounds, use applicable extreme
			if (to >= this.images.length) to = this.images.length-1;
			if (to < 0) to = 0;
		}
		if (this.current==to) return false;
		this.current = to;
		this.faded = false;
		this.preloaded = false;
		this.swapped = false;
		// fade out old image
		var useme = (this.usingalt) ? this.fx.fadeoutAlt : this.fx.fadeoutMain;
		useme.start(0);
		// preload image
		this.preloader.src = this.images[to];
		// swap caption
		this.fireEvent('onChange', to);
		return this;
	},
	swap: function(why) {
		// swaps new photo in when ready (preloaded / faded out if applicable)
		var useme,usefx;
		if (this.options.crossfade && why=='preloaded') {
			useme = (this.usingalt) ? this.mainpic : this.mainalt;
			usefx = (this.usingalt) ? this.fx.fadeinMain : this.fx.fadeinAlt;
			this.usingalt = !this.usingalt;
		} else if (!this.options.crossfade && this.preloaded && this.faded) {
			useme = this.mainpic;
			usefx = this.fx.fadeinMain;
		} else {
			return false;
		}
		useme.src = this.preloader.src;
		usefx.start(1);
		
		return this;
	},
	swapafter: function(useme, usefx) {
		this.fx.resizer.start(this.preloader.height).chain(function() {
			useme.src = this.preloader.src;
			usefx.start(1);
		}.bind(this));
		this.removeEvents('faded');
	}
});

function bookDemo(el) {
	if(!el) {
		return;
	}
	var img = el.getElement('img');
	var images = [];
	images.push(img.src);
	var prefix = img.src.substring(0, img.src.lastIndexOf('.'));	
	images.push(prefix+"_1_0.jpg");
	images.push(prefix+"_1_1.jpg");
	images.push(prefix+"_2_0.jpg");
	images.push(prefix+"_2_1.jpg");
	
	var slideShow = new SlideShow(el, images);
	slideShow.next.periodical(3000, slideShow);
}

function setup() {

	bookDemo($('bookcover'));	

	setupPlayer($('album'), 'assets/media/');

	mosaicMenu('subsections','covers',0);
	
	

	if($('coverphone')) {	
		var slideShow = new SlideShow($('coverphone'), 
			['assets/images/slides/1301.jpg',
			'assets/images/slides/1302.jpg',
			'assets/images/slides/1303.jpg',
			'assets/images/slides/1304.jpg',
			'assets/images/slides/1305.jpg',
			'assets/images/slides/1401.jpg',
			'assets/images/slides/1402.jpg',
			'assets/images/slides/1403.jpg',
			'assets/images/slides/1404.jpg',
			'assets/images/slides/1405.jpg',
			'assets/images/slides/1501.jpg',
			'assets/images/slides/1502.jpg',
			'assets/images/slides/1503.jpg',
			'assets/images/slides/1504.jpg',
			'assets/images/slides/1505.jpg',
			'assets/images/slides/1601.jpg',
			'assets/images/slides/1602.jpg',
			'assets/images/slides/1603.jpg',
			'assets/images/slides/1604.jpg',
			'assets/images/slides/1605.jpg',
			'assets/images/slides/1701.jpg',
			'assets/images/slides/1702.jpg',
			'assets/images/slides/1703.jpg',
			'assets/images/slides/1704.jpg',
			'assets/images/slides/1705.jpg'
			]
		);
		slideShow.next.periodical(3000, slideShow);
	}
	
	Array.each.delay(3000,this,[
		preloadImages,
		function(src) {
			var img = new Image();
			img.src = src;
		}
	]);
}

window.addEvent('domready', setup);