GoldmanSachs.BubbleTout = new Class({
	options : {
		nav : {
			small: {
				height: 57,
				width: 180
			},
			large: {
				height: 120,
				width: 270
			}
		},			
		autoInterval: 10000,
		borderWidth: 6,
		disabledInterval: false,
		directLink: false
	},
	fx: {},
	interval: null,
	locked: false,
	container: null,
	
	initialize : function(options){
		this.setOptions(options);
		var self = this;
		
		this.links = $$("td.gs_bubble_nav a.bubbleBtn_link");	
		this.links.setStyles(self.options.nav.small);
		
		this.links.each(function(itm, index) {
			var nextDiv = itm.getNext('div.bubbleBtn_text');
			nextDiv.setStyle('display', 'block');
			nextDiv.origCoords = nextDiv.getCoordinates();
			nextDiv.setStyle('overflow', 'hidden');
			nextDiv.setStyle('width', 0);
			nextDiv.setStyle('height', 0);
			self.fx[itm.id] = new Fx.Elements([itm, nextDiv], {duration: 300, transition:Fx.Transitions.Quad.easeInOut});
			itm.setStyle("background-position", 0, 0);
			if(itm.hasClass("on")) {
				itm.setStyle("height", self.options.nav.small.height - (self.options.borderWidth * 2) + 2);
				itm.setStyle("width", self.options.nav.small.width - (self.options.borderWidth * 2));
			}
		});
		
		this.startInterval();
		
		// EVENTS
		if (!this.options.directLink)
			this.links.addEvent("click", this.clickButton.bind(this));
			
		this.links.addEvent('mouseenter', this.overButton.bind(this));
		this.links.getParent("div.bubbleBtn").addEvent('mouseleave', this.outButton.bind(this));
		
		this.container = $("gs_bubble_tout");
		this.container.addEvent('mouseenter', this.pauseInterval.bind(this));
		this.container.addEvent('mouseleave', this.startInterval.bind(this));
		
		this.greyBar = this.container.getElement("div.gs_bubble_greyBar");
		this.greyBar.setStyles({"opacity": .7, "display": "block"});
		this.links.setStyle("display", "block");
	},
	pauseInterval: function() {
		clearInterval(this.interval);
	},
	startInterval: function() {
		if(!this.options.disabledInterval) {
			var self = this;
			
			this.interval = setInterval(function(){ 
				var currentItm = self.container.getElement("a.on");
				
				var td = currentItm.getParent().getParent();
				var nextItm = null;
				
				if(td.getNext("td") == null) { 
					nextItm = self.container.getElement("div.bubbleBtn a.bubbleBtn_link");
				} else {
					nextItm = currentItm.getParent().getParent().getNext("td").getElement("a.bubbleBtn_link");	
				}
				currentItm.setStyles(self.options.nav.small);
				nextItm.setStyles({
					height: self.options.nav.small.height - (self.options.borderWidth * 2) + 2,
					width: self.options.nav.small.width - (self.options.borderWidth * 2) + 2
				});
				self.showTout(nextItm, 1);
				
			}, self.options.autoInterval);
		}
	},
	clickButton: function(event) {
		var e = new Event(event);
		e.stop();
		
		if(this.locked == false) {
			this.showTout($(e.target));
		}
	},
	overButton: function(event) { 
		var e = new Event(event);
		e.stop();
		//this.pauseInterval();
		this.expandButton($(e.target));
	},
	outButton: function(event) {
		var e = new Event(event);
		e.stop();
		this.pauseInterval();
		var target = $(e.target);
		if(target.hasClass("bubbleBtn")) {
			target = target.getElement("a.bubbleBtn_link");	
		} else {
			while (!target.hasClass('bubbleBtn'))
				target = target.parentNode;
				
			target = target.getElement("a.bubbleBtn_link");	
		}
		
		this.shrinkButton(target);
	},
	showTout: function(btn, auto){ 
		var self = this;
		self.locked = true;

		if(!btn.hasClass("on")) {
			var active = this.container.getElement("a.on");
			var wasActive = $(active.id + "-tout");
			
			if(active.id != btn.id) {		
				active.removeClass("on");
				wasActive.removeClass("on");
				wasActive.setStyle("z-index", 5);
				active.setStyles(this.options.nav.small);
				var activeFX = this.fx[active.id];
				activeFX.stop();
			}

			btn.addClass("on");
			
			$(btn.id + "-tout").setStyles({
				"z-index": 10,
				opacity: 0,
				left: 0
			});
			
			var fx = new Fx.Style($(btn.id + "-tout"), 'opacity', {duration: 500, transition:Fx.Transitions.Quad.easeInOut});
			
			var val = .99;
			if(window.ie) { val = 1 }
			fx.start(val).chain(function(){
				$(btn.id + "-tout").addClass("on");
				
				var isMac = navigator.platform.search("Mac");
				if(isMac != -1) {
					$(btn.id + "-tout").setStyle("opacity", 1);
				}
				
				wasActive.setStyles({"z-index": 2, "left": -10000});
				self.locked = false;
				
			});
		} else {
			self.locked = false;	
		}
		
	},
	hideTout: function() {
		
	},
	expandButton: function(btn) {
		var btn = btn;
		btn.setStyle("background-position", 0, 0);

		var id = btn.id;
		var fadeFX = this.fx[id];
		fadeFX.stop();

		var nextDiv = btn.getNext("div.bubbleBtn_text");
		nextDiv.setStyle('width', 0);
		nextDiv.setStyle('height', 0);
		nextDiv.setStyle("display", "block");
		
		var params = {
			height : this.options.nav.large.height,
			width : this.options.nav.large.width
		}
		
		if (btn.hasClass("on")) 
			params.height = params.height - (this.options.borderWidth * 2) + 2;
			
		var p = {
			'0' : params,
			'1' : {
				width : params.width,
				height : nextDiv.origCoords.height
			}
		}			
			
		fadeFX.start(p);
	},
	shrinkButton : function (btn) {
		if (btn == null) return;
		
		var btn = btn;		
		var id = btn.id;
		var fadeFX = this.fx[id];
		
		if (fadeFX == null)
			return;
		
		fadeFX.stop();
		
		var self = this;
		setTimeout(function() {
			var params = self.options.nav.small;
			if(btn.hasClass("on")) {
				params = {
					height: self.options.nav.small.height - (self.options.borderWidth * 2) + 2,
					width: self.options.nav.small.width - (self.options.borderWidth * 2) + 2
				}
			} 
			var p = {
				'0' : params,
				'1' : {
					width: 0,
					height: 0
				}
			}
			fadeFX.start(p);
		}, 300);
	}
});
GoldmanSachs.BubbleTout.implement(new Options);