// xWinLib examples


////////////////////////////////////
// exWin: 
// Create three individual windows that demonstrate move, resize, 
// maximize, animation, and intra-window, communication.

function exWin( e ) {
	var w, x, y;

	w = new xWindow( );
	w.name = "exWin1a";
	w.style = WS_CONTEXTMENU | WS_SYSMENU | WS_CLOSE | WS_NORMAL | WS_RESIZABLE | WS_MOVEABLE | WS_HEADER | WS_BORDERTHICK;
	w.setposition( 0, 0, 500, 340 );
	w.displayMode = DISP_CENTERED;
	w.bgColor = "#ffe2ca";
	w.padding = 10;
	w.header = "Window #3";
	w.hdrBgColor = "#f67c21";
	w.action = "Move windows by dragging them around. Hold the CTRL button down while dragging to snap-to-grid.";
	w.create( );

	x = w.left; y = w.top;

	w = new xWindow( );
	w.name = "exWin1b";
	w.style = WS_CONTEXTMENU | WS_NORMAL | WS_RESIZABLE | WS_MOVEABLE | WS_FOOTER | WS_BORDERTHICK;
	w.setposition( x + 20, y + 35, 500, 340 );
	w.bgColor = "#fffabe";
	w.padding = 10;
	w.footer = "Windows support lots of options";
	w.ftrBgColor = "#fec528";
	w.action = "Window #2<p>Resize windows by dragging their edges...<p>" +
		"Hold the SHIFT button while resizing to maintain aspect ratio and/or hold the CTRL button down to snap-to-grid.<p>" +
		"<a href='#' onclick=\"xWin('exWin1b').destroy( ); return false;\">Close window...</a>";
	w.create( );
	
	w = new xWindow( );
	w.name = "exWin1c";
	w.style = WS_CONTEXTMENU | WS_SYSMENU | WS_MAXIMIZABLE | WS_CLOSE | WS_NORMAL | WS_RESIZABLE | WS_MOVEABLE | WS_HEADER | WS_FOOTER | WS_BORDERTHICK;
	w.setposition( x + 40, y + 70, 500, 340 );
	w.displayMode = DISP_NORMAL | DISP_FADE_IN | DISP_FADE_OUT;
	w.bgColor = "#e0ffc9";
	w.header = "Window #1";
	w.hdrBgColor = "#61aa38";
	w.footer = "Click close or reset to end example...";
	w.ftrBgColor = "#61aa38";
	w.action = "<br><ul><li><a href='#' onclick='exWin_move( ); return false;'>Move windows</a>" +
		"<li><a href='#' onclick='exWin_anim( 0 ); return false;'>Animate windows</a><br><br>" + 
		"<li>Send message to other window:<br><select id='ex1_win' class=smtxt><option value='exWin1b'>Window 2<option value='exWin1a'>Window 3</select> <input type=text class=smtxt id='ex1_msg' style='width:90;' onKeyDown=\"btnDefault( xlib.eventGet( event ), 'exWin_btn' )\"><input id='exWin_btn' type=button class=smtxt value='send' onclick='exWin_send( );'><br><br>" +
		"<li><a href='#' onclick=\"xWin('exWin1c').maximize( ); return false;\">Maximize window</a>" +
		"<li><a href='#' onclick='exWin_close( ); return false;'>Close example</a><br><br>" +
		"<li>Alternate layouts: <a href='#' onclick='exWin_anim( 1 ); return false;'>[1]</a> " +
		"<a href='#' onclick='exWin_anim( 2 ); return false;'>[2]</a></ul>" +
		"<p><br> &nbsp; &nbsp; &nbsp; <i>(This window uses the fx.opacityFade effect)</i>";
	w.create( );
}

function exWin_move( ) {
	var w;

	xlib.desktop.scrollTo( 0, 0 );
	w = xWin( "exWin1a" ); if ( w ) { w.position( 20, 60 ); }
	w = xWin( "exWin1b" ); if ( w ) { w.position( 70, 160 ); }
	w = xWin( "exWin1c" ); if ( w ) { w.position( 120, 260 ); }
}

