/**
*	Picture Menu
*	@author Asvin Balloo (http://htmlblog.net)
*/
pictureMenu = {
	// private variables
	// class name of our menu
	menuClassName: null,
	// holder for the last expanded target
	lastTarget : null,
	// Anim instance
	screenAnim : null,
	
	/**
	*	Init the whole process here
	*	@method init
	*	@params menuClassName {string} class name of our menus
	*/
	init: function(menuClassName){
		// set our class name to be used later one
		pictureMenu.menuClassName = menuClassName;

		//set up screen animation
		var screen = document.getElementById('screen');
		screen.opacity = 0;
		screenAnim = new YAHOO.util.ColorAnim(screen, null, 0.4);
		
		// get all the lists with the class name
		var list = YAHOO.util.Dom.getElementsByClassName(menuClassName);
		
		// loop through them
		for(var i=0; i<list.length; i++) {
				var picture = list[i];
				var width0 = parseInt(YAHOO.util.Dom.getStyle(picture, 'width0'));
				var height0 = parseInt(YAHOO.util.Dom.getStyle(picture, 'height0'));
				var width1 = parseInt(YAHOO.util.Dom.getAttribute(picture, 'width1'));
				var height1 = parseInt(YAHOO.util.Dom.getAttribute(picture, 'height1'));
				var left1 = parseInt(YAHOO.util.Dom.getAttribute(picture, 'left1'));
				var top1 = parseInt(YAHOO.util.Dom.getAttribute(picture, 'top1'));
				//alert("top1 is " + top1);
	
				// add the onmouseover event to it, call the mouseOverHandler function
				YAHOO.util.Event.on(picture, "click", pictureMenu.mouseClickHandler, {'picture':picture, "width" : width1, "height" : height1, "left" : left1, "top" : top1});
		}
	},
	
	/**
	*	Mouse over handler
	*	@params e {Event} the event
	*	@params o {JSON} JSON data containing the width, height, and left values
	*/
	mouseClickHandler: function(e, o){
		// get the target
		var elTarget = YAHOO.util.Event.getTarget(e);
		//alert("over on " + elTarget.id);

		// calculate the left padding, the original padding value - by how much we have padded
		var width = o.width;
		var height = o.height;
		var left = o.left;
		var top = o.top;
		// alert(elTarget+", "+pictureMenu.lastTarget);
		switch (true) {
			case (pictureMenu.lastTarget==null): pictureMenu.delegate(elTarget, width, height, left, top);

				//fade background in
				screenAnim.stop();
				screenAnim.attributes = {opacity: {from: screen.opacity, to: .8}};
				screenAnim.animate();

				pictureMenu.lastTarget = elTarget;
				break;
			case pictureMenu.lastTarget!=null && pictureMenu.lastTarget==elTarget:
				width = elTarget.getAttribute('width0');
				height = elTarget.getAttribute('height0');
				left = elTarget.getAttribute('left0');
				top = elTarget.getAttribute('top0');
				pictureMenu.delegate(elTarget,width,height,left, top);
				pictureMenu.lastTarget = null;

				//fade background out
				screenAnim.stop();
				screenAnim.attributes = {opacity: {from: screen.opacity, to: 0}};
				screenAnim.animate();

				break;
			case (pictureMenu.lastTarget!=null && pictureMenu.lastTarget!=elTarget): 
			default: pictureMenu.delegate(elTarget, width, height, left, top);
				width = pictureMenu.lastTarget.getAttribute('width0');
				height = pictureMenu.lastTarget.getAttribute('height0');
				left = pictureMenu.lastTarget.getAttribute('left0');
				top = pictureMenu.lastTarget.getAttribute('top0');
				pictureMenu.delegate(pictureMenu.lastTarget,width,height,left, top);
				pictureMenu.lastTarget = elTarget;

				break;
			
		}
	},
	
	/**
	*	Mouse out handler
	*	@params e {Event} the event
	*	@params o {JSON} JSON data containing the width, height, and left values
	*/
	/*
	mouseOutHandler: function(e, o){
		// get the target
		var elTarget = YAHOO.util.Event.getTarget(e);
		//alert("out on " + elTarget.id);
		
		// calculate the left padding, the original padding value - by how much we have padded
		var width = o.width;
		var height = o.height;
		var left = o.left;
		
		// call the delegate method with the target and padding value
		pictureMenu.delegate(elTarget, width, height, left);
	},
	*/
	/**
	*	Cool things go here, like animation
	*	@params elTarget {Target} our target
	*	@params mwdith, meheight {Int} dimensions od final image
	*/
	delegate: function(elTarget, mwidth, mheight, mleft, mtop){
		
		//alert(mwidth+", "+mheight+", "+mleft);
		
	
		// if so then animate, set the attributes, in our case the left padding
		var attributes = {
			width: {
				"to": mwidth
			},
			height: {
				"to": mheight
			},
			left: {
				"to": mleft
			},
			top: {
				"to": mtop
			}
		};
		
		// create our animation
		var anim = new YAHOO.util.Anim(elTarget, attributes,0.4, YAHOO.util.Easing.easeOut);
		
		// then animate
		anim.animate();
	}

}

// init the whole thing here
YAHOO.util.Event.on(window, "load", function(){
	pictureMenu.init("picture");
});