var sideBar = 
{
	openBtn: null,
	delay: 0.5,
	
	init: function(weatherLink)
	{
		this.weatherLink = weatherLink;
		this.container = $$('#makoSideBar dl')[0];
		
		var $$buttons = this.container.select('dt');		
		
		this.$newBtn = this.$btn = null;
		
		/* add open capability to tab headers */
		$$buttons.each(function($btn)
		{
			var $content = $btn.next('dd');
			
			if(!$content || !$btn.next() || $content!= $btn.next()) return;
			
			$btn.observe('click', function()
						{
							this.toggle($btn);
						}.bind(this));		
						
			var $UL = $content.select('ul')[0];
			if(!$UL.hasClassName('JSON'))		
			{
				$content._height = $UL.getDimensions().height;
			}
			
			/* add close functionality*/
			$content.select('a.close')[0].observe('click', function()
			{
				this.toggle($btn);
			}.bind(this));			
			
			$content.hide();
			
			/* add hover FX to regular list*/
			var $LIs = $content.select('ul.managed li');
			
			$LIs.each(function($li)
			{
				$li.observe('mouseenter', function()
							{
								this.addClassName('selected');
							}.bind($li));
										
				$li.observe('mouseleave', function()
							{
								this.removeClassName('selected');
							}.bind($li));														
			});

		}.bind(this));
		
		
		// add submit button special behaviour
		var $$submit = this.container.select('dd ul li a.submit');
		
		$$submit.each(function($elm)
		{
			$elm.observe('click', this._submit);
		}.bind(this));
		
		var $textInputs = this.container.select('input[type=text]');
		
		$textInputs.each(function($elm)
		{	
			$elm.observe('keypress', function(e)
			{
				if(e.keyCode == Event.KEY_RETURN)
				{					
					this._submit(e);
				}				
			}.bind(this));
		}.bind(this));
	},
	
	close: function()
	{
		
		/* Nothing to close.. */
		if(!this.$btn)
		{
			return this.open();
		}
		
		var collapseButton = new Tween(this.$btn.style, 'height', Tween.regularEaseIn, 27, 24, this.delay-0.1, 'px');			
		
		var collapseContent = new Tween(this.$content.style, 'height', Tween.regularEaseIn, this.$content._height+30, 1, this.delay-0.1, 'px');
		var fadeOutContent = new OpacityTween(this.$content, Tween.None, 100, 0,  this.delay-0.1);
		
		var pHideContent = new Parallel();
		pHideContent.addChild(collapseButton);
		pHideContent.addChild(collapseContent);
		pHideContent.addChild(fadeOutContent);	

		pHideContent.onMotionStarted = function()			
		{	
			//this.$btn.removeClassName('open');					
		}.bind(this);
		pHideContent.onMotionFinished = function()
		{
			this.$btn.removeClassName('open');
			this.$content.hide();
			if(this.$btn != this.$newBtn)
			{
				this.open();
			} 
			else
			{
				this.$btn = null;
			}
			
		}.bind(this);
					
		pHideContent.start();		
	},
	
	open: function()
	{
		/*close previous*/		
		/** if it's closed open it*/
		$content = this.$newBtn.next('dd');
		// check if ajax required
		
		$UL = $content.select('ul')[0];
		
		if($UL.hasClassName('JSON'))
		{
			return this.getContent($UL, $content.className);
		}
		else if(!$content._height)
		 {
		 	$content.show();
			$content._height = $UL.getDimensions().height;
		 }
		
		var expandContent = new Tween($content.style, 'height', Tween.regularEaseOut, 1, $content._height+30, this.delay-0.1, 'px');
		
		
		var fadeInContent = new OpacityTween($content, Tween.None, 0, 100,  this.delay);
		var expandButton = new Tween(this.$newBtn.style, 'height', Tween.regularEaseIn, 25, 28, this.delay-0.1, 'px');
		
		var pShowContent = new Parallel();
		pShowContent.addChild(expandButton);
		pShowContent.addChild(expandContent);
		pShowContent.addChild(fadeInContent);	
		pShowContent.onMotionStarted = function()
		{
			this.$btn.addClassName('open');
			this.$content.show();
		}.bind(this);
		
		pShowContent.onMotionFinished = function()
		{
			var $textInput = this.$content.select('input[type=text]')[0];
			
			if($textInput) $textInput.focus();
		}.bind(this);						
		

		this.$btn = this.$newBtn;
		this.$content = $content;

		pShowContent.start();		
	},
	
	toggle: function($btn)
	{
		$btn.blur();
		this.$newBtn = $btn;
		this.close();
	}, 
	
	_submit: function(e)
	{
		Event.stop(e);
		var $elm = Event.element(e);
		var $upUL = $elm.up('UL');
				
		var $Txt,$Btn;
		$Txt = $Btn = $elm;

		if(!$Txt.hasClassName('text'))
		{
			$Txt = $upUL.select('input[type=text]')[0];
		}
		
		if(!$Btn.hasClassName('submit'))
		{
			$Btn = $upUL.select('a.submit')[0];
		}
		
		var _val = $F($Txt);
		
		if(_val && _val!='')
		{
			var newHref = $Btn.href + encodeURIComponent(_val);;
			
			if ($Btn.readAttribute('target')=='_blank') 
			{
				var newWindow = window.open(newHref, '_blank');
				newWindow.focus();
			}
			else 
			{
				window.location.href = newHref;
			}
		}	
	},
	
	getContent: function($UL, JSONcase)
	{
		
		$UL.removeClassName('JSON');
		
		var serviceUrl = $UL.select('li.link')[0].innerHTML;
		serviceUrl = serviceUrl.replace('<!--','').replace('-->','');
		
		$UL.JSONcase = JSONcase;
		
		this.JSONtarget = $UL;
		
		var oAJAX = new Ajax.Request(serviceUrl, 
		{
			onSuccess: this.processJSON.bind(this),
			onFailure: function()
			{
			},
			method: 'get'
		});
			
	}, 
	
	processJSON: function(xhr)
	{
		var UL = this.JSONtarget;
		
		var JSONcase = UL.JSONcase;
		
		
		var template = '';
		
		var data = xhr.responseText.evalJSON();
		
		if(JSONcase=='weather')
		{
			try 
			{
				var data = xhr.responseText.evalJSON()
								
				var _date = data.Date[0]['@date'];
				
				var template = '<li class=\"label\">#{sdate}</li>';
				
				// inner html
				UL.update(template.interpolate({sdate:_date}));

				cities = data.Date[0]['City'];
								
				template = '<li class="weather #{imgCase}">#{city}<br/>#{day}&deg;-#{night}&deg;</li>'
				
				_className = ' sep';
				
				var citiesArr = ',Haifa,Tel Aviv,Jerusalem,Tiberias,Beer Sheba,Eilat,';
				
				for (i = 0; cities[i];i++) 
				{
					if( citiesArr.indexOf(cities[i]['@EnName'])==-1) continue;
					
					var _imgCase = cities[i]['@name'];
					var _city = cities[i]['@name'];
					var _day = cities[i]['@day'];
					var _night = cities[i]['@night'];
					var _imgCase = this.weatherMap[cities[i]['@status']];
										
					// append
					UL.insert(template.interpolate(
					{
						imgCase: _imgCase+_className,
						city: _city,
						day: _day,
						night: _night
					}));
					
					_className = '';
					
					
				}// end for
				

				UL.insert('<li class="sep"><a target="_blank" href="'+this.weatherLink+'">לתחזית המלאה</a></li>');
				
			}
			catch (err) 
			{ 
				return; 
			}
		}// end if 
		else if(JSONcase=='exchange' || JSONcase=='stocks')
		{
			template = '<li class="label">#{date}<br/>#{time}</li>';
			
			UL.update(template.interpolate({date:data.date,time:data.time}));
			
			template = '<li class="sep #{dir}"><strong>#{name}</strong>#{value}<br/>#{diff}</li>';
			
			var rates = data.rates;
			
			for (i = 0; rates[i]; i++) 
			{				
				var _name = this.nameMap[rates[i].name];
				if( !_name) continue;
				
				var _value = rates[i].value;
				var _up = rates[i].up;
				var _down = rates[i].down;
				
				var _diff,_dir;
				if(_up!='')
				{
					_diff = _up;
					_dir = 'up';
				}
				else
				{
					_diff = _down;
					_dir = 'down';
				}
				
				_diff = parseInt(_diff*100)/100 + '%';
				
				UL.insert(template.interpolate({dir:_dir, name:_name,value:_value,diff: _diff}));
			}			
		
		}		
		else if(JSONcase=='stocks')
		{
			
		}
		
		this.open();
			 
	}, 
		
	weatherMap: 
	{
		'שמ':'clear',
		'גש':'rainy',
		'גמ':'local_rain',
		'שר':'havil',
		'מח':'partly_clouded',
		'מע':'cloudy',
		'מט':'mimtarim',
		'של':'snow',
		'סר':'storm'
	}, 
	
	nameMap:
	{
		'EUR': 'אירו יציג',
		'USD': 'דולר יציג',
		'TelAviv100': 'ת&#34;א 100',
		'TelAviv25': 'ת&#34;א 25',
		'TelTeck': 'תל-טק',
		'Nasdaq': 'נסד&#34;ק'
	} 

}