(function(){
	var obj = { 
		alt_ui_interface:alt_ui_plain_interface, resize:alt_ui_plain_resize, config: plain_config
	};
	
	function alt_ui_plain_interface()
	{	
		var el = alt_ui_prep();
	
#	Setup structure using HTML	
		el.innerHTML='||html_begin()||\
			<div style="width:200px;height:64px;overflow-y:none;position:absolute; left:0px;top:0px;">
			 <div id="search_etc">
			 	<div id="alt_ui_settings" style=""><img src="||www_base||shared/img/altui_burger.png">
			 		<div style="position:absolute;left:80px;">
			 			<span style="font-size:130%;">'+email+'</span>
			 		  <br>
			 			<span style="font-size:110%;line-height:1.8;">
			 			  <a href="#" onclick="do_compose(\'\');" style="text-decoration:none">Compose</a>, &nbsp;&nbsp;&nbsp;
			 			  <a href="#" onclick="alert(\'unimplemented\');" style="text-decoration:none">Settings</a>, &nbsp;&nbsp;&nbsp;
			 			  <a href="#" onclick="std_ui();" style="text-decoration:none">Std UI</a>, &nbsp;&nbsp;&nbsp;
			 			  <a href="#" onclick="do_logout(\'\');" style="text-decoration:none">Logout</a>
			 			</span>
			 		</div>
			 	</div>
			 	<div id="alt_ui_search_box" style="">
			 		<img src="||www_base||shared/img/altui_search.png"><div id="alt_ui_search_hint" value="Search">Search</div><input id="alt_ui_search"">
			 	</div>
			 	<div id="alt_ui_actions" style=""><img src="||www_base||shared/img/altui_more.png">
			 		<div style="position:absolute;left:80px;font-size:130%;padding-top:14px;">
			 			<a href="#" onclick="do_reply()" style="text-decoration:none">Reply</a>, &nbsp;
			 			<a href="#" onclick="do_forward()" style="text-decoration:none">Fwd</a>, &nbsp;
			 			<a href="#" onclick="alert(\'unimplemented\')" style="text-decoration:none">more...</a>
			 		</div>
			 	</div>
			 	<div id="alt_ui_extra" style=""> <div id="alt_folder_toggle" class="folder_toggle">&nbsp;&lt;</div> The quick brown fox jumped
			 	</div>
			 </div>
			 
			</div>
			<div style="width:200px;height:300px;overflow-y:scroll;position:absolute; left:0px;top:100px; background:white;">
			 <div id="folders" style="background-color:white;"></div>
			</div>
			<div class="animated_pos" style="width:200px;height:300px;overflow-y:scroll;position:absolute; left:200px;top:300px; background:white;">
			 <div id="messages_list" style="background-color:white; ||iftrue(alt_scroll)||overflow-y:scroll;||endif||" 
					onmousedown="return msg_list_mousedown(event);" onmouseup="return msg_list_mouseup(event);" onclick="return msg_list_click(event);" ondblclick="msg_list_dblclick(event)" oncontextmenu="return false;"
					ontouchstart="touchStart(event);" ontouchmove="touchMove(event);" ontouchend="touchEnd(event);" ontouchcancel="touchCancel(event);" > </div>
			</div>
			<div style="width:200px;height:300px;overflow-y:scroll;position:absolute; left:500px;top:500px;">
			 <div id="message_preview" style="background-color:white;"></div>
			</div>
	
			<div class="alt_compose hidden" style="_width:600px;height:700px;overflow-y:scroll;position:absolute; left:550px;right:50px;top:300px;">
			 <div id="alt_util" style="background-color:red; width:100%; height:100%"></div>
			</div>
			
			<div class="alt_scrubber" style="width:5px;height:100%;position:absolute; left:500px;top:0px;cursor:col-resize;">
			 <div id="alt_scrubber_bar" style="width:2px;height:100%; border-right:1px solid #ddd;"></div>
			</div>
			
			||html_end()||';
	
			dge('messages_list').style.height='400px'; 
	
#	// Setup look using dynamic CSS
		assign_dynamic_css('alt_ui_styling', '||css_begin()||\
			#search_etc{
				background:white;
				height:64px;
			}
			#alt_ui_settings{
				width: 500px; height:44px;
				position:absolute; top:0; left:0;
				background:white;
				padding:10px; overflow:hidden;
			}
			#alt_ui_settings img{
				width:44px; height:44px;
				position:absolute; top:10px; left:10px;
			}
			#alt_ui_search_box{
				width:100%; height:64px;
				position:absolute; top:0; left:64px;
				border-left:1px solid #ccc; background:white;
				overflow:hidden;
			}
			#alt_ui_search_box img{
				width:44px; height:44px;
				position:absolute; top:10px; left:10px;
			}
			#alt_ui_search_box div{
				position:absolute; top:19px; left:64px;
				color:#ccc;
				font-size:200%;
			}
			#alt_ui_search_box input{
				position:absolute; top:18px; left:64px;
				border:none; outline:none; background:none;
				font-size:200%;
			}
			#alt_ui_actions{
				width: 500px; height:44px;
				position:absolute; top:0; left:440px;
				border-left:1px solid #ccc; background:white;
				padding:10px; overflow:hidden;
			}
			#alt_ui_actions img{
				width:44px; height:44px;
				position:absolute; top:10px; left:10px;
			}
			#alt_ui_extra{
				width: 600px; height:16px;
				position:absolute; top:64px; left:0px;
				border-top:1px solid #ccc;
				border-bottom:1px solid #ccc;
				padding:2px;overflow:hidden;
				background:#fff;
			}
			.folder_toggle{
				width:16px;height:16px; 
				border-right:1px solid #ccc;
				padding:2px;
			}
			.animated_resize {
				transition:all 0.3s ease-out;
			}
			.alt_scrubber{
				width:5px;height:100%;
				position:absolute; top:0px; left:500px;
				cursor:col-resize;
			}
			.alt_scrubber_bar{
				width:2px;height:100%; 
				border-right:1px solid #ddd;
			}
			.alt_compose{
				box-shadow: 0px 0px 20px #000;
#				border:2px solid blue;
			}
	
			#messages_list a{
				color:black;
			}
		||css_end()||');
		
