var CardenCunietti = {};

CardenCunietti.Timings = {
	BackgroundImage: {
		appear: 0.5
	}
}

CardenCunietti.Application = Class.create({
	
	initialize: function () {
		this._arrange_thumbnails();
		this._arrange_columns();
		Cufon.replace("#body h2, #body h3, #floating_title, .pull_quote");
		Cufon.now();
		this._init_background_scaler();
	},
	
	_arrange_columns: function () {
		if (!this._columns_arranged) {
			this._columns_arranged = true;
			new CardenCunietti.ColumnArranger("body");
		}
	},
	
	_arrange_thumbnails: function () {
		if (!this._thumbnails_arranged) {
			this._thumbnails_arranged = true;
			new CardenCunietti.ThumbnailArranger("body");
		}
	},
	
	_init_background_scaler: function () {
		if (!this._background_scaler_inited) {
			this._background_scaler_inited = true;
			this._background_scaler = new CardenCunietti.BackgroundScaler();
		}
	}
	
})
CardenCunietti.initialize = function () {
	if (!CardenCunietti.app) CardenCunietti.app = new CardenCunietti.Application();
}


CardenCunietti.ColumnArranger = Class.create({
	
	initialize: function (element) {
		this._element = $(element);
		
		if (!this._element) return;
		
		this._posts_container = this._element.down(".posts");
		
		if (!this._posts_container) return;
		
		this._posts = this._posts_container.childElements();
		
		this._max_height = this._element.getHeight();
		
		var x = 0;
		
		this._posts.each(function (post) {
			if (post.hasClassName("back")) return;
			this._columnize(post);
			post.setStyle({ position: "absolute", left: x + "px" });
			x += post.getWidth();
		}.bind(this));
		
		this._posts_container.setStyle({ width: Math.max(896, x) + "px" });
		if ($("back_to_category")) $("back_to_category").setStyle({ width: Math.max(896, x) + "px" });
		
		this._on_resize();
		Event.observe(window, "resize", this._on_resize.bind(this));
	},
	
	_columnize: function (parent) {
		var content = parent.down(".content");
		
		if (!content) return;
		
		var children = content.childElements();
		
		var column = new Element("div", { "class": "column", "style": "left: 0px" });
		content.insert(column);
		
		var x = 0;
		var y = 0;
		
		children.each(function (child) {
			var child_height = child.getHeight();
			
			child.remove();
			
			if (child.childElements().length == 1 && ["img", "iframe"].include(child.down().nodeName.toLowerCase())) {
				child = child.down().remove();
			}
			
			column.insert(child);
			
			if (column.getHeight() > 500) {
				child.remove();
				x += column.getWidth();
				column = new Element("div", { "class": "column", "style": "left: " + x + "px" });
				content.insert(column);
				column.insert(child);
				y = 0;
			}
			
			y += child_height;
		}.bind(this));
		
		x += column.getWidth();
		
		parent.setStyle({ width: x + "px" });
	},
	
	_on_resize: function (event) {
		if (this._posts.last().positionedOffset().left + this._posts.last().getWidth() > this._posts_container.getWidth()) {
			this._posts_container.setStyle({ paddingBottom: "15px" });
			if ($("back_to_category")) $("back_to_category").setStyle({ marginTop: "15px" });
		} else {
			this._posts_container.setStyle({ paddingBottom: "0" });
			if ($("back_to_category")) $("back_to_category").setStyle({ marginTop: "0" });
		}
	}
	
})

CardenCunietti.ThumbnailArranger = Class.create({
	
	initialize: function (element) {
		this._element = $(element);
		
		if (!this._element) return;
		
		this._container = this._element.down(".post_thumbnails");
		
		if (!this._container) return;
				
		this._total_width = 0;
		
		this._container.childElements().each(function (sub_cat) {
			var thumbs = sub_cat.select(".thumbnails a");
			
			var n = thumbs.length;
			n = Math.ceil(n / 2) * 2;
			var w = n * (thumbs[0].getWidth() + parseInt(thumbs[0].getStyle("marginLeft")) + parseInt(thumbs[0].getStyle("marginRight")));
			
			var width = w / 2;
			
			sub_cat.setStyle({ width: width + "px" });
			
			this._total_width += sub_cat.getWidth();
		}.bind(this));
		
		this._on_resize();
		Event.observe(window, "resize", this._on_resize.bind(this));
	},
	
	_on_resize: function (event) {
		if (this._total_width > this._container.getWidth()) {
			this._container.setStyle({ paddingBottom: "15px" });
		} else {
			this._container.setStyle({ paddingBottom: "0" });
		}
	}
	
})

CardenCunietti.BackgroundScaler = Class.create({
	
	initialize: function () {
		this._element = $("backgrounds");
		
		var images = this._element.select("img").map(function (img) { return img.remove() });
		
		this._element.update("");
		
		this._images = images.map(function (img) {
			this._element.insert(img);
			return new CardenCunietti.BackgroundImage(img);
		}.bind(this));
		
		if (this._images.length > 0) {
			this._images[0].appear();
			this._images[0].start_scaling();
		}
	}
	
})
CardenCunietti.BackgroundImage = Class.create({
	
	initialize: function (element) {
		this._element = $(element);
		this._element.writeAttribute("title", "");
		this._loaded = false;
		this._bound_on_loaded = this._on_loaded.bind(this);
		this._element.setOpacity(0);
	},
	
	show: function (parent) {
		if (parent) parent.insert(this._element);
		this._element.show();
	},
	hide: function () {
		this._element.hide();
	},
	
	appear: function (callback) {
		if (this._loaded) {
			new Effect.Appear(this._element, {
				duration: CardenCunietti.Timings.BackgroundImage.appear,
				afterFinish: callback
			});
		} else {
			this._queued_action = this.appear.bind(this, callback);
			this.load();
		}
	},
	disappear: function () {
		
	},
	
	_on_loaded: function (event) {
		this._loaded = true;
		this._element.stopObserving("load", this._bound_on_loaded);
		if (this._queued_action) this._queued_action();
	},
	
	load: function () {
		if (this._loading) return;
		this._loading = true;
		this._element.observe("load", this._bound_on_loaded);
	},
	
	loaded: function () {
		return this._loaded;
	},
	start_scaling: function () {
		this.scale();
		Event.observe(window, "resize", this.scale.bind(this));
	},
	
	scale: function () {
		target = $("canvas");
		
		var target_width = target.getWidth();
		var target_height = target.getHeight();
		var target_aspect = target_height / target_width;
		
		if (this.aspect() >= target_aspect) {
			var new_width = target_width;
			var new_height = Math.round(target_width * this.aspect());
		} else {
			var new_width = Math.round(target_height / this.aspect());
			var new_height = target_height;
		}
		
		new_width = Math.round(new_width);
		new_height = Math.round(new_height);
		
		this._element.setStyle({
			width: new_width + "px",
			height: new_height + "px",
			left: Math.round((target_width - new_width) / 2) + "px",
			top: Math.round((target_height - new_height) / 2) + "px"
		});
	},
	
	aspect: function () {
		return this._aspect = this._aspect || (this.real_height() / this.real_width());
	},
	
	real_dimensions: function () {
		return this._real_dimensions = (this._real_dimensions || {
			width: this._element.readAttribute("width"),
			height: this._element.readAttribute("height")
		});
	},
	real_width: function () {
		return this.real_dimensions().width;
	},
	real_height: function () {
		return this.real_dimensions().height;
	}
	
})

document.observe("page:ready", CardenCunietti.initialize);