function exWin_anim( layout ) {
	var data;
	
	switch ( layout ) {
	  case 1:  data = "exWin1c,28,100,376,274;exWin1b,327,165,208,327;exWin1a,390,391,454,142;"; break;
	  case 2:  data = "exWin1c,252,120,537,411;exWin1b,555,183,329,241;exWin1a,283,378,253,202;"; break;
	  default: data = "exWin1a,23,233,224,377;exWin1b,128,341,443,241;exWin1c,401,169,355,321;";
	}
	xlib.desktop.winMove( data, MOVE_ANIMATE, { interval: 10, power: 0.5, steps: 20 } );
}

function exWin_send( ) {
	var w = xWin( lbCurSelValue( "ex1_win" ) );
	if ( w ) { w.winBodySet( domObject( "ex1_msg" ).value ); }
}

function exWin_close( ) {
	var w;
	w = xWin( "exWin1a" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin1b" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin1c" ); if ( w ) { w.destroy( ); }
}

////////////////////////////////////
// exWin_trans: 
// Demonstrate use of transparent backgrounds in windows

function exWin_trans( e ) {
	var w, w2;

	xlib.imagePreload( "images/balloon.png" );
	xlib.imagePreload( "images/balloon2.png" );

	w = new xWindow( "exWin_trans" );
	w.style = WS_TRANSPARENT | WS_MINIMIZABLE | WS_CLOSE | WS_NORMAL | WS_RESIZABLE | WS_MOVEABLE | WS_HEADER | WS_FOOTER | WS_BORDERTHICK;
	w.setposition( 0, 0, 500, 400 );
	w.displayMode = DISP_CENTERED;
	w.padding = 10;
	w.transLevel = 50;
	w.bodyClass = "txtw";
	w.header = "Transparent Window Example";
	w.action = "Select a level of transparency:<ul>" +
		"<li><a href='#' onclick='exWin_trans_bg( 0 ); return false;' class=txtw>0% (totally opaque)</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 10 ); return false;' class=txtw>10% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 20 ); return false;' class=txtw>20% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 30 ); return false;' class=txtw>30% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 40 ); return false;' class=txtw>40% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 50 ); return false;' class=txtw>50% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 60 ); return false;' class=txtw>60% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 70 ); return false;' class=txtw>70% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 80 ); return false;' class=txtw>80% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 90 ); return false;' class=txtw>90% transparency</a>" +
		"<li><a href='#' onclick='exWin_trans_bg( 100 ); return false;' class=txtw>100% (totally transparent)</a>" +
		"</ul>" +
		"<a href=\"javascript:xWin( 'exWin_trans' ).destroy( );\" class=txtw>Close this window...</a><br>" +
		"<a href='javascript:exWin_trans_close( );' class=txtw>Close example...</a>";
	w.create( );

	w2 = new xWindow( "exWin_transB" );
	w2.style = WS_NORMAL | WS_MOVEABLE;
	w2.setposition( w.left + 325, w.top - 50, 256, 237 );
	w2.bgColor = "";
	w2.eDblClick = "xWin( 'exWin_transB' ).destroy( );";
	w2.action = "<img src='images/balloon.png' width=100% height=100% border=0 style='cursor:pointer;' onmousedown='xlib.eventCancelDrag( xlib.eventGet( event ) );' onmouseover=\"domImageSet(this,'images/balloon2.png',1);\" onmouseout=\"domImageSet(this,'images/balloon.png',1);\" ondragstart='return false;'>";
	w2.create( );
}

function exWin_trans_bg( lvl ) {
	xWin( "exWin_trans" ).transparencySet( lvl );
}

