(function() {

	var Y = YAHOO,
    	Dom = Y.util.Dom,
		Event = Y.util.Event;

	/*
	** onAvailable
	*/

	
	Event.onContentReady('we-recommend', function(){
		//alert('onAvailable #we-recommend');
		var tvWeRecommend = new YAHOO.widget.TabView("we-recommend");
		if (tvWeRecommend) {
			tvWeRecommend.addListener('click', function(){this.myNextTabInterval=0;})
			window.setTimeout(function(){tvWeRecommend.myNextTab();}, tvWeRecommend.myNextTabInterval);
		}
	});
	
	Event.onContentReady('channels', function(){
		//alert('onAvailable #channels');
		var tvChannels = new YAHOO.widget.TabView("channels");
		if (tvChannels) {
			tvChannels.addListener('click', function(){this.myNextTabInterval=0;})
			window.setTimeout(function(){tvChannels.myNextTab();}, tvChannels.myNextTabInterval);
		}
	});
	
	/*
	** onDOMReady
	*/

	Event.onDOMReady(function(){

		//alert('onDOMReady');
		

		/*
		** DIALOGS
		*/
		
		var cfgDialogs = { 
			close:true,
			visible:false,
			fixedcenter:true,  
			zindex:4000, 
			modal:true
		}

		var onSelectedMenuItemChange = function (event) {
			var oMenuItem = event.newValue;
			this.set("label", ("<span class=\"yui-button-label\">" + oMenuItem.cfg.getProperty("text") + "</span>"));
		};
		
		// unit converter
		
		var pUtilsUnitConv = new YAHOO.widget.Panel("diag-unit-converter", cfgDialogs);

		pUtilsUnitConv.setBody(
			'<form action="" name="converter" summary="converter" onsubmit="enter(); return false;">'
			+'	<h1>Unit Converter</h1>'
			+'	<div class="convert-select">'
			+'		<div id="diag-unit-converter-type">'
			+'			<select id="type" class="type" onchange="newType()" selected="temperature">'
			+'				<option id="temperature">Temperature</option>'
			+'				<option id="length">Length</option>'
			+'				<option id="area">Area</option>'
			+'				<option id="volume">Volume</option>'
			+'				<option id="time">Time</option>'
			+'				<option id="speed">Speed</option>'
			+'				<option id="mass">Mass</option>'
			+'				<option id="power">Power</option>'
			+'				<option id="energy">Energy</option>'
			+'				<option id="pressure">Pressure</option>'
			+'			</select>'
			+'		</div>'
			+'	</div>'
			+'	<div class="convert-from">'
			+'		<div id="diag-unit-converter-type">'
			+'			<select id="base" class="base" onchange="newBase()">'
			+'			</select>'
			+'		</div>'
			+'		<div style="">'
			+'			<input id="value" class="text"  onkeyup="newValue()" />'
			+'		</div>'
			+'	</div>'
			+'	<div class="convert-to">'
			+'		<div id="diag-unit-converter-to">'
			+'			<select id="target" class="target" onchange="newTarget()">'
			+'			</select>'
			+'		</div>'
			+'		<div style="">'
			+'			<input id="result" class="text" readonly="readonly" />'
			+'		</div>'
			+'	</div>'
			+'</form>'
			);
		pUtilsUnitConv.renderEvent.subscribe(function(){
/*
			// type
			var mbType = new Y.widget.Button({
				id: "type",
				name: "type",
				menu: "type",
				container: "diag-unit-converter-type",
				label: "<em class=\"yui-button-label\">Select</em>",
				type: "menu",
				lazyloadmenu: false
			});
			mbType.on("selectedMenuItemChange", onSelectedMenuItemChange);
			// base
			var mbBase = new Y.widget.Button({
				id: "base",
				name: "base",
				menu: "base",
				container: "diag-unit-converter-from",
				label: "<em class=\"yui-button-label\">Select</em>",
				type: "menu",
				lazyloadmenu: false
			});
			mbBase.on("selectedMenuItemChange", onSelectedMenuItemChange);
			// target
			var mbTarget = new Y.widget.Button({
				id: "target",
				name: "target",
				menu: "target",
				container: "diag-unit-converter-to",
				label: "<em class=\"yui-button-label\">Select</em>",
				type: "menu",
				lazyloadmenu: false
			});
			mbTarget.on("selectedMenuItemChange", onSelectedMenuItemChange);
*/
		});
		pUtilsUnitConv.render();
		
		initialize(); // unit converter init function

		// currency converter

		var pUtilsCurrencyConv = new YAHOO.widget.Panel("diag-currency-converter", cfgDialogs);
		pUtilsCurrencyConv.setBody(
			'<form action="" id="diag-currency-converter-container">'
			+'	<h1>Currency converter</h1>'
			+'	<div class="convert-from">'
			+'		<div id="diag-currency-converter-from">'
			+'			<select id="diag-currency-converter-base" class="base">'
			+'				<option value="1">One</option>'
			+'				<option value="2">Two</option>'
			+'				<option value="3">Three</option>'
			+'				<option value="4">Four</option>'
			+'			</select>'
			+'		</div>'
			+'		<div class="input">'
			+'			<input id="diag-currency-converter-base" name="base_val" class="text"  />'
			+'		</div>'
			+'	</div>'
			+'	<div class="convert-to">'
			+'		<div id="diag-currency-converter-to">'
			+'			<select id="diag-currency-converter-target" class="target">'
			+'				<option value="1">One</option>'
			+'				<option value="2">Two</option>'
			+'				<option value="3">Three</option>'
			+'				<option value="4">Four</option>'
			+'			</select>'
			+'		</div>'
			+'		<div class="input">'
			+'			<input id="diag-currency-converter-target" name="target_val" class="text" />'
			+'		</div>'
			+'	</div>'
			+'</form>'
			);
		pUtilsCurrencyConv.renderEvent.subscribe(function(){
			// base
			var mbBase = new Y.widget.Button({
				id: "diag-currency-converter-base",
				name: "diag-currency-converter-base",
				menu: "diag-currency-converter-base",
				container: "diag-currency-converter-from",
				label: "<em class=\"yui-button-label\">Select</em>",
				type: "menu",
				lazyloadmenu: false
			});
			mbBase.on("selectedMenuItemChange", onSelectedMenuItemChange);
			// target
			var mbTarget = new Y.widget.Button({
				id: "diag-currency-converter-target",
				name: "diag-currency-converter-target",
				menu: "diag-currency-converter-target",
				container: "diag-currency-converter-to",
				label: "<em class=\"yui-button-label\">Select</em>",
				type: "menu",
				lazyloadmenu: false
			});
			mbTarget.on("selectedMenuItemChange", onSelectedMenuItemChange);
		});
		pUtilsCurrencyConv.render();
		
		// timezone converter

		var pUtilsTimeZoneConv = new YAHOO.widget.Panel("diag-timezone-converter", cfgDialogs);
		pUtilsTimeZoneConv.setBody(
			'<form action="" name="converter" summary="converter" onsubmit="return false;">'
			+'	<h1>Time Zone Converter</h1>'
			+'	<div class="convert-from">'
			+'		<div id="diag-timezone-converter-from">'
			+'			<select id="diag-timezone-converter-base" class="base">'
			+'				<option value="1">One</option>'
			+'				<option value="2">Two</option>'
			+'				<option value="3">Three</option>'
			+'				<option value="4">Four</option>'
			+'			</select>'
			+'		</div>'
			+'		<div class="input">'
			+'			<textarea rows="2" id="diag-timezone-converter-base" name="base_val" class="text"></textarea>'
			+'		</div>'
			+'	</div>'
			+'	<div class="convert-to">'
			+'		<div id="diag-timezone-converter-to">'
			+'			<select id="diag-timezone-converter-target" class="target">'
			+'				<option value="1">One</option>'
			+'				<option value="2">Two</option>'
			+'				<option value="3">Three</option>'
			+'				<option value="4">Four</option>'
			+'			</select>'
			+'		</div>'
			+'		<div class="input">'
			+'			<textarea rows="2" id="diag-timezone-converter-target" name="target_val" class="text"></textarea>'
			+'		</div>'
			+'	</div>'
			+'</form>'
			);
		pUtilsTimeZoneConv.renderEvent.subscribe(function(){
			// base
			var mbBase = new Y.widget.Button({
				id: "diag-timezone-converter-base",
				name: "diag-timezone-converter-base",
				menu: "diag-timezone-converter-base",
				container: "diag-timezone-converter-from",
				label: "<em class=\"yui-button-label\">Select</em>",
				type: "menu",
				lazyloadmenu: false
			});
			mbBase.on("selectedMenuItemChange", onSelectedMenuItemChange);
			// target
			var mbTarget = new Y.widget.Button({
				id: "diag-timezone-converter-target",
				name: "diag-timezone-converter-target",
				menu: "diag-timezone-converter-target",
				container: "diag-timezone-converter-to",
				label: "<em class=\"yui-button-label\">Select</em>",
				type: "menu",
				lazyloadmenu: false
			});
			mbTarget.on("selectedMenuItemChange", onSelectedMenuItemChange);
		});
		pUtilsTimeZoneConv.render();
		
		// weather

		var pUtilsWeather = new YAHOO.widget.Panel("diag-weather", cfgDialogs);
		pUtilsWeather.setBody(
			'<form action="" name="frm-weather">'
			+'	<h1>Weather in SA cities</h1>'
			+'	<div class="menu">'
			+'		<div id="diag-weather-menu-container">'
			+'			<select id="diag-weather-menu" class="base">'
			+'				<option value="1">One</option>'
			+'				<option value="2">Two</option>'
			+'				<option value="3">Three</option>'
			+'				<option value="4">Four</option>'
			+'			</select>'
			+'		</div>'
			+'		<div style="">'
			+'			<input type="submit" value="GO" />'
			+'		</div>'
			+'	</div>'
			+'	<div class="detail">'
			+'		<h2><span>Cape Town</span> - Monday, 25 May 2009 18:59:20</h2>'
			+'		<dl>'
			+'			<dt>Min</dt>'
			+'			<dd>19&deg;C</dd>'
			+'			<dt>Max</dt>'
			+'			<dd>24&deg;C</dd>'
			+'			<dt>Sunrise</dt>'
			+'			<dd>06:28</dd>'
			+'			<dt>Sunset</dt>'
			+'			<dd>18:45</dd>'
			+'			<dt>Moonrise</dt>'
			+'			<dd>19:47</dd>'
			+'			<dt>Moonset</dt>'
			+'			<dd>06:35</dd>'
			+'			<dt>Moonphase</dt>'
			+'			<dd>Full Moon</dd>'
			+'			<dt>Wind</dt>'
			+'			<dd>N at 10km/h</dd>'
			+'			<dt>Humidity</dt>'
			+'			<dd>83%</dd>'
			+'		</dl>'
			+'		<div class="more">'
			+'			<span class="icon"></span>'
			+'			<span class="temp">20&deg;C</span>'
			+'			<span class="name">Partly cloudy</span>'
			+'			<span class="feels">Feels Like</span>'
			+'			<span class="feels-temp">23&deg;C</span>'
			+'		</div>'
			+'  	<p><a href="#">See forecast for the week</a></p>'
			+'	</div>'
			+'</form>'
			);
		pUtilsWeather.renderEvent.subscribe(function(){
			// menu
			var mbMenu = new Y.widget.Button({
				id: "diag-weather-menu",
				name: "diag-weather-menu",
				menu: "diag-weather-menu",
				container: "diag-weather-menu-container",
				label: "<em class=\"yui-button-label\">Select</em>",
				type: "menu",
				lazyloadmenu: false
			});
			mbMenu.on("selectedMenuItemChange", onSelectedMenuItemChange);
		});
		pUtilsWeather.render();
		
		// on click events

		Event.addListener(Dom.get('utils-unit-conv'), 'click', function(e){
			// beforeShow
			//alert('beforeShow');
			
			Event.stopEvent(e);
			
			// show
			pUtilsUnitConv.show();
			
			// afterShow
			//alert('afterShow');
		});

		Event.addListener(Dom.get('utils-currency-conv'), 'click', function(e){
			// beforeShow
			//alert('beforeShow');

			Event.stopEvent(e);
			
			// show
			pUtilsCurrencyConv.show();
			
			// afterShow
			//alert('afterShow');
		});

		Event.addListener(Dom.get('utils-timezone-conv'), 'click', function(e){
			// beforeShow
			//alert('beforeShow');

			Event.stopEvent(e);
			
			// show
			pUtilsTimeZoneConv.show();
			
			// afterShow
			//alert('afterShow');
		});

		Event.addListener(Dom.get('utils-weather'), 'click', function(e){

			// beforeShow
			//alert('beforeShow');

			Event.stopEvent(e);

			var oDiv = Dom.get('diag-weather');
			Dom.removeClass(oDiv, 'weather-mode2');
			Dom.addClass(oDiv, 'weather-mode1');
			var oForm = Dom.getElementsBy(function(){return true;}, 'form', oDiv);
			
			Event.addListener(oForm, 'submit', function(e){
				// before submit
				//alert('beforeSubmit');
				
				var oDiv = Dom.getAncestorByClassName(this, 'weather-mode1');
			
				Dom.addClass(oDiv, 'weather-mode2');
				Dom.removeClass(oDiv, 'weather-mode1');
				
				Event.stopEvent(e);
				// afterSubmit
				//alert('afterSubmit');
			});
			
			// show
			pUtilsWeather.show();
			
			// afterShow
			//alert('afterShow');
		});
	});
})();