(function($) {
	Application.changeMode = function(toMode) {
		toMode = parseInt(toMode);
		$('#transition').queue(function() {
			var queue = $(this);
			if (toMode == Application.mode) {
				if (toMode==1)
					$('#menu1').show();
					
				queue.dequeue();
			} else {
				function onComplete() {
					queue.dequeue();
					Application.mode = toMode;
				}
				
				switch(toMode) {
					case 1:
						if (Application.mode==2) {
							toMode1FromMode2(onComplete);							
						} else if (Application.mode==3) {
							toMode1FromMode3(onComplete);
						} else if (Application.mode == 0) {
							toMode1FromMode0(onComplete);
						}
						break;
					case 2:
						if (Application.mode==1) {
							toMode2FromMode1(onComplete);
						} else if (Application.mode==3) {
							toMode2FromMode3(onComplete);
						}
						break;
					case 3:
						if (Application.mode==2) {
							toMode3FromMode2(onComplete);
						}else if (Application.mode==1) { 
							toMode3FromMode1(onComplete);
						}
						break;
				}
			} 
		});
	}	
			
	//
	// Initial transition. Show menu-1 items one by one. 
	// While this is done, load the first slideshow image, and start caching
	// artist preview images one by one.
	function toMode1FromMode0(callback) {
		Application.mode = 1;
		var items = $('#menu1_vol img, #menu1 ul:first > li').css({opacity:0});
		$('#menu1').show();
		var i = 0;
		(function _next() {
			if (i < items.length) {
				var item = items.eq(i++);
				item.animate({opacity:1}, {duration:300, complete:_next});
			} else {
				callback();
			}
		})();
	}
		
		
	function toMode2FromMode1(callback) {
		var speed=1.0;
		var path = $.history.getCurrent();
		var link = $('#menu1 a[href=/'+path+'][href^=/artists]');
		var linksToHide = $('#menu1 a[href^=/artists]').not(link);
		var linksToMove = $('#menu1 > ul > li > * > a').not(linksToHide);
		linksToHide = linksToHide.add($('#menu1 a[href=/index]'));
		
		$('#progressbar1').hide();
		$('#menu2-thumbs-wrapper').css({display:'block', visibility: 'hidden'});
		$('#menu2').css({visibility: 'visible', display: 'block', top: 'auto', bottom: '32px', opacity: 0});
		
		$('#menu2 .menu2-block').css({visibility: 'visible', display: 'block', opacity: 0});
		
		$('#mainSlideshow').trigger('slideshow:pause').fadeOut(800*speed);
		
		var slideshowHolder = $('#mode2-slideshow');
		
		slideshowHolder.css({bottom: $('#menu2').height()+32+'px'});
		$('#mode2-slideshow').show();
		
				$('#copyright').fadeOut(500);
		
		linksToHide.animate({opacity: 0}, {duration: 800*speed});
		$('#menu2').animate({opacity: 1}, {duration: 800*speed});
		var queue =linksToHide.eq(0);
		queue.queue(function() {
			link.animate({opacity: 0}, {duration: 800*speed});
			var theTimeout = linksToMove.length * 50;
			var orgDuration = 600 + theTimeout;
			linksToMove.each(function(i) {
				var base = $('base').attr('href');
				base = base.replace(/(.*\/\/.*?\/)(.*)/, '$1');
				var path = this.href.replace(base, '');
				var mode1Link = $(this);
				var mode2Link = $('#menu2 a[href=/'+path+']');
				var orgPos = $(this).offset();
				var newPos = mode2Link.offset();
				var duration = orgDuration;// - theTimeout;
				var last = i==(linksToMove.length-1);
				setTimeout(function() {
					mode1Link.css({position: 'absolute', top: orgPos.top+'px', left: orgPos.left+'px'})
						.animate({top: newPos.top+'px', left:newPos.left+'px'}, {duration: duration*speed, complete: function() {
							if(last) {
								queue.dequeue();
							}
						}});
				}, theTimeout);
				theTimeout-=50;
			});
		});
		$('#menu2 .menu2-block').each(function() {
			var block=$(this);
			queue.queue(function()	{
				block.animate({opacity: 1}, {duration: 300*speed, complete:function() {
					queue.dequeue();
				}});
			});
			queue.queue(function()	{
				queue.dequeue();
				$('#menu1').fadeOut();
			});
		});
		queue.queue(function() {
			$('#menu2-thumbs-wrapper').css({left: -$(window).width()+'px', visibility: 'visible'})
				.animate({left: 0}, {duration: 800*speed, complete: function() {
					queue.dequeue();
			}});
		});
		queue.queue(function() {
			$('#menu1 li.open ul').hide().removeClass('open').each(function() {
			});;
		
			queue.dequeue();
			callback();
		});
		
		// Trigger this, what all thumbnails are loaded. 
		//$('#menu2-thumbs').trigger('scroller:reset');
		
		
	}
	function toMode1FromMode2(callback) {
		var wh = $(window).height();
		$('#mode2-slideshow').fadeOut(300, function() {
			$('#divContent').css({left: '', top: ''});
		});
//		$('#menu1 ul li ul.open').hide();
		
		$('#menu1').css({position:'relative', height: 'auto', display: 'block'});
		$('#menu1 ul:first').css({position: 'relative', top: wh +'px'});
		$('#menu1 ul a').css({opacity: 1, position: 'static', top: 'auto', left: 'auto', display: 'inline'});
		$('#menu1 a[href=/index], #menu2 a[href=/index]').animate({opacity: 1}, {duration: 800});
		var m2pos = $('#menu2').position();
		$('#menu2').css({top: m2pos.top+'px', bottom: 'auto'});
		$('#menu2').animate({top: wh}, {duration:800, complete:function() {
			$('#menu2').css({display:'none',bottom: '32px', top: 'auto'});
			$('#menu1 ul:first').animate({top: 0}, {duration: 800, complete: function() {
				$(this).css({position:'static'});
				$('#menu1').css({position: 'static'});
				
				$('#copyright').fadeIn(500);
				callback();	
			}});
		}});
	}
	function toMode2FromMode3(callback) {
		var wHeight = $(window).height();
		
		var current = $('#mode2-slideshow .current');
		current.css({height: current.height()+'px', width: current.width()+'px'});
//		alert(current.width()+'px, '+current.height()+'px: '+current.attr('src'));
		
		$('#menu2').css({top: wHeight+'px', bottom: 'auto'}).show();
		var m2height = $('#menu2').height();
		var success = false;
		Application.resizeActiveImage({height: wHeight - m2height-32}, function() {
			$('#mode2-slideshow').css({height: 'auto', bottom: m2height+32+'px'});
			$('#menu2').animate({top: wHeight-m2height-32+'px'}, {duration:800, complete:function() {
				$('#menu2').css({top: 'auto', bottom: '32px'});
				$('#mode2-logo').show();
				$('#mode3').hide();
				if (success === false) { 
					success=true;
					callback();
				}
			}});
		});
		setTimeout(function() {
			if (success === false) { 
				callback();
			}
		}, 2000);
	}
	function toMode3FromMode2(callback) {
		$('#mode3').show();
		$('#mode2-logo').hide();
		var m2pos = $('#menu2').position();
		var m2height = $('menu2').height();
		$('#menu2').css({top: m2pos.top+'px', bottom: 'auto'});
		$('#menu2').animate({top: $(window).height()+'px'}, {duration:800, complete:function() {
			$('#menu2').hide();
			var h = $(window).height()-96;
			var current = $('#mode2-slideshow .current');
			current.css({height: current.height()+'px', width: current.width()+'px'});
			Application.resizeActiveImage({height: h});
			callback();
			$('#mode2-slideshow').css({height: h+'px', bottom: '64px'});
		}});
	}
	function toMode3FromMode1(callback) {
		alert('todo:toMode3FromMode1');
		callback();
	}
	function toMode1FromMode3(callback) {
		var wh = $(window).height();
		$('#mode2-slideshow').fadeOut(300, function() {
			$('#divContent').css({left: '', top: ''});
		});
		$('#menu2').css({display:'none',top: 'auto', bottom: '32px', 'height': 'auto'});
		$('#menu2-logo').show();
		
		$('#menu1').css({position:'relative', height: 'auto', display: 'block'});
		$('#menu1 ul:first').css({position: 'relative', top: wh +'px'});
		$('#menu1 ul a').css({opacity: 1, position: 'static', top: 'auto', left: 'auto', display: 'inline'});
		$('#menu1 a[href=/index], #menu2 a[href=/index]').animate({opacity: 1}, {duration: 800});
		
		
		$('#mode3').fadeOut(800, function() {
			$(this).hide();
			$('#menu1 ul:first').animate({top: 0}, {duration: 800, complete: function() {
				$(this).css({position:'static'});
				$('#menu1').css({position: 'static'});
				$('#copyright').fadeIn(500);
				
				callback();	
			}});
		});
	}
	
	Application.transition = function(options) {
		var defaults = {
			fromElem:null, 
			toElem:null, 
			before: function(options) {}, 
			middle: function(options) {},
			complete: function(options) {},
			fromCss: {opacity: 0},
			toCss: {opacity: 1},
			fromDuration: 300,
			toDuration: 300
		};
		options = $.extend({}, defaults, options);
		options.before(options);
		if (options.fromElem) {
			$(options.fromElem).animate(options.fromCss, {duration: options.fromDuration, complete: function() {
				try {
				options.middle(options);
				} catch(e) {
					$.trace(e);
				}
				$(options.toElem).animate(options.toCss, {duration: options.toDuration, complete: function() {
					options.complete(options);
				}});
			}});
		} else {
			options.middle(options);
			$(options.toElem).animate(options.toCss, {duration: options.toDuration, complete: function() {
				options.complete(options);
			}});
		}
	};
	
	Application.align = function(what, halign, valign) {
		what = $(what);
		var container = what.parent();
		var size = {width: container.width(), height: container.height()};
		what.css({top: valign * (size.height - what.height())+'px', left: halign * (size.width - what.width())+'px'});
	};
	
	function calculateScale(width, height, maxWidth, maxHeight) {
		var scale = (height > maxHeight) && maxHeight ? maxHeight / height : 1;
		return (width*scale > maxWidth) && maxWidth ? maxWidth / width  : scale;
	}
	function calculateCenter(width, height, maxWidth, maxHeight) {
		return { top: maxHeight/2 - height/2, left: maxWidth/2 - width/2 }
	}
	
})(jQuery);