function exWin_trans_close( ) {
	var w;
	w = xWin( "exWin_trans" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_transB" ); if ( w ) { w.destroy( ); }
}

////////////////////////////////////
// exWin_modal: 
// Example of a modal window

function exWin_modal( e ) {
	var w = new xWindow( "exWin_modal" );
	w.style = WS_MODAL | WS_NORMAL | WS_MOVEABLE;
	w.setposition( 0, 0, 221, 414 );
	w.displayMode = DISP_CENTERED;
	w.bgImage = "images/iphone.png";
	w.overflow = "hidden";

	// events can be strings or functions
	w.eDisplay = function( ) {
		var msg = "This is a modal window, which requires that the user respond to the action in the window before continuing...<p><a href='#' onclick=\"xWin( 'exWin_modal' ).destroy( );\">Click here to continue...</a><p><i>(this window also uses the xlib.fx.typewriter effect...)</i><p><a href='#' onclick=\"xWin( 'exWin_modal' ).display( );\">Retype message...</a>";
		xlib.fx.typewriter( 'exWin_modal_type', msg, { delay:25 } );
	};
	w.action = "<span id='exWin_modal_type' style='display:block; position:relative; left:20; top:120; width:170; height:200;'></span>";
	w.create( );
}

function exWin_modal_close( ) {
	var w = xWin( "exWin_modal" ); if ( w ) { w.destroy( ); }
}

////////////////////////////////////
// exWin_border: 
// Example of custom borders with windows

function exWin_border( e ) {
	var w, w2;

	w = new xWindow( );
	w.name = "exWin_border_1";
	w.style = WS_NORMAL | WS_RESIZABLE | WS_MOVEABLE | WS_RESIZABLE | WS_BORDER;
	w.setposition( 0, 0, 500, 300 );
	w.displayMode = DISP_CENTERED;
	w.bgColor = "#ffe2ca";
	w.padding = 10;
	w.borderStyle = "dashed";
	w.borderWidth = 1;
	w.borderColor = "red";
	w.action = "border=dashed, width=1, color=red";
	w.create( );

	w2 = new xWindow( );
	w2.name = "exWin_border_2";
	w2.style = WS_NORMAL | WS_RESIZABLE | WS_MOVEABLE | WS_RESIZABLE | WS_BORDER;
	w2.setposition( w.left + 20, w.top + 35, 500, 300 );
	w2.bgColor = "#fffabe";
	w2.padding = 10;
	w2.borderStyle = "dotted";
	w2.borderWidth = 3;
	w2.borderColor = "blue";
	w2.action = "border=dotted, width=3, color=blue";
	w2.create( );
	
	w2 = new xWindow( );
	w2.name = "exWin_border_3";
	w2.style = WS_NORMAL | WS_RESIZABLE | WS_MOVEABLE | WS_RESIZABLE | WS_BORDER;
	w2.setposition( w.left + 40, w.top + 70, 500, 300 );
	w2.padding = 10;
	w2.borderWidth = 10;
	w2.borderColor  = "green";
	w2.bgColor = "#e0ffc9";
	w2.action = "border=solid, width=10, color=green" +
		"<p>In addition to CSS border styles, xWinLib supports custom defined borders using images, transparency, and program control." +
		"<p>Customize: <select id='bStyle'><option selected>solid<option>dotted<option>dashed</select> " +
		"<select id='bWidth'><option selected>1px<option>2px<option>3px<option>4px<option>5px</select> " +
		"<select id='bColor'><option selected>red<option>yellow<option>green<option>blue<option>black<option>white</select> " +
		"<input type=button value='set' onclick='exWin_border_set( );'> " +
		"<p><a href='#' onclick='exWin_border_close( ); return false;'>Close example...</a>";
	w2.create( );
}

function exWin_border_set( ) {
	var w = xWin( "exWin_border_3" );

	w.borderSet( lbCurSelText( "bStyle" ),
				 lbCurSelText( "bWidth" ),
				 lbCurSelText( "bColor" ),
				 true
			   );
}

function exWin_border_close( ) {
	var w;
	w = xWin( "exWin_border_1" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_border_2" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_border_3" ); if ( w ) { w.destroy( ); }
}


////////////////////////////////////
// exWin_child: 
// Example of child window support

function exWin_child( e ) {
	var w, wc;

	// create the parent
	w = new xWindow( "exWin_child" );
	w.style = WS_NORMAL | WS_MOVEABLE;
	w.setposition( 0, 0, 500, 438 );
	w.displayMode = DISP_CENTERED;
	w.overflow = "hidden";
	w.bgImage = "images/filmstrip.png";
	w.action = "<span style='display:block; position:relative; left:24; top:64; width:445;'>Drag the frame or the picture; resize the picture..." +
		"<p> &nbsp; <a href='#' onclick='exWin_child_close( ); return false;'>Close window...</a>" +
		"<p><br><br><br><br><center><font class=title>Angie & Steve</font><br>September 27, 2003" + 
		"<p><br><br><br>Hold the SHIFT button while resizing to maintain aspect ratio,<br>CTRL while resizing or moving to snap-to-grid.</center></span>";
	w.create( );

	// create the child window
	wc = new xWindow( "exWin_childa" );
	wc.style = WS_NORMAL | WS_MOVEABLE | WS_RESIZABLE | WS_BORDERTHICK | WS_CHILD;
	wc.oparent = w;
	wc.setposition( 28, 79, 429, 272 );
	wc.eDblClick = "exWin_child_close( );";
	wc.action = "<img src='images/wedding.jpg' width=100% height=100% title='Double-click to close the window...' onmousedown='xlib.eventCancelDrag( xlib.eventGet( event ) );'>";
	wc.create( );
}

function exWin_child_close( ) {
	// we only need to delete the parent as this will automatically
	// remove all children too
	var w = xWin( "exWin_child" ); if ( w ) { w.destroy( ); }
}

////////////////////////////////////
// exWin_tooltip: 
// Example of custom tooltips

function exWin_tooltip( e ) {
	var w, x, y;

	w = new xWindow( "exWin_tt1" );
	w.style = WS_NORMAL | WS_MOVEABLE;
	w.setposition( 0, 0, 88, 88 );
	w.displayMode = DISP_CENTERED | DISP_ANIM_TOOLTIP | DISP_NOAUTOCLOSE;
	w.bgImage = "images/tt1.png";
	w.tooltip = "Cool icons by http://www.robcubbon.com<br>Double-click the icon to close the example...<p>This tooltip rolls up and down and requires the user to perform an action to close..." +
		"<p><a href='#' onclick=\"exWin_tooltip_close( ); return false;\">[x] close example</a>" +
		"<br><a href='#' onclick=\"xWin('exWin_tt1').tooltipFunc( xlib.eventGet( event ), 0 ); return false;\">[x] close tooltip</a>";
	w.ttOpts = "( { width:300, height:240, shadow:0, yOffset:1, padding:36, bgImage:'images/tooltip.png' } )";
	w.eDblClick = "exWin_tooltip_close( );";
	w.create( );

	x = w.left; y = w.top;

	w = new xWindow( "exWin_tt2" );
	w.style = WS_NORMAL | WS_MOVEABLE;
	w.setposition( x - 200, y, 88, 88 );
	w.displayMode |= DISP_ANIM_TOOLTIP;
	w.bgImage = "images/tt2.png";
	w.tooltip = "Cool icons by http://www.robcubbon.com<br>Double-click to close...<p>This tooltip rolls up and down...";
	w.ttBG = "#ffffff";
	w.eDblClick = "exWin_tooltip_close( );";
	w.create( );

	w = new xWindow( "exWin_tt3" );
	w.style = WS_NORMAL | WS_MOVEABLE;
	w.setposition( x - 100, y, 88, 88 );
	w.displayMode |= DISP_ANIM_TOOLTIP;
	w.bgImage = "images/tt3.png";
	w.tooltip = "Cool icons by http://www.robcubbon.com<br>Double-click to close...<p>This tooltip rolls up and down as has transparency enabled...";
	w.ttOpts = "( { opacity:8, bgColor:'#fffabe' } )";
	w.eDblClick = "exWin_tooltip_close( );";
	w.create( );

	w = new xWindow( "exWin_tt4" );
	w.style = WS_NORMAL | WS_MOVEABLE;
	w.setposition( x + 100, y, 88, 88 );
	w.bgImage = "images/tt4.png";
	w.tooltip = "Cool icons by http://www.robcubbon.com<br>Double-click to close...<p>This tooltip displays instantly...";
	w.ttBG = "#e0ffc9";
	w.ttWidth = 250;
	w.eDblClick = "exWin_tooltip_close( );";
	w.create( );

	w = new xWindow( "exWin_tt5" );
	w.style = WS_NORMAL | WS_MOVEABLE;
	w.setposition( x + 200, y, 88, 88 );
	w.bgImage = "images/tt5.png";
	w.tooltip = "Cool icons by http://www.robcubbon.com<br>Double-click to close...<p>This tooltip displays instantly...";
	w.ttBG = "#c9d6fe";
	w.eDblClick = "exWin_tooltip_close( );";
	w.create( );
}

function exWin_tooltip_close( ) {
	var w;
	w = xWin( "exWin_tt1" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_tt2" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_tt3" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_tt4" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_tt5" ); if ( w ) { w.destroy( ); }
}

////////////////////////////////////
// exWin_themes: 
// Demonstrate use of xWinLib window themes
// uses: xWinLib_themes.js

function exWin_themes( e, theme ) {
	var w, content;

	content = "Select window theme: <select id='lbTheme' class='smtxt' style='width:160;' onchange='exWin_themes_set( );'><option>Standard<option>XP<option>Vista<option>Mac<option>Linux (Enlightenment)</select> " +
		"<p>Window themes provide for fully customizable headers, footers, borders, backgrounds, transparency, opaqueness, system menu, context menu, and more..." +
		"<p>NOTE: Multiple window themes can simultaneously co-exist within a single web page." +
		"<p><a href=\"javascript:exUndock( 'libs/xwinlib_themes.js' );\">View THEMES LIBRARY source...</a>" +
		"<br><a href='javascript:exWin_themes_close( );'>Close example...</a>";

	switch ( theme ) {
	  case "XP":    w = theme_XP( "exWin_themes", content ); break;
	  case "Vista": w = theme_Vista( "exWin_themes", content ); break;
	  case "Mac":   w = theme_Mac( "exWin_themes", content ); break;
	  case "Linux (Enlightenment)":   w = theme_Enlightenment( "exWin_themes", content ); break;
	  default:
		theme = "Standard";
		w = new xWindow( "exWin_themes" );
		w.style = WS_NORMAL | WS_MAXIMIZABLE | WS_CLOSE | WS_MOVEABLE | WS_RESIZABLE | WS_HEADER | WS_FOOTER | WS_BORDERTHICK;
		w.hdrBgColor = w.ftrBgColor = "#9d7e4e";
		w.borderColor = "#6c5735";
		w.padding = 10;
		w.action = content;
	}
	w.style |= WS_SHADOW;

	w.setposition( 0, 0, 500, 400 );
	w.displayMode = DISP_CENTERED;
	w.header = "Window Themes Example:";
	w.create( );

	lbSearchText( "lbTheme", theme, 1 );
}

function exWin_themes_set( ) {
	var theme = lbCurSelText( "lbTheme" );
	xWin( "exWin_themes" ).destroy( );
	exWin_themes( null, theme );
}

function exWin_themes_close( ) {
	var w = xWin( "exWin_themes" ); if ( w ) { w.destroy( ); }
}

////////////////////////////////////
// exWin_web: 
// Demonstrate use of embedded websites (using themes)
// uses: xWinLib_themes.js

function exWin_web( e ) {
	var w, x, y;

	w = theme_Mac( "exWin_web1", "http://www.xwinlib.com", 1 );
	w.setposition( 0, 0, 500, 400 );
	w.displayMode = DISP_CENTERED;
	w.header = "Window Embedded Websites Example: &nbsp; <a href='javascript:exWin_web_close( );'>[x] close all</a>";
	w.create( );

	x = w.left; y = w.top;

	w = theme_XP( "exWin_web2", "http://www.yahoo.com", 1 );
	w.setposition( x + 40, y + 70, 500, 400 );
	w.header = "Window Embedded Websites Example:";
	w.create( );

	w = theme_Vista( "exWin_web3", "http://www.google.com", 1 );
	w.setposition( x + 80, y + 140, 500, 400 );
	w.header = "Window Embedded Websites Example:";
	w.create( );
}

function exWin_web_close( ) {
	var w;
	w = xWin( "exWin_web1" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_web2" ); if ( w ) { w.destroy( ); }
	w = xWin( "exWin_web3" ); if ( w ) { w.destroy( ); }
}

////////////////////////////////////
// exWin_save: 
// Demonstrate save and restore functionality

function exWin_save( ) {
	var w;

	w = new xWindow( "exWin_save" );
	w.style = WS_CLOSE | WS_NORMAL | WS_MAXIMIZABLE | WS_RESIZABLE | WS_MOVEABLE | WS_HEADER | WS_FOOTER | WS_BORDERTHICK;
	w.setposition( 0, 0, 620, 460 );
	w.displayMode = DISP_CENTERED;
	w.padding = 10;
	w.header = "Save Window and Desktop Data Example:";
	w.action = "Format: <select id='exSave_format' class=txt style='width:120;'><option value='" + DP_NAMEVALUE + "'>Name Value<option value='" + DP_JSON + "'>JSON<option value='" + DP_XML + "'>XML<option value='" + DP_QSTR + "'>Query String</select> " +
		"<input type=button class=smtxt style='width:100px;' value='Window Data' onClick='exWin_saveWin( );'>" +
		"<input type=button class=smtxt style='width:100px;' value='Desktop Data' onClick='exWin_saveDesktop( )'>" +
		"<input type=button class=smtxt style='width:80px;' value='Clear' onClick='exWin_saveClear( )'> <span id='exSave_ttl'></span>" +
		"<textarea id='exSave' style='width:100%; height:93%;' class='src_txt'></textarea>";
	w.create( );
}

function exWin_save_close( ) {
	var w = xWin( "exWin_save" ); if ( w ) { w.destroy( ); }
}

function exWin_UpdateSize( ttl ) {
	domInnerHTML_set( "exSave_ttl", strcommas( ttl ) + " bytes" );
}

function exWin_saveWin( ) {
	var data = xlib.dpConvertWindow( int( lbCurSelValue( "exSave_format" ) ), xWin( "exWin_save" ).pack( ) );
	domObject( "exSave" ).value = data;
	exWin_UpdateSize( len( data ) );
}

function exWin_saveDesktop( ) {
	var data = xlib.dpConvertDesktop( int( lbCurSelValue( "exSave_format" ) ), xlib.desktop.save( ) );
	domObject( "exSave" ).value = data;
	exWin_UpdateSize( len( data ) );
}

function exWin_saveClear( ) {
	domObject( "exSave" ).value = "";
}

////////////////////////////////////
// exWin_events: 
// Demonstrate some of the event functionality

function exWin_events( ) {
	var w;

	w = new xWindow( "exWin_events" );
	w.style = WS_CLOSE | WS_NORMAL | WS_RESIZABLE | WS_MOVEABLE | WS_HEADER | WS_FOOTER | WS_BORDERTHICK;
	w.setposition( 0, 0, 620, 460 );
	w.displayMode = DISP_CENTERED;
	w.padding = 10;
	w.header = "Events Example:";
	
	w.eClick = function( e ) { 
		exWin_events_log( e, "Single Click (" + xlib.eventCurrentGet( "eClkTime" ) + "ms)" ); 
	};
	w.eDblClick = function( e ) { 
		exWin_events_log( e, "Double Click (" + xlib.eventCurrentGet( "eDblClkTime" ) + "ms)" ); 
	};
	w.eCreate = "alert( 'Window -> CREATE event' );";
	w.eDestroy = "alert( 'Window -> DESTROY event' );";
	w.eDisplay = "alert( 'Window -> DISPLAY event' );";
	
	w.action = "Events Log: " +
		"<input type=button class=smtxt style='width:80px;' value='Clear' onClick='exWin_events_clear( )'> &nbsp; [Click or Double Click here]" +
		"<textarea id='exEvents' style='width:100%; height:93%;' class='src_txt'></textarea>";
	w.create( );

	xlib.eventBind( w.obj, "mouseover", 
		function( e ) { 
			var m0 = xlib.mousePos( e, 0 );
			var m1 = xlib.mousePos( e, 1 );
			exWin_events_log( e, "Mouseover (offset: " + m0.x + "x" + m0.y + ", w/ scroll " + m1.x + "x" + m1.y + ")" );
		} 
	);
	xlib.eventBind( w.obj, "mouseout", 
		function( e ) { 
			var m0 = xlib.mousePos( e, 0 );
			var m1 = xlib.mousePos( e, 1 );
			exWin_events_log( e, "Mouseout (offset: " + m0.x + "x" + m0.y + ", w/ scroll " + m1.x + "x" + m1.y + ")" );
		} 
	);
}

function exWin_events_close( ) {
	var w = xWin( "exWin_events" ); if ( w ) { w.destroy( ); }
}

function exWin_events_log( e, msg ) {
	var w = xWin( "exWin_events" );
	var o = domObject( "exEvents" );
	
	o.value = dateFormat( null, "[HH:MN:SS.SSSS]" ) + " -> " + msg + "\n" + o.value;
}

function exWin_events_clear( ) {
	domObject( "exEvents" ).value = "";
}

////////////////////////////////////
// exWin_ajax: 
// Demonstrate Ajax integration

function exWin_ajax( ) {
	var w;

	w = new xWindow( "exWin_ajax" );
	w.style = WS_CLOSE | WS_NORMAL | WS_MAXIMIZABLE | WS_RESIZABLE | WS_MOVEABLE | WS_HEADER | WS_FOOTER | WS_BORDERTHICK;
	w.setposition( 0, 0, 620, 460 );
	w.displayMode = DISP_CENTERED;
	w.padding = 10;
	w.header = "Ajax integration example:";
	w.action = "Select the site to access via xWinLib's cross-domain Ajax: &nbsp; <a href=\"javascript:exWin_AjaxGet('http://www.google.com');\">Google</a> | <a href=\"javascript:exWin_AjaxGet('http://www.yahoo.com');\">Yahoo</a> | <a href=\"javascript:exWin_AjaxGet('http://www.myspace.com');\">MySpace</a>" +
		"<br><br><textarea id='exAjax' style='width:100%; height:90%;' class='src_txt'></textarea>";
	w.create( );
}

function exWin_ajax_close( ) {
	var w = xWin( "exWin_save" ); if ( w ) { w.destroy( ); }
}

function exWin_AjaxGet( url ) {
	var data = xlibAjax( AJAX_GET, AJAX_SYNCH, "ajaxGet.htm", "url=" + jsEncode( url ) );
	domObject( "exAjax" ).value = data;
}

////////////////////////////////////
// exWin_dp: 
// Demonstrate Data Portability functionality

function exWin_dp( ) {
	var w;

	w = new xWindow( "exWin_dp" );
	w.style = WS_CLOSE | WS_NORMAL | WS_MAXIMIZABLE | WS_RESIZABLE | WS_MOVEABLE | WS_HEADER | WS_FOOTER | WS_BORDERTHICK;
	w.setposition( 0, 0, 620, 460 );
	w.displayMode = DISP_CENTERED;
	w.padding = 10;
	w.header = "Data Portability Example:";
	w.action = "Select the data conversion option: <font color='#0000C0'><span id='exDp_ttl'></span></font> &nbsp;[data is extracted in real time]<br><br>" +
		"<table border=1 width=580 cellspacing=0 cellpadding=5 class=txt>" +
		"<tr align=center><td>Data Source</td><td width=18%>Name/value</td><td width=18%>JSON</td><td width=18%>XML</td><td width=18%>Query string</td></tr>" + 
		"<tr align=center><td align=left>Window data</td><td><a href=\"javascript:exWin_dpGet( 'w', DP_NAMEVALUE )\">yes</a></td><td><a href=\"javascript:exWin_dpGet( 'w', DP_JSON )\">yes</a></td><td><a href=\"javascript:exWin_dpGet( 'w', DP_XML )\">yes</a></td><td><a href=\"javascript:exWin_dpGet( 'w', DP_QSTR )\">yes</a></td></tr>" + 
		"<tr align=center><td align=left>Desktop data</td><td><a href=\"javascript:exWin_dpGet( 'd', DP_NAMEVALUE )\">yes</a></td><td><a href=\"javascript:exWin_dpGet( 'd', DP_JSON )\">yes</a></td><td><a href=\"javascript:exWin_dpGet( 'd', DP_XML )\">yes</a></td><td><a href=\"javascript:exWin_dpGet( 'd', DP_QSTR )\">yes</a></td></tr>" + 
		"</table><br><br>" +
		"<textarea id='exDp' style='width:100%; height:63%;' class='src_txt'></textarea>";
	w.create( );
}

function exWin_dp_close( ) {
	var w = xWin( "exWin_dp" ); if ( w ) { w.destroy( ); }
}

function exWin_dpGet( dt, ftype ) {
	var data;

	if ( dt == "w" ) {
		data = xlib.dpConvertWindow( ftype, xWin( "exWin_dp" ).pack( ) );
	}
	else {
		data = xlib.dpConvertDesktop( ftype, xlib.desktop.save( ) );
	}
	domObject( "exDp" ).value = data;
	domInnerHTML_set( "exDp_ttl", "(" + strcommas( len( data ) ) + " bytes)" );
}

////////////////////////////////////
// exWin_dd: 
// Demonstrate Drag and Drop functionality

function exWin_dd( ) {
	var w, o, oFont;

	w = theme_Mac( "exWin_dd", "" );
	w.setposition( 0, 0, 620, 460 );
	w.displayMode = DISP_CENTERED;
	w.header = "Drag and Drop Example:";
	w.create( );

	o = xlib.objGenerate( w, OTYPE_TEXTBLOCK, "drag1", 10, 10, 200, 100, { text:"Highlight text from here and drag it to the DROP ZONE" } );
	o.eDrag = "exWin_drag( '" + o.name + "' )";
	o.style |= WS_DRAG;
	o.style &= ~WS_MOVEABLE;
	o.create( );

	o = xlib.objGenerate( w, OTYPE_TEXTBLOCK, "link2", 10, 120, 200, 100, { text:"<a href='http://www.google.com' target=_blank>Drag this link</a> and drop it in the DROP ZONE" } );
	o.eDrag = "exWin_drag( '" + o.name + "' )";
	o.style &= ~WS_MOVEABLE;
	o.style |= WS_DRAG;
	o.create( );
	
	o = xlib.objGenerate( w, OTYPE_IMAGE, "image1", 10, 230, 200, 100, { img:"images/logo.gif", title:"Drag the image in to the DROP ZONE..." } );
	o.eDrag = "exWin_drag( '" + o.name + "' )";
	o.style |= WS_DRAG | WS_RESIZABLE;
	o.style &= ~WS_MOVEABLE;
	o.create( );

	oFont = xlib.fontCreate( { align:"center", valign:"middle" } );
	xlib.objGenerate( w, OTYPE_DROPZONE, "drop1", 220, 10, 385, 100, { text:">> DROP ZONE: drop dragged elements here << ", font: oFont, eDrop: function(owin,e) { exWin_drop( owin, xlib.eventGet( e ) ); } } ).create( );

	xlib.objGenerate( w, OTYPE_HTMLBLOCK, "html1", 220, 120, 385, 210, { source:"<textarea id='exWin_dd_msg' ondrop='xlib.eventCancelDrop( xlib.eventGet( event ) );' style='width:100%; height:100%;' class=smtxt></textarea>", eDrop: function(owin,e) { exWin_drop( owin, xlib.eventGet( e ) ); } } ).create( );

	o = xlib.objGenerate( w, OTYPE_TEXTBLOCK_TRANS, "txt1", 10, 340, 595, 85, { text:"The xWinLib drag and drop example &nbsp;<a href=\"javascript:exUndock( 'exWin_dd' );\">(view example source)</a>", font: oFont } );
	o.style |= WS_CHILD;
	o.create( );
}

function exWin_dd_close( ) {
	var w = xWin( "exWin_dd" ); if ( w ) { w.destroy( ); }
}

function exWin_drag( name ) {
	exWin_drag_msg( "DRAGGING -> from Window:" + upper( name ) );
}

function exWin_drop( w, e ) {
	exWin_drag_msg( "DROPPED -> " + xDropDataGet( e ) );
}

function exWin_drag_msg( msg ) {
	var o = domObject( "exWin_dd_msg" );
	o.value = dateFormat( null, "[HH:MN:SS] " ) + msg + "\n" + o.value;
}