# Surgeweb newlook module that implements the newlook "responsive" look targeting any screensize using responsive design techniques

(function(){
	var obj = { 
		alt_ui_interface:alt_ui_touch_interface, resize:alt_ui_touch_resize,
		config: plain_config
	};

# mobile / ios altui implementation
	function alt_ui_touch_interface()	//cf alt_ui_plain_interface
	{

		el = alt_ui_prep();	
		el.innerHTML='||html_begin()||\
			<div id="v1" class="mview">
			</div>
			<div id="v2" class="mview">
			</div>
			<div id="v3" class="mview">
			</div>
			||html_end()||';

		assign_dynamic_css('newlook_altui_css', '||css_begin()||\
	
||iftrue(left_panel_vert)||
 #v1 .back_button{
	float:left; 
}
||endif||

.mview{
  position:absolute;
  left:0;right:0;
  top:0;bottom:0;  
}


.alt_ui{
	top:0;left:0;
	bottom:0;right:0;
#	overflow-x:hidden;	
#||iftrue(alt_scroll)||
	-webkit-overflow-scrolling: touch;
#||endif||
#	overflow-y:scroll;
}

 #v1{
 	background-color:red;
 }
 #v2{
 	background-color:white;
 	border: 1px solid gray;
 } 
 #v3{
 	background-color:white;
 }
 
 .back_button{
 	width:60px;
 	height:60px;
 	display:inline-block;
 	margin:5px;
 }

 
# ||iftrue(or(istrue(is_ios),istrue(ios_pretend)))||
  .aside{
  	overflow:hidden important!:
  }
  .full_cursor{
  	height:58px !important;
  }
  .part_cursor{
  	padding-top:20px !important;
  	padding-bottom:20px !important;
  }  
  .tree_icons, .folder{
  	padding-top:20px !important;
  }
  .swish_edit_outer{
  	position:absolute;
  	top:10px;
  	left:70px;
  	padding:15px;
  }
  body{
#  	overflow-y:scroll;
  }
# ||endif||

||iftrue(false)||
@media (pointer: fine) {
  body{
    background:red !important;
  }
}
@media (pointer: rough) {
  body{
	background:green !important;
  }	
}
@media (pointer: none) {
  body{
	background:blue !important;
  }	
}
||endif||
			.flist_link{
				display:none;
			}

		||css_end()||');

		mobile_click(2);
	}
	function alt_ui_touch_resize()
	{
	}		

	function plain_config()
	{
		return 'For touch devices. Auto enable on mobile?';
	}
	
	newlook_register('touch', 'smallscreen', obj, {alt:true});
})();
