/*
	hostess.js
	
	http://hostess.co.jp/
*/

Array.prototype.shuffle = function() {
	var i = this.length;
	while(i){
		var j = Math.floor(Math.random()*i);
		var t = this[--i];
		this[i] = this[j];
		this[j] = t;
	}
	return this;
}

var Hostess ={
	url : {
		artist_detail : '/artist.php?id=%d'
	},
	detail : {
		height : 1000,
		fadeTime : 500
	}
}

// lightbox風の黒いオーバーレイ
var Overlay = {
	init : function(){
		this.div = $('#overlay');
	},
	show : function(){
		this.resize();
		$('#contents').css({
			position : 'fixed',
			top : 0,
			width  : '100%',
			height : '100%'
		});
		this.div.show();
	},
	hide : function(){
		$('#contents').css({
			position : 'relative',
			top : 0,
			width  : '100%',
			height : ''
		});
		this.div.fadeOut(Hostess.detail.fadeTime);
	},
	resize : function(){
		this.div.height(Display.height());
		this.div.width(Display.width());
	}
};


// アーティスト詳細
var Detail = {
	container : null,
	current_id : 0,
	init : function(){
		this.container = $('#container');
		this.centering();
	},
	centering : function(){
		var left = Math.floor((Display.width() - this.container.width()) / 2);
		this.container.css('left', left + 'px');
	},
	show : function(id){
		this.current_id = id;
		Display.scrollTop(0);
		Overlay.show();
		this.load(id, function(data){
			this._show(data);
		});
	},
	prev : function(){
		$('.arrow').css('visibility', 'hidden');
		var id = Artists.prevId(this.current_id);
		this.load(id, function(data){
			this._prev(data);
		});
	},
	next : function(){
		$('.arrow').css('visibility', 'hidden');
		var id = Artists.nextId(this.current_id);
		this.load(id, function(data){
			this._next(data);
		});
	},
	hide : function(){
		var self = this;
		$('.artisrBox').fadeOut(Hostess.detail.fadeTime, function(){
			self.container.empty();
//			Overlay.resize();
		});
	},
	load : function(id, callback){
		var data = this.cache.get(id);

		if(data){
			this.current_id = id;
			if(callback) callback.call(this, data);
		}else{
			var self = this;
			$.ajax({
				url : Hostess.url.artist_detail.replace('%d', id),
				dataType : 'json',
				cache : false,
				success : function(data){
					self.cache.add(id, data);
					self.current_id = id;
					if(callback) callback.call(self, data);
				},
				error : function(xhr, errorType){
					//console.log('error',errorType,xhr);
					if(errorType == 'timeout'){
						
					}
				},
				complete : function(){
					//console.log('complete');
				}
			});
		}
	},
	// アーティスト情報を表示
	_show : function(data){
		var div = this.buildHtmlObj(data);

		div.fadeIn(Hostess.detail.fadeTime, function(){
			Overlay.resize()
		});
	},
	// スクロールして次を表示
	_next : function(data){
		var div = this.buildHtmlObj(data);
		this.scroll(div, 'next');
	},
	_prev : function(data){
		var div = this.buildHtmlObj(data);
		this.scroll(div, 'prev');
	},
	scroll : function(div, dir/* スクロールの向き */){
		var diff = ((dir == 'prev') ? '+=' : '-=') + Hostess.detail.height;
		dir = (dir == 'prev') ? -1 : 1;
		div.css('top', dir * Hostess.detail.height + 'px').show();// 次のDIVを表示

		$('html').css({overflowY : 'scroll'});
		Display.scrollTop(0);
		var self = this;
		$('.artisrBox').animate({top : diff + 'px'}, 500, function(){
			$('html').css({overflowY : 'auto'});
			$('.artisrBox:not(#id' +  self.current_id + ')').hide();
			setTimeout(function(){ Overlay.resize() }, 100);
		});
	},
	// アーティスト情報一件分のDIVを作る
	buildHtmlObj : function(data){
		var div = $('#id' +  this.current_id);
		if(div.length){
			div.find('.arrow').css('visibility', 'visible');
		}else{
			var html = this.buildBody(data);
			var self = this;
			var prev = $('<p class="arrow btnUp">BACK</p>').click(function(){ self.prev(); });
			var next = $('<p class="arrow btnDown">NEXT</p>').click(function(){ self.next(); });
			var body = $('<div />').html(html);
			div = $('<div />').attr('id', 'id' + this.current_id).addClass('artisrBox').hide();

			div.append(prev);
			div.append(body);
			div.append(next);
			this.container.append(div);
		}
		return div;
	},
	buildBody : function(data){
		var html = '\
			<div class="columnLeft">\
				<img src="%photo%" alt="" />\
				<h2%jclass%>%name%</h2>\
				<h3>%jname%</h3>\
				<dl><dt>LABEL</dt><dd>%label%</dd></dl>\
				<div class="txtArea"><p>%profile%</p></div>\
			</div>\
			<div class="columnRight">\
				<p class="btnLink"><a href="%link%">LINK</a></p>\
				<dl><dt>discography</dt><dd>%discography%</dd></dl>\
			</div>\
			<div class="clear"><hr /></div>\
		';
		
		var jclass = data.name.match(/[ぁ-ヶ]|[一-龠]/) ? ' class="japanese"' : '';
		html = html.replace('%jclass%', jclass);

		for(var i in data){
			var v = String(data[i]).replace(/\\n/g, '<br />');
			html = html.replace('%' + i + '%', v);
		}
		return html;
	},
	cache : {
		datum : {},
		add : function(id, data){
			this.datum[id] = data;
		},
		get : function(id){
			return this.datum[id];
		}
	}
};

