Fx.Opacity = Fx.Style.extend({initialize: function(el, options){this.now = 1;this.parent(el, 'opacity', options);},toggle: function(){return (this.now > 0) ? this.start(1, 0) : this.start(0, 1);},show: function(){return this.set(1);}});

window.addEvent("load",function(){
	$ES(".gks_main").each(function(el,i){
		var module_id = el.getProperty("id");
		var wrapper = el;
		var triggers = $ES('.gks_trigger',wrapper);
		var links = $ES('.gks_stock_name',wrapper);
		var links_wrap = $ES('.gks_stock',wrapper);
		var tooltip_data = $ES('.gks_tooltip_stock',wrapper);
		if(tooltip_data.length > 0){
			var tooltip = new Element("div",{"class":"gks_tooltip"});
			tooltip.injectInside($(document.body));
			tooltip.setStyle("display","block");
			var tooltipFX = new Fx.Opacity(tooltip,{duration:250,wait:false});
			tooltipFX.set(0);
		}
		var active = [];
		if($E('.first',wrapper)) active[0] = $E('.first',wrapper).getProperty("title");
		if($E('.second',wrapper)) active[1] = $E('.second',wrapper).getProperty("title");
		if($E('.third',wrapper)) active[2] = $E('.third',wrapper).getProperty("title");
		if($E('.fourth',wrapper)) active[3] = $E('.fourth',wrapper).getProperty("title");
		var counter_max = active.length;
		var counter = 0;
		
		if(tooltip_data.length > 0){
			links.each(function(elmt,j){
				elmt.addEvent("mouseenter",function(e){
					var evt = new Event(e);
					tooltip.setStyles({
						"top" : (evt.page.y-10)+"px",
						"left" : (evt.page.x-562)+"px"
					});
					tooltip.innerHTML = tooltip_data[j].innerHTML;
					tooltipFX.start(1);
				});
				elmt.addEvent("mouseleave",function(){
					tooltipFX.start(0);
				});
			});
			
			links_wrap.each(function(elmt,j){
				elmt.addEvent("mouseover",function(e){
					var evt = new Event(e);
					if(evt.target != links[j]){
						tooltipFX.start(0);
					}
				});
			});
		}
		triggers.each(function(elmt,j){
			elmt.addEvent("click", function(){
				if(
					elmt != $E('.first',wrapper) && 
					elmt != $E('.second',wrapper) &&
					elmt != $E('.third',wrapper) &&
					elmt != $E('.fourth',wrapper)
				){
					switch(counter)
					{
						case 0:
							$E('.first',wrapper).toggleClass('first');
							elmt.toggleClass('first');
							active[0] = elmt.getProperty("title"); 
						break;
						case 1:
							$E('.second',wrapper).toggleClass('second');
							elmt.toggleClass('second');
							active[1] = elmt.getProperty("title"); 
						break;
						case 2:
							$E('.third',wrapper).toggleClass('third');
							elmt.toggleClass('third');
							active[2] = elmt.getProperty("title"); 
						break;
						case 3:
							$E('.fourth',wrapper).toggleClass('fourth');
							elmt.toggleClass('fourth');
							active[3] = elmt.getProperty("title"); 
						break;
					}
					
					counter = (counter + 1 < counter_max) ? counter + 1 : 0;
					
					
					var oldImg = $E('.gks_img',wrapper);
					var newImg = new Asset.image('http://www.google.com/finance/chart?cht=c&q='+active.join(',')+'&nc='+$random(10000,99999), {"class": 'gks_img', onload: function(){
						new Fx.Opacity($E('.gks_img',wrapper),{duration:350,wait:true}).start(0);
						(function(){
							newImg.setOpacity(0);
							newImg.injectBefore(oldImg);
							new Fx.Opacity(newImg,{duration:350,wait:true}).start(1);								
						}).delay(350);
						(function(){oldImg.setStyle("display","none");}).delay(700);			
					}
					});					
				}
			});
		});
	});
});