$(document).ready(function() {
	$('.result.item').click(function() {
		window.location = '/' + $(this).attr('title');
	});
	
	$('#search_result > .result').each(function() {
		showcase.images.push($(this).find('img'));
	});
	
	showcase.init();

});

var showcase = {

	id: 0,
	desiredHeight: 550,
	desiredWidth: 600,
	actualHeight: 0,
	main_image: '',
	bigflick_height: 0,
	bigflick_width: 0,
	bigflick_wrapper_height: 0,
	thumbnails: [],
	images: [],
	container: '',
	wrapper: '',
	banner: '',
	bigflick: '',
	background: '',
	bigflicks: [],
	
	init: function()
	{
		this.wrapper = $('#showcase');
		this.banner = $('#showcase-banner');
		this.bigflick = $('#showcase-bigflick');
		this.background = $('#background');
		this.set_default_event();
		this.position();
		$('#background').click(function(){
			showcase.close();
		});
	},
	
	position: function()
	{
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		if (windowHeight < this.desiredHeight)
		{
			this.actualHeight = windowHeight - 20;
		}
		else
		{
			this.actualHeight = this.desiredHeight;
		}
		this.wrapper.css('height', this.actualHeight);
		var left = ( windowWidth - this.desiredWidth ) / 2;
		var left = (this.desiredWidth < windowWidth) ? (windowWidth - this.desiredWidth) / 2 : 0;
		var top = (windowHeight - this.actualHeight) / 2;
		this.wrapper.css('left', left).css('top', top);
		this.bigflick.css('height', this.bigflick_wrapper_height);		
	},
	
	resize: function()
	{
		// based on width or height?
		var boxratio = this.desiredWidth / this.actualHeight;
		var imageratio = this.bigflick_width / this.bigflick_height;
		if (boxratio > imageratio)
		{
			$('#showcase-flick').css('height', this.bigflick_wrapper_height);		
		}
		else
		{
			$('#showcase-flick').css('width', this.desiredWidth);
		}
	},

	set_default_event: function()
	{
		$('.result.column1 > a').click(function(e) {
			e.preventDefault();
			e.stopPropagation();
			showcase.container = $(this).parent().parent();
			showcase.id = $(this).parent().parent().attr('title').match(/\d+/)[0];
			//var url = $(this).find('img').attr('src');
			//showcase.show(showcase.fullsize_url(url));
			showcase.show(this);
		});
	},
	
	fullsize_url: function(thumb_url)
	{
		return thumb_url.replace(/thumb_/, '');
	},
		
	show: function(el)
	{
		this.thumbnails = this.container.find('img');		
		this.set_contents();
		this.set_bigflick(0);
		this.open();
	},
	
	set_bigflick: function(x)
	{
		this.bigflick.empty();
		this.bigflick.append(this.bigflicks[x]);
	},
	
	preload: function()
	{
		this.bigflicks = [];
		for ( i = 0; i < this.thumbnails.length; i++ ) {
			var image = new Image();
			var imagesrc = this.thumbnails[i].src;
			image.src = this.fullsize_url(imagesrc);
			this.bigflicks.push(image);
		}
	},
	
	set_contents: function()
	{
		this.banner.empty();
		this.bigflick.empty();		

		this.preload();
		this.position();

		var width = 0;
		var minheight = 0;
		for (i = 0; i < this.thumbnails.length; i++)
		{
			width += $(this.thumbnails[i]).width() + 16;
			if (minheight < $(this.thumbnails[i]).height())
			{
				minheight = $(this.thumbnails[i]).height();
			}
			var div = $('<div class="banner-flick" id="flick_' + i + '"></div>');
			var theclone = $(this.thumbnails[i]).clone();
			div.append($(this.thumbnails[i]).clone());
			this.banner.append(div);
			div.click(function(el) {
				showcase.set_bigflick($(this).attr('id').match(/\d+/)[0]);
			});

		}
		minheight += 15;
		var bannerheight = minheight + 20;
		this.banner.css('width', width);
		this.banner.css('height', minheight);
		this.banner.parent().css('height', bannerheight);
		this.bigflick_wrapper_height = this.actualHeight - bannerheight;
		this.bigflick.css('height', this.bigflick_wrapper_height);		
	},
	
	open: function()
	{
		this.wrapper.fadeIn();
		this.background.fadeIn();
	},
	
	close: function()
	{
		this.wrapper.fadeOut();
		this.background.fadeOut();	
	},

}