var Gallery = {
	thumbs:[],
	images:[],
	canvas:null,
	path:"/img/gallery/",
	init:function() {
		this.thumbs = $(".thumbnail");
		this.canvas = $("#photo_frame");
		this.replacement = $("#replacement");
		this.loadImages();
		this.bindClicks();
	},
	changePic:function(thumb) {
		var me = this;
		var src = this.parseHref(thumb);
		var i = this.getImage(src);
		if (this.replacement.css('display') == 'none') {
			this.replacement.attr("src",me.path+src);
			this.replacement.fadeIn();
		} else {
			this.canvas.css("background-image","url('"+me.path+src+"')");
			this.replacement.fadeOut();
		}
		return false;
	},
	parseHref:function(thumb) {
		var par = $(thumb).parent();
		var href = par.attr('href');
		return /\/([^\/.]*\.jpg)/.exec(href)[1];
	},
	loadImages:function() {
		var me = this;
		this.thumbs.each(function(i) {
			var src = me.parseHref($(me.thumbs[i]));
			me.images.push($("<img>").attr("src", src));
		});
	},
	getImage:function(name) {
		var img = null;
		$(this.images).each(function() {
			if (this.attr('src') === name) {
				img = $(this);
			}
		});
		return img;
	},
	bindClicks:function() {
		var me = this;
		this.thumbs.each(function(t) {
			$(this).click(function() {
				me.changePic($(this));
				return false;
			});
		});
	}
};

$(document).ready(function() {Gallery.init();});