(function(window){

//----------------------------------------------------------------------------------------------------------------------
// Index class
//----------------------------------------------------------------------------------------------------------------------

function Index(){ this.initialize.apply(this, arguments) }
	
	var p = Index.prototype;
	
	p.NAV_OVER = 0.32;
	
	p.nav;
	p.navH;
	p.visuals;
	
	p.cover;
	
	p.initialize = function(){
		var owner = this;
		this.nav = $('nav');
		this.navH = this.nav.height();
		
		this.nav.find('li a').bind({
			mouseenter : function(){
				$(this).stop().animate({
					opacity : 0.99
				}, 600, 'easeOutCubic');
			},
			mouseleave : function(){
				$(this).stop().animate({
					opacity : owner.NAV_OVER
				}, 600, 'easeOutCubic');
			}
		});
		
		this.visuals = new Visuals();
		$(this.visuals).bind({
			onImgsLoad : function(){
				$(this).unbind('onImgsLoad');
				owner.onImgsLoad();
			}
		});
		
		$(window).bind({
			resize : $.proxy(this.onResize, this)
		});
		this.onResize();
	}
	
	p.createCover = function(){
		var owner = this;
		this.cover = $('<div>');
		this.cover.css({
			position : 'absolute',
			zIndex : 10000,
			backgroundColor : '#ffffff',
			width : '100%',
			height : '100%'
		});
		
		$('body').append(this.cover);
		
		this.cover.stop().animate({
			opacity : 0
		}, 1000, function(){
			$(this).remove();
			owner.start();
		});
	}
	
	p.show = function(){
		this.createCover();
		
		this.onResize();
		$('body').css({
			visibility : 'visible'
		});
	}
	
	p.start = function(){
		//this.visuals.start();
	}
	
	p.onImgsLoad = function(){
		this.show();
	}
	
	p.onResize = function(){
		var sh = $(window).height();
		var sw = $(window).width();
		var scale = (sh - 8) / this.navH;
		var s = ($.browser.mozilla) ? 100 : 93;
		this.nav.css({
			//fontSize : (scale * 100) + '%'
			fontSize : (scale * s) + '%'
		});
		
		this.visuals.resize(sw, sh);
	}


//----------------------------------------------------------------------------------------------------------------------
// Visuals class
//----------------------------------------------------------------------------------------------------------------------

function Visuals(){ this.initialize.apply(this, arguments) }
	
	var p = Visuals.prototype;
	
	p.WAIT_TIME = 4000;
	
	p.list;
	p.container;
	
	p.initialize = function(){
		var owner = this;
		this.list = [];
		
		this.container = $('#pictures');
		var imgList = this.container.find('li');
		
		var loadedCount = 0;
		var maxCount = imgList.length;
		
		imgList.each(function(){
			var v = new Visual($(this));
			$(v).bind({
				onImgLoad : function(){
					loadedCount += 1;
					if(loadedCount >= maxCount){
						$(owner).trigger('onImgsLoad');
					}
				},
				onHide : function(e){
					var v = e.target;
					var vc = v.container;
					owner.container.prepend(vc);
					v.show();
					
					owner.wait();
				}
			});
			owner.list.push(v);
		});
		
		this.list = this.list.reverse();
	}
	
	p.start = function(){
		this.wait();
	}
	
	p.wait = function(){
		var owner = this;
		setTimeout(function(){
			var v = owner.list.shift();
			owner.list.push(v);
			v.hide();
		}, this.WAIT_TIME);
	}
	
	p.resize = function(sw, sh){
		if(!this.list) return;
		var len = this.list.length;
		for(var i = 0; i < len; i++){
			var v = this.list[i];
			v.resize(sw, sh);
		}
	}

//----------------------------------------------------------------------------------------------------------------------
// Visual class
//----------------------------------------------------------------------------------------------------------------------

function Visual(){ this.initialize.apply(this, arguments) }
	
	var p = Visual.prototype;
	
	p.isLoaded;
	
	p.container;
	p.imageJ;
	p.image;
	p.span;
	
	p.canvasJ;
	p.canvas;
	
	p.imgsize;
	p.data = {
		horizontalAlign : '',
		verticalAlign : ''
	};
	
	p.initialize = function(container){
		var owner = this;
		this.container = container;
		
		this.span = $('<span>');
		this.span.css({
			display : 'block',
			position : 'absolute',
			width : '100%',
			height : '100%'
		});
		this.container.append(this.span);
		this.imageJ = this.container.find('img');
		
		var src = ($.browser.msie) ? this.imageJ.data('src') + '?'+Math.random() : this.imageJ.data('src');
		
		$('<img>').attr({
			src : src,
			width : this.imageJ.attr('width'),
			height : this.imageJ.attr('height')
		}).bind({
			load : function(){
				owner.isLoaded = true;
				owner.imageJ.remove();
				owner.createCanvas($(this).get(0));
				$(owner).trigger('onImgLoad');
			}
		});
	}
	
	p.show = function(){
		if(this.canvasJ){
			this.container.stop().css({
				opacity : 1
			});
		}else{
			$(this.image).stop().css({
				opacity : 1
			});
		}
		
	}
	
	p.hide = function(){
		var owner = this;
		if(this.canvasJ){
			this.container.stop().animate({
				opacity : 0
			}, 1300, function(){
				$(owner).trigger('onHide');
			});
		}else{
			$(this.image).stop().animate({
				opacity : 0
			}, 1300, function(){
				$(owner).trigger('onHide');
			});
		}
	}
	
	p.createCanvas = function(image){
		this.image = image;
		var imgsize = $.getImageSize(image);
		this.imgsize = imgsize;
		
		if($.support.opacity){
			this.canvasJ = $('<canvas />');
			this.canvas = this.canvasJ.get(0);
			this.span.append(this.canvasJ);
			this.resizeCanvas(this.imgsize.width, this.imgsize.height, 0, 0);
			this.resize();
		}else{
			this.span.append(this.image);
			this.resizeCanvas(this.imgsize.width, this.imgsize.height, 0, 0);
		}
	}
	
	p.resizeCanvas = function(width, height, x, y){
		if($.support.opacity){
			this.canvasJ.attr({
				width : width,
				height : height
			}).css({
				width : width,
				height : height
			});
			var ctx = this.canvas.getContext('2d');
			ctx.drawImage(this.image, x, y, width, height);
		}else{
			if(this.image){
				$(this.image).css({
					width : width,
					height : height,
					top : y, left : x
				});
			}
		}
	}
	
	p.resizeImg = function(sw, sh){
		var nWidth  = this.imgsize.width;
    var nHeight = this.imgsize.height;
   	if(nHeight < nWidth * (sh / sw)){
			var width  = Math.floor(nWidth * sh / nHeight);
			var height = sh;
			var x = -(width - sw) >> 1;
			var y = 0;
			this.span.css({
				top : 0,
				left : 0
			});
			var xy = this.correctPos(x, y, sw, sh);
			this.resizeCanvas(width, height, xy.x, xy.y);
		}else{
			var width  = sw;
			var height = Math.floor(nHeight * sw / nWidth);
			var x = 0;
			var y = -(height - sh) >> 1;
			this.span.css({
				top : 0,
				left : 0
			});
			var xy = this.correctPos(x, y, sw, sh);
			this.resizeCanvas(width, height, xy.x, xy.y);
		}
	}
	
	p.correctPos = function(x, y, sw, sh){
		switch(this.data.horizontalAlign){
			case 'LEFT':
				x = 0;
			break;
			case 'RIGHT':
				x = sw - this.imgsize.width;
			break;
			default :
		}
		switch(this.data.verticalAlign){
			case 'TOP':
				y = 0;
			break;
			case 'BOTTOM':
				y = sh - this.imgsize.height;
			break;
			default :
		}
		return {x : x, y : y};
	}
	
	p.resize = function(sw, sh){
		if(!this.isLoaded) return;
		if(!sw){
			sw = $(window).width();
			sh = $(window).height();
		}
		this.resizeImg(sw, sh);
	}

window.Index = Index;
}(window));


$(function(){

	var index = new Index();

});