#		// Setup behaviour using EVENTS
		el = dge('alt_ui_settings');
		el.onclick = function(e){
			alt_resize_menu(1);
		}
		el = dge("alt_ui_search_box"); 
		el.onclick=function(e){
			dge('alt_ui_search').focus();
			alt_resize_menu(2);
			stopBubble(e);
		}
		el = dge("alt_ui_search");
		el.onchange=function(e){
#			alert('changed');
		}
		el.onkeyup=function(e){
			stopBubble(e);
		}
		el.onkeydown=function(e){
			
			setTimeout(function(){
				update_hint(dge('alt_ui_search'),dge('alt_ui_search_hint'));
			},0);
			stopBubble(e);
		}
		el.onkeyup=function(e){
			search_keyup(e);
			stopBubble(e);
		}
		el = dge('alt_ui_actions');
		el.onclick = function(e){
			alt_resize_menu(3);
		}
	
		el = dge("alt_folder_toggle");
		el.onclick = function(e){
			var inner=dge('messages_list');
			var outer=inner.parentNode;
			if(outer.offsetLeft>0 && outer.old_left==U){
				outer.old_left = outer.offsetLeft;
				outer.old_width = outer.offsetWidth;
			}
			class_add(outer,'animated_resize');
			class_add(inner,'animated_resize');
			if(outer.offsetLeft>0){
				outer.style.left=0;
				outer.style.width = px(outer.old_left + outer.old_width);
				inner.style.width = px(outer.old_left + outer.old_width-17);
				dge('alt_folder_toggle').innerHTML='&nbsp;&gt;';
			}else{
				outer.style.left = px(outer.old_left);
				outer.style.width = px(outer.old_width);
				inner.style.width = px(outer.old_width-17);
				dge('alt_folder_toggle').innerHTML='&nbsp;&lt;';
			}
			clearTimeout(inner.timer);
			inner.timer = setTimeout(function(){
				class_remove(inner,"animated_resize");
				class_remove(outer,"animated_resize");
			}, 320);
		}
	}

	function alt_ui_plain_resize()
	{
		class_remove(dge("alt_ui_settings"),"animated_resize");
		class_remove(dge("alt_ui_search_box"),"animated_resize");
		class_remove(dge("alt_ui_actions"),"animated_resize");
		class_remove(dge("messages_list"),"animated_resize");
		class_remove(dge("messages_list").parentNode,"animated_resize");

		var pos = {left2:dge('messages_list').parentNode.offsetLeft, left3:dge('message_preview').parentNode.offsetLeft, search_height:64+22};

		var w = ClientWidth()-pos.left3;
		var h = ClientHeight();

		var msg_el = dge('message_preview');
		msg_el.parentNode.style.top = px(0);
		set_hw(msg_el,true,h,w,true);

		var lst_el = dge('messages_list');
		lst_el.parentNode.style.top = px(pos.search_height);
		set_hw(lst_el,true,h-pos.search_height,pos.left3-pos.left2,true);

		var lst_el = dge('folders');
		lst_el.parentNode.style.top = px(pos.search_height);
		set_hw(lst_el,true,h-pos.search_height,pos.left2,true);

		var lst_el = dge('search_etc');
		set_hw(lst_el,true,pos.search_height,pos.left3,false);	

	}
	function plain_config()
	{
		return 'No theme settings as yet';
	}
					
			
	newlook_register('plain', 'minimal alt1', obj, {alt:true});
})();
