var buttonObject = function(el, color, title, anch) {
	this.el = el;
	this.color = color;
	this.title = title;
	this.anch = anch;
	this.setClickEvent = function(fn) {
		this.fn = fn;
		YAHOO.util.Event.addListener(this.el, 'click', fn, this);
	};
	this.removeClickEvent = function () {
		YAHOO.util.Event.removeListener(this.el, 'click', this.fn);
	};
}

var Floating_Box_Widget = function(arrBtns) {
	var attrToBig = {
		bigBoxDimensions : {
			width: {to : 370},
			height: {to : 188},
			top: {to : 15},
			left: {to : 20}
		},
		bigBoxNav : {
			fontSize : {to: 85, unit: '%'},
			opacity : { to : 1 }
		},
		bigBoxBack : { 
			backgroundColor : {to : '#FFF' }
		}
	};
	var arrPositions = [
		{
			top: {to : 82},
			left: {to : 435}
		},
		{
			top: {to : 15},
			left: {to : 530}
		},
		{
			top: {to : 15},
			left: {to : 625}
		},
		{
			top: {to : 82},
			left: {to : 530}
		},
		{
			top: {to : 82},
			left: {to : 625}
		},
		{
			top: {to : 149},
			left: {to : 435}
		},
		{
			top: {to : 149},
			left: {to : 530}
		},
		{
			top: {to : 149},
			left: {to : 625}
		}
		
	];	
	var attrToSmall = {
		smallBox : {
			width: { to : 85 },
			height: { to : 57 }
		},
		smallHeading : {
			paddingTop: { to : 39 },
			fontSize : {to: 85, unit: '%'}
		},
		smallNav : {
			fontSize : {to: 5, unit: '%'},
			opacity : { to : 0 }
		}
	};
	
	var animationTime = .6;
	
	var reArrangeBoxes = function(e, btnObj) {
		var animations = new Array();
		var chainedFunctions = new Array();
		
		
		for (var x = 0; x < arrBtns.length; x++) {
			if (arrBtns[x] === btnObj) {
				var anchorLink = btnObj.el.getElementsByTagName('a')[0];
				var slidingDiv = makeSlidingDiv(btnObj);
				var navpromo = YAHOO.util.Dom.getElementsByClassName('navpromo', 'div', btnObj.el)[0];
				var navlist = YAHOO.util.Dom.getElementsByClassName('navlist', 'div', btnObj.el)[0];
				
				YAHOO.util.Dom.setStyle(anchorLink, 'display', 'none');
				YAHOO.util.Dom.insertAfter(slidingDiv, anchorLink);
				YAHOO.util.Dom.setStyle(navpromo, 'display', 'inline');
				YAHOO.util.Dom.setStyle(navlist, 'display', 'inline');
				
				var tempAnim = new YAHOO.util.Anim(btnObj.el, attrToBig.bigBoxDimensions, animationTime, YAHOO.util.Easing.easeIn); 
				animations.push(new YAHOO.util.ColorAnim(btnObj.el, attrToBig.bigBoxBack, animationTime));
				animations.push(new YAHOO.util.Anim(navpromo, attrToBig.bigBoxNav, animationTime, YAHOO.util.Easing.easeIn)); 
				animations.push(new YAHOO.util.Anim(navlist, attrToBig.bigBoxNav, animationTime, YAHOO.util.Easing.easeIn));
				animations.push(tempAnim);
				chainedTitle = new YAHOO.util.Anim(slidingDiv, {left : {to : 0 }}, .1, YAHOO.util.Easing.easeOut); 
				
				tempAnim.onComplete.subscribe(function () {
					chainedTitle.animate();		
				});
				YAHOO.util.Event.purgeElement(btnObj.el, false);
			} else {
				var anchorLink = YAHOO.util.Dom.getElementsByClassName('title', 'a', arrBtns[x].el)[0];
				var navpromo = YAHOO.util.Dom.getElementsByClassName('navpromo', 'div', arrBtns[x].el)[0];
				var navlist = YAHOO.util.Dom.getElementsByClassName('navlist', 'div', arrBtns[x].el)[0];
				var slidingDivs = YAHOO.util.Dom.getElementsByClassName('activeselect', 'a', arrBtns[x].el);
				
				animations.push(new YAHOO.util.Anim(arrBtns[x].el, arrPositions[x], animationTime));
				animations.push(new YAHOO.util.Anim(arrBtns[x].el, attrToSmall.smallBox, animationTime));
				if (slidingDivs.length > 0 ) {
					animations.push(new YAHOO.util.Anim(navlist, attrToSmall.smallNav, animationTime));
					animations.push(new YAHOO.util.Anim(navpromo, attrToSmall.smallNav, animationTime));
					animations.push(new YAHOO.util.ColorAnim(arrBtns[x].el, {backgroundColor : {to : arrBtns[x].color}}, animationTime));
				}
				if (YAHOO.util.Dom.getStyle(anchorLink, 'paddingTop') == '56px' || YAHOO.util.Dom.getStyle(anchorLink, 'paddingTop') == '0px')				
					animations.push(new YAHOO.util.Anim(anchorLink, attrToSmall.smallHeading, animationTime));
				
				
				YAHOO.util.Event.purgeElement(arrBtns[x].el, false);
				arrBtns[x].setClickEvent(reArrangeBoxes);
			}
		}
		
		for (var x = 0; x < animations.length; x++) {
			animations[x].animate();
		}
		
		for (var x = 0; x < arrBtns.length; x++) {
			var slidingDivs = YAHOO.util.Dom.getElementsByClassName('activeselect', 'a', arrBtns[x].el);
			
			if (slidingDivs.length > 0 && arrBtns[x] !== btnObj) {
				var navpromo = YAHOO.util.Dom.getElementsByClassName('navpromo', 'div', arrBtns[x].el)[0];
				var anchorLink = YAHOO.util.Dom.getElementsByClassName('title', 'a', arrBtns[x].el)[0];
				var navlist = YAHOO.util.Dom.getElementsByClassName('navlist', 'div', arrBtns[x].el)[0];
				
				arrBtns[x].el.removeChild(slidingDivs[0]);
			
				YAHOO.util.Dom.setStyle(navpromo, 'display', 'none');
				YAHOO.util.Dom.setStyle(navlist, 'display', 'none');
				YAHOO.util.Dom.setStyle(anchorLink, 'display', '');
			}
		}
		
	};
	var makeSlidingDiv = function(btnObj) {
		var temporaryAnchor = document.createElement('a');
		temporaryAnchor.href = btnObj.anch;
		temporaryAnchor.appendChild(document.createTextNode(btnObj.title));
		YAHOO.util.Dom.setStyle(temporaryAnchor, 'backgroundColor', btnObj.color);
		
		temporaryAnchor.className = 'activeselect';
		
		return temporaryAnchor;
	}
	
	var setBtnEvents = new function() {
		for (var x = 0; x < arrBtns.length; x++ ) {
			arrBtns[x].setClickEvent(reArrangeBoxes);
		}
	}
};
YAHOO.util.Event.onDOMReady(function(){
	//Button Objects
	

	var arrBtns = new function() {
		var tempArr = new Array();
		for (x = 0; x < 8; x++) {
			var button = YAHOO.util.Dom.get('button' + (x+1));	
			var color = YAHOO.util.Dom.getStyle(button, 'backgroundColor');
			var anch = button.getElementsByTagName('a')[0];
			var title = anch.firstChild.nodeValue;
			tempArr.push(new buttonObject(button, color, title, anch.href));
			anch.href = "#";
		}
		return tempArr;
	};
	
	var fbw = new Floating_Box_Widget(arrBtns);

});