var Artists = {
	// アーティスト一覧を表示(トップページ)
	show : function(){
		var ul = $('#artists');
		var html = '';
		
		var shuffled = this.shuffle();
		for(var i=0; i < shuffled.length; i++){
			var artist = shuffled[i];
			if(!artist.id) continue;

			var className = 'priority' + artist.rank;
			if(artist.name.match(/[ぁ-ヶ]|[一-龠]/)) className += '_j';
			var li = '<li class="' + className + '"><a onclick="Detail.show(' + artist.id + ');">' + artist.name + '</a></li>\n';
			html += li;
		}
		ul.html(html);
	},
	/*
	優先度A（太字＆大文字）→ すべて表示
	優先度B（太字＆中文字）→（60-A）×50%をランダム表示
	優先度C（細字＆小文字）→（60-A）×50%をランダム表示
	
	※優先度B、またはCが必要個数を満たしていない場合は不足分を足りている優先度から表示させる
	
	※ABCすべてを足しても、60個に満たない場合は足りない状態で表示させる
	*/
	shuffle : function(){
		// rankごとに配列に分ける
		var artistsByRank = {1:[],2:[],3:[],4:[]};
		for(var i=0; i < artists.length; i++){
			var artist = artists[i];
			if(artist.rank) artistsByRank[artist.rank].push(artist);
		}
		// B,Cをシャッフル
		artistsByRank[1].shuffle();
		artistsByRank[2].shuffle();
		artistsByRank[3].shuffle();

		// 優先度A,B,Cの表示数
		var num  = 60;
		var num1 = Math.min(num, artistsByRank[1].length);// 60は超えない
		var num2 = Math.min(Math.floor((num - num1)/2), artistsByRank[2].length);
		var num3 = num - num1 - num2;

		// それぞれのランクから表示数分をとってきてくっつける
		var result = artistsByRank[1].slice(0, num1).concat(
			artistsByRank[2].slice(0, num2),
			artistsByRank[3].slice(0, num3)
		);

		// もう一度シャッフルして返す
		return result.shuffle();
	},
	// 次のアーティストのID
	nextId : function(id){
		var next_id = 0;
		var i = this.find(id);
		if(i < 0){
			next_id = id;
		}else{
			var j = (i+1) % artists.length;
			next_id = artists[j].id;
		}
		return next_id;
	},
	// 前のアーティストのID
	prevId : function(id){
		var prev_id = 0;
		var i = this.find(id);
		if(i < 0){
			prev_id = id;
		}else{
			var j = (i + artists.length - 1) % artists.length;
			prev_id = artists[j].id;
		}
		return prev_id;
	},
	// artistsをidで検索
	find : function(id){
		var found = false;
		for(var i=0; i < artists.length; i++){
			if(artists[i].id == id){
				found = true;
				break;
			}
		}
		return found ? i : -1;
	}
}

// 画面の情報
var Display = {
	height : function(){
		var h = 0;
		if($.browser.msie && $.browser.version < 7){
			var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
			var offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
			h = scrollHeight < offsetHeight ? $(window).height() : scrollHeight;
		}else{
			h = $(document).height();
		}
		return h;
	},
	width : function(){
		var w = 0;
		if($.browser.msie && $.browser.version < 7){
			var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
			var offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
			w = scrollWidth < offsetWidth ? $(window).width() : scrollWidth;
		}else{
			w = $(window).width();
		}
		return w;
	},
	scrollTop : function(d){
		if ([,]!=0){ // IE6,7,8
			return $('html').scrollTop(d);
		}else if($.browser.mozilla){
			return $('html').scrollTop(d);
		}else if((function x(){})[-5]=='x'){// Safari3
			return $('body').scrollTop(d);
		}else{
			return $('body').scrollTop(d);
		}
	}
}




//-----------------------------------------
$(window).resize(function(){
	Overlay.resize();
	Detail.centering();
});

$(function(){
	Overlay.init();
	Detail.init();
	Artists.show();

	$('#btnClose').click(
		function(){
			Overlay.hide();
			Detail.hide();
		}
	);
});