jQuery.HollywoodSquares = function(options) {
	var opt = options || {};
	
	opt.cssSelector = opt.cssSelector || ".image_container.portfolio" ;
	opt.styleName = opt.styleName || "hollywood_square" ;
	
	opt.callbacks = opt.callbacks ||
	{
		mouseOver: undefined,
		mouseOut: undefined,
		onClick: undefined
	}
	
	/*
		<div class="hollywood_square">
			<p></p>
		</div>
	*/
	opt.template = "";
	
	initialize();
	
	/* initialize */
	function initialize() {
		$("li:not(:empty)", $(opt.cssSelector)).each(function(){
			var div = qtag("div", {className: opt.styleName}/*, qtag("p", {innerHTML: $("img", this)[0].title}), qtag("span")*/ );
			
			div = $(div);
			div.css('opacity',0.0)
			div.bind("mouseout", mouseOutHandler);
			div.bind("click", mouseClickHandler);
			
			this.appendChild(div[0]);
			
			
			$(this).bind("mouseover", mouseOverHandler);
			
			this.allowHollywoodSquare = true;
		});

	}
	
	
	function mouseOverHandler(event) {
		$(".hollywood_square").trigger("mouseout");
		
		if(!this.allowHollywoodSquare) return;
		
		var div = $("." + opt.styleName, this);
		div.stop();
		div.fadeTo("normal", 0.5);
		
		this.allowHollywoodSquare = false;
		if(opt.callbacks.mouseOver)
			opt.callbacks.mouseOver(this);
	}
	
	function mouseOutHandler(event) {		
		var div = $(this);
		
		div.stop();
		div.fadeTo("normal", 0.0);
		
		this.parentNode.allowHollywoodSquare = true;
		if(opt.callbacks.mouseOut)
			opt.callbacks.mouseOut(this.parentNode);
	}
	
	function mouseClickHandler(event) {
		if(opt.callbacks.onClick)
			opt.callbacks.onClick(this.parentNode);
	}
	
	
	function qtag(name, params){
		var t = document.createElement(name);
		update_set(t, params);

		for(var i=2; i<arguments.length; i++)
			t.appendChild(arguments[i]);

		return t;
	}

	function update_set(dest, n){
		for(var k in n){
			dest[k] = n[k];
		}
	}

	
}