var Resizer = Class.create();

Resizer.prototype = {
	elements:[],
	options: {},
	current_factor: 1,
	initialize: function(css_selector,options) {
		this.options = options;
		this.elements = $$(css_selector);
	},
	grow: function() {
		this.scale(this.current_factor+0.1);
	},
	shrink: function() {
		this.scale(this.current_factor-0.1);
	},
	scale: function(factor) {
		if(factor == this.current_factor)
			return
		if((this.options.max_scale && this.options.max_scale<factor) || (this.options.min_scale && this.options.min_scale>factor))
		 return 
		this.elements.each(function(e){
			this.scaleElement(e,factor);
		}.bind(this));
		$$(".art .title").each(function(e){
			e.style.fontSize= (factor*14)+'px';
		});
		this.current_factor = factor;
	},
	scaleElement: function(element, factor) {
		if((this.options.max_scale && this.options.max_scale<factor) || (this.options.min_scale && this.options.min_scale>factor))
		 return
		$(element).style.width= (factor*parseFloat(this.options.width))+'px';
		$(element).style.height= (factor*parseFloat(this.options.height))+'px';
	},
	toggleHighlightElement: function(element) {
		function add(a,b) { return a + b};
		function substract(a,b) { return a - b};
		function operator(operator,a,b) {
			if(operator=="+") { return add(a,b)}
			if(operator=="-") { return substract(a,b)}
		};
		element = $(element);

		element.toggleClassName("highlight");

		method = element.highlighted ? "+" : "-";
		element.style.marginTop= operator(method, parseFloat(element.style.marginTop),5)+'px';
		element.style.marginRight= operator(method, parseFloat(element.style.marginRight),5)+'px';
		element.style.marginBottom=operator(method, parseFloat(element.style.marginBottom),5)+'px';
		element.style.marginLeft=operator(method, parseFloat(element.style.marginLeft),5)+'px';

		method = element.highlighted ? "-" : "+";
		element.style.width=operator(method, parseFloat(element.style.width),10)+'px';
		element.style.height=operator(method, parseFloat(element.style.height),10)+'px';
		element.highlighted = element.highlighted ? false : true;
	}
	
}
var resizer;
document.observe("dom:loaded", function() {
	resizer = new Resizer(".art",{width:120, height:120});
});

Event.addBehavior({
	".art:mouseover" : function(event) { if(!this.highlighted) { resizer.toggleHighlightElement(this) } },
	".art:mouseout" : function(event) { if(this.highlighted) { resizer.toggleHighlightElement(this) } }
});

var glider;