var thumbnailSize = 60;
var baseLoadingImg = new Image();
baseLoadingImg.src = 'loading.gif';
baseLoadingImg.className = 'loading';

var movieImg = new Image();
movieImg.src = 'movie.png';
movieImg.className = 'movie';

var icon1 = new Image();
icon1.src = '../icon3.gif';

var icon2 = new Image();
icon2.src = '../icon4.gif';


$(function(){
	//loadRecentCategory();
	setupCategory();
	setupMenu();
	setupReturnImage();
});

function init(json){
	/*var li = $('#menu_' + json.id);
	li.parent().slideDown();
	li.addClass('selected');*/
	
	//setThumbnails(json);
}
function setupCategory(){
	var id = location.hash.replace(/#/g,'');
	if(id.length < 1){
		id = $('#menu > ul > li:first > ul > li:last').get(0).id.substring(5);
		location.hash = id;
	}
	$.getJSON('ajax.php?id=' + id, setThumbnails);
}
/*
function loadRecentCategory(){
	var ul = $('#menu ul.menu:first').slideDown();
	var li = $('li:last', ul).addClass('selected');
	var id = li.get(0).id.substring(5);
	$.getJSON('ajax.php?id=' + id, setThumbnails);
}*/

function setupMenu(){
	/*
	$('#menu div.year').click(function(){
		$('#menu ul.menu').slideUp();
		$('ul.menu', $(this).parent()).slideDown();
	});
	$('#menu ul.menu li').click(function(){
		var id = this.id.substring(5);
		$('#menu ul.menu li').removeClass('selected');
		$(this).addClass('selected');
		$.getJSON('ajax.php?id=' + id, setThumbnails);
	});*/
	$(document).click(function(){
		resetAllMenu();
	});
	$('#menu').click(function(){
		return false;
	});
	$('#menu ul ul li').click(function(){
		var id = this.id.substring(5);
		//$('#menu ul.menu li').removeClass('selected');
		//$(this).addClass('selected');
		$.getJSON('ajax.php?id=' + id, setThumbnails);
		location.hash = id;
		resetAllMenu();
		return false;
	});
	$('#open').click(function(){
		$(this).next('ul').toggle();
		return false;
	});
	$('#menu li:has(ul)').each(function(){
		var menu = $(this).children('ul');
		$(this).mouseover(function(){
			$('#menu ul ul:visible').hide();
			menu.show();
		});
	});
	function resetAllMenu(){
		$('#menu ul ul:visible').hide();
		$('#menu ul:visible').hide();
	}
}
function setupReturnImage(){
	$('returnImg').hover(
		function () {
			this.src = icon1.src;
		},
		function () {
			this.src = icon2.src;
		}
	);
}

function setThumbnails(json){
	$('#thumbnail').empty();
	$('#contents').hide();
	
	var date = json.date.replace(/-/g, '.');
	
	document.title = json.title + ' - ' + date + ' - Photo';
	$('#title').empty().append(json.title);
	$('#date').empty().append(date);
	$('#header').show();
	//$('#comment').empty().append(json.comment);
	setComment(json.comment);
	
	var path = json.dirName + '/';
	
	var tr;
	for(var i=0; i<json.photos.length; i++){
		var fileName = json.photos[i].fileName;
		var thumnailImg;
		var isMovie = fileName.substr(fileName.length - 4) == '.mp4';
		if(isMovie){
			thumnailImg = $(movieImg).clone();
		} else {
			thumnailImg = $(baseLoadingImg).clone();
		}
		
		$('#thumbnail').append($('<div>').append(thumnailImg));
		
		var data = json.photos[i];
		
		if(isMovie){
			data.fileName = path + fileName;
			thumnailImg.bind('click', data, movieClicked);
		} else {
			data.loadingImg = thumnailImg;
			var img = new Image();
			$(img).bind('load', data, imageLoaded);
			img.src = path + fileName;
		}
	}
}
function imageLoaded(event){
	var thumbnailImg = event.data.loadingImg;
	thumbnailImg.bind('click', event.data, thumbnailClicked);
	thumbnailImg.attr('src', this.src);
	thumbnailImg.attr('class', 'loaded');
	
	if(this.width == this.height){
		thumbnailImg.width(thumbnailSize);
		thumbnailImg.height(thumbnailSize);
	} else {
		var resizeWidth, resizeHeight, gap, top, left, clip;
		if(this.width < this.height){
			resizeWidth = thumbnailSize;
			resizeHeight = this.height * thumbnailSize / this.width;
			gap = ( resizeHeight - resizeWidth ) / 2;
			top = (-1 * gap) + 'px';
			left = 0;
			clip = 'rect(' + gap + 'px auto ' + (thumbnailSize+gap) + 'px auto)';
		}else if(this.height < this.width){
			resizeWidth = this.width * thumbnailSize / this.height;
			resizeHeight = thumbnailSize;
			gap = ( resizeWidth - resizeHeight ) / 2;
			top = 0;
			left = (-1 * gap) + 'px';
			clip = 'rect(auto ' + (thumbnailSize+gap) + 'px auto ' + gap + 'px)';
		}
		thumbnailImg.width(resizeWidth);
		thumbnailImg.height(resizeHeight);
		thumbnailImg.css('top', top);
		thumbnailImg.css('left', left);
		thumbnailImg.css('clip', clip);
	}
}


function thumbnailClicked(event){
	$('#thumbnail div.select').removeClass('select');
	$(this).parent().addClass('select');
	var image = $('<img>').attr('src', this.src);
	var comment = event.data.comment;

	setContents(image);
	setComment(comment);
}

var baseMovie = $('<embed type="video/quicktime" autostart="false" pluginspage="http://www.apple.co.jp/quicktime/download/index.html" cache="true">');

function movieClicked(event){
	$('#thumbnail div.select').removeClass('select');
	$(this).parent().addClass('select');	
	
	var fileName = event.data.fileName;
	var width = event.data.width;
	var height = event.data.height;
	var comment = event.data.comment;
	
	//var movie = baseMovie.clone().attr('src', fileName).attr('width', width).attr('height', height);
	//setContents(movie);
	var movie = $(document.createElement('div')).attr('id', 'video');
	//$('#contents').hide().empty();
	setContents(movie);
	jwplayer('video').setup({
		autostart: true,
		file: fileName,
		modes: [
			{ type: 'html5' },
			{ type: 'flash', src: 'player.swf' }
		],
		width: width,
		height: height
	});
	
	//$('#contents').fadeIn();
	
	setComment(comment);
}

function setContents(content){
	var div = $('#contents');
	div.hide();
	div.empty().append(content);
	div.fadeIn();
}
function setComment(comment){
	var div = $('#comment');
	div.hide();
	
	if(comment == ''){
		return;
	}
	
	div.empty().append($('<div>').addClass('commentInner').append(comment));
	div.fadeIn();
}