upgraded yui to 2.2.2 and yui-ext to 1.0.1a

2007-07-05 04:23:55 +00:00 · 2007-07-05 04:23:55 +00:00 · 547ced6500
commit 547ced6500
parent 4d9af2c691
1992 changed files with 645731 additions and 0 deletions
--- a/www/extras/yui/examples/dragdrop/circle.html
+++ b/www/extras/yui/examples/dragdrop/circle.html
@ -0,0 +1,242 @@
+  <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+<body>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+<script type="text/javascript" src="../../build/animation/animation.js"></script>
+
+<script type="text/javascript">
+
+YAHOO.example.DDApp = function() {
+    var dd;
+    var clickRadius = 46, startPos = [105, 280];
+    var Event=YAHOO.util.Event
+    var Dom=YAHOO.util.Dom;
+
+    return {
+        init: function() {
+
+            var el = Dom.get("dragDiv1");
+            // Event.on(el, "selectstart", Event.preventDefault);
+
+            dd = new YAHOO.util.DD(el);
+
+            dd.clickValidator = function(e) {
+
+                // get the screen rectangle for the element
+                var el = this.getEl();
+                var region = Dom.getRegion(el);
+
+                // get the radius of the largest circle that can fit inside
+                // var w = region.right - region.left;
+                // var h = region.bottom - region.top;
+                // var r = Math.round(Math.min(h, w) / 2);
+                //-or- just use a well-known radius
+                var r = clickRadius;
+
+                // get the location of the click
+                var x1 = Event.getPageX(e), y1 = Event.getPageY(e);
+
+                // get the center of the circle
+                var x2 = Math.round((region.right+region.left)/2);
+                var y2 = Math.round((region.top+region.bottom)/2);
+
+
+                // I don't want text selection even if the click does not
+                // initiate a drag
+                Event.preventDefault(e);
+
+                // check to see if the click is in the circle
+                return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
+            };
+
+            dd.onDragDrop = function(e, id) {
+                // center it in the square
+                Dom.setXY(this.getEl(), Dom.getXY(id));
+            }
+
+            dd.onInvalidDrop = function(e) {
+                // return to the start position
+                // Dom.setXY(this.getEl(), startPos);
+
+                // Animating the move is more intesting
+                new YAHOO.util.Motion( 
+                    this.id, { 
+                        points: { 
+                            to: startPos
+                        }
+                    }, 
+                    0.3, 
+                    YAHOO.util.Easing.easeOut 
+                ).animate();
+
+            }
+
+            dd2 = new YAHOO.util.DDTarget("dragDiv2");
+        }
+    }
+} ();
+    
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
+    
+</script>
+
+<style type="text/css">
+
+#dragDiv1 { 
+    background:url(img/circle.gif) 0 0 no-repeat;
+    top:280px; left:105px;
+    border:0px solid black;
+    z-index:10;
+    cursor:default;
+}
+
+#dragDiv2 { 
+    background:url(img/sq2.png) 0 0 no-repeat;
+    background:#A0B9A6;top:390px; left:215px;
+    border:0px solid black;
+    cursor:default;
+}
+
+</style>
+
+<div id="pageTitle"><h3>Drag and Drop - YAHOO.util.DD</h3></div>
+
+
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+<div id="content">
+<form name="dragDropForm" action="javscript:;">
+<div class="newsItem">
+  <h3>Custom Click Validator Implementation and onInvalidDrop</h3>
+  <p>
+
+  In this example, we override clickValidator to provide custom logic for
+  determining if the initial mousedown should initiate a drag.  A drag is 
+  initiated only if the mousedown happens inside of the circle.  
+
+  <br />
+  
+  In addition, the circle snaps back to its inital position if not dropped 
+  on a target.  This is done by overriding the onInvalidDrop method.
+
+  </p>
+
+<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
+
+</div>
+</form>
+</div>
+
+      <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<div id="dragDiv1" class="testSquare" ><br />DD</div>
+<div id="dragDiv2" class="testSquare" >DDTarget</div>
+
+</body>
+</html>
--- a/www/extras/yui/examples/dragdrop/css/ie.css
+++ b/www/extras/yui/examples/dragdrop/css/ie.css
@ -0,0 +1 @@
+#container { float: none; }
#header h1 { margin-left: 24px; }
#content { margin-left: 25px; }
#pageTitle {top:10px;}
--- a/www/extras/yui/examples/dragdrop/css/screen.css
+++ b/www/extras/yui/examples/dragdrop/css/screen.css
@ -0,0 +1,301 @@
+html, body { padding: 0px 0px 10px 0px; border: 0;  }
+body { font: normal 11px verdana, sans-serif; color: #333; line-height: 19px; margin: 0; }
+#container { clear: both; text-align: left; padding: 0 0; margin: 0 0; }
+#containerTop { height:48px; }
+#pad {  padding: 0px 20px 0px 20px; }
+a { text-decoration: underline; color: #46546C; }
+a:hover { text-decoration: underline; color: #C57323; }
+h1, h2, h3, h4, h5, h6 { font-family: palatino, georgia, "Times New Roman", serif; }
+h2 { font-size:16px; font-weight: bold; margin: 0 0 11px 0; }
+.border_2px { border: 1px solid #D8D8D8; padding: 2px; background: #fff; }
+.border_5px { border: 1px solid #D8D8D8; padding: 5px; background: #fff; margin: 0 0 4px 0; }
+img { padding: 0; margin: 0; border: 0; }
+form { padding: 0; margin: 0; }
+.input { width: 85px; font-size: 9px; }
+.submit { font-size: 9px; }
+#pageTitle { position:absolute;top:0px;left:90px; }
+#pageTitle H3 { font-size:14pt; color:#666666 }
+#header h1 { float:left; margin-top: 19px; margin-left: 50px; border:0 }
+#header h1 a { display: block; height: 19px; text-decoration: none; }
+#header { height:  60px; border: 0px solid #CFFB00; margin-bottom:0px; }
+#header h4 { position: relative; float: right; font-size:11px; letter-spacing: 1px; top: 10px; right: 30px; line-height: 15px; padding: 0 0 0 13px; margin: 0px; }
+#content { float: left; width: 550px; min-height:400px; padding:10px 0px; border: 0px solid #C13B00; margin-left: 50px; top:0px; }
+#content h1 { font-size:18px; margin:0px;      }
+.newsItem { padding-bottom:25px; margin-bottom:25px; overflow: hidden; }
+.newsItem h3 { font-size:18px; margin:0px; }
+.newsItem h3 a { text-decoration:none; color:#6A7981; }
+.newsItem h3 a:hover { text-decoration:underline; color:#000; }
+.newsItemFooter, .newsItemFooter a { font-size:9px; color:#999; font-weight:normal; }
+.newsItemFooter a:hover { color:#222; }
+#footer { padding: 0px 0px 20px 0px; clear: both; color: #999; border-top:0px #CCC solid; margin:0px 26px 0px 30px }
+#footer a { color: #999; }
+#footer a:hover { color: #222; }
+#footerContainer { clear: both; }
+#rightbar {
+    float: right;
+    padding: 5px 5px 5px 5px;
+    width: 304px; /* for IE5-Win */
+    width: 300px;
+    border: 1px solid #333333;
+    position:relative;
+    right:48px;
+    top:0px;
+    background-color:#eeeeee;
+    }
+#rightbar h2, #rightbar h3 {
+    font-size:12px;
+    text-align:center;
+    color:#FFF;
+    
+    border-bottom:#848B8F solid 1px;
+    border-right:#949B9F solid 1px;
+    border-top:#eee solid 1px;
+    padding:1px;
+    margin:0px 0px 0px 0px;
+    background-color:#383e45;
+    width:100%;
+    }
+#rightbar h2 a, #rightbar h3 a {
+    font-size:12px;
+    color:#FFF;
+    text-decoration:none;
+    display:block;
+    }
+#rightBarPad {
+    margin:0px;
+    }
+#sidenav {
+    margin: 0px 0;
+    border-bottom: 1px solid #ddd;
+    }
+#sidenav ul {
+    margin: 0; 
+    padding: 0; 
+    border: 0;
+    
+    }
+#sidenav ul li {
+    list-style: none; 
+    list-style-image: none !important;
+    margin: 0; 
+    padding:0;
+    }
+#sidenav ul li a {
+   text-decoration: none;
+   padding: 5px 0px 5px 0px;
+   color: #4C5250;
+   display: block;
+   width: 187px;
+   font-size: 11px !important;   
+   font-weight: bold;
+   border-top: 1px solid #ddd;
+   border-bottom: 1px solid #aaa;
+   border-left: 1px solid #C7CBD0;
+   text-shadow: -2px -2px 0px #FFF;
+}
+   
+#sidenav ul li a:hover {
+
+    /* background: url(../img/navHover2.png) top no-repeat; */
+    border-top: 1px solid #A1AAAF;
+    border-bottom: 1px solid #CCC;
+    border-right: 0px solid #C3C7CA;
+    border-left: 1px solid #C3C7CA;
+    text-shadow: 4px 4px 0px #C3C7CA;
+    }
+        
+.testSquare {
+    border:4px solid #666;text-align:center;color:#fff;cursor:move;position:absolute;height:100px;width:100px;
+
+}
+
+.testSquareOn {
+    border:4px solid purple;text-align:center;color:#fff;cursor:move;position:absolute;height:100px;width:100px;
+}
+
+.sortList { cursor:move; width:100px; font-size:14px; }
+.sortListHidden { width:100px; font-size:14px;visibility:hidden }
+
+.listGroup1 { border:2px solid #dddddd; }
+.listGroup2 { border:2px solid #dddddd; background-color:#eeeeee; }
+
+#workArea { height: 420px; } 
+
+#ylogo { position:absolute;top:5px;left:5px; }
+
+/* slider */
+
+    .dragPanel { 
+        position: relative;
+        background-color: #eeeeee;
+        margin: 4px;
+        /*
+        top: 10px;
+        left: 20px;
+        */
+        width: 260px;
+        height: 180px;
+    }
+
+    .dragPanel h4 { 
+        background-color: #bbbbbb;
+        height: 10px;
+        margin: 0px;
+        cursor: move;
+    }
+
+
+    input { font-size: .85em }
+    .thumb { 
+        cursor:default;
+        width:18px; 
+        height:18px; 
+        z-index: 9;
+        position:absolute; 
+    }
+
+    .bg {
+        position:absolute; 
+        left:10px; 
+        height:18px; 
+        width:146px; 
+        border: 0px solid #aaaaaa;
+    }
+    
+    .bg span, .bg p {
+        cursor:default;
+        position: relative;
+        font-size: 2px;
+        overflow: hidden;
+        color: #aaaaaa;
+        top: 4px;
+        height: 10px;
+        width: 4px;
+        display: block;
+        float:left;
+    }
+
+    .bg span {
+        border-top:1px solid #cccccc;
+        border-bottom:1px solid #cccccc;
+    }
+
+    .bg .lb {
+        border-left:1px solid #cccccc;
+    }
+
+    .bg .rb {
+        border-right:1px solid #cccccc;
+    }
+    #valdiv { position:absolute; top: 100px; left:10px; } 
+
+    #rBG {top:30px}
+    #gBG {top:50px}
+    #bBG {top:70px}
+
+    #rgbSwatch {
+        position:absolute; 
+        left:160px; 
+        top:34px;
+        height:50px; 
+        width:50px; 
+        border:1px solid #aaaaaa;
+    }
+
+#rgbPanel {
+    /*
+    top: 400px;
+    left: 20px;
+    */
+    width: 360px;
+    height: 240px;
+}
+
+/* picker */
+
+    #hueThumb { 
+        cursor:default;
+        width:18px; 
+        height:18px; 
+        z-index: 9;
+        position:absolute; 
+    }
+
+    #hueBg {
+        position:absolute; 
+        left:216px; 
+        height:198px; 
+        width:18px; 
+        background:url(../img/hue.png) no-repeat;
+        top:18px;
+    }
+    
+    #pickerDiv {
+        position:absolute; 
+        left:10px; 
+        height:187px; 
+        width:188px; 
+        /*
+        background:url(../img/pickerbg.png) no-repeat;
+        */
+        top:20px;
+    }
+
+    #pickerbg { 
+        position:absolute; 
+        z-index: 1;
+        top:0px;
+        left:0px;
+    }
+    #selector { 
+        cursor:default;
+        width:11px; 
+        height:11px; 
+        z-index: 9;
+        position:absolute; 
+        top:0px;
+        left:0px;
+    }
+
+    #pickerSwatch {
+        position:absolute; 
+        left:260px; 
+        top:30px;
+        height:60px; 
+        width:60px; 
+        border:2px solid #aaaaaa;
+    }
+
+    #pickervaldiv { text-align:right; position:absolute; top: 86px; left:246px; } 
+
+#pickerPanel {
+    /*
+    top: 200px;
+    left: 20px;
+    */
+    width: 360px;
+    height: 240px;
+}
+
+/* standard horizontal and vertical sliders */
+    #horizHandleDiv { 
+        cursor:default;
+        width:18px; 
+        height:18px; 
+        position:absolute; 
+        left: 100px; /* the default position is the center of the bg */
+        top: 8px;  /* force the image down a bit */
+    }
+
+
+
+    #horizWrapper {position:relative; margin-left:60px;width:218px;float:left;}
+    #horizBGDiv {position:relative; top:60px; background:url(../img/horizBg.png) no-repeat; height:26px; width:218px;z-index:5 }
+    #horizValueDiv { position:relative; top: 70px; left:66px; } 
+
+    #vertWrapper {position:relative; width:90px;float:left}
+    #vertHandleDiv { cursor:default; width:20px; height:18px; position:absolute; }
+    #vertBGDiv {position:relative;top:0px; float:left; width:26px; left:10px;background:url(../img/vertBg.png) no-repeat;height:218px; }
+    #vertValueDiv { position:relative; top: 100px; left:40px; }
+
+
--- a/www/extras/yui/examples/dragdrop/drag.html
+++ b/www/extras/yui/examples/dragdrop/drag.html
@ -0,0 +1,172 @@
+  <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+<body>
+
+<style type="text/css">
+
+#dragDiv1 { 
+    background:url(img/sq1.png) 0 0 no-repeat;
+    background-color:#6D739A;top:240px; left:105px;
+}
+
+#dragDiv2 { 
+    background:url(img/sq2.png) 0 0 no-repeat;
+    background-color:#566F4E;top:350px; left:215px;
+}
+
+#dragDiv3 {
+    background:url(img/sq3.png) 0 0 no-repeat;
+    background-color:#7E5B60;top:460px; left:325px;
+}
+
+</style>
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+<script type="text/javascript">
+YAHOO.example.DDApp = function() {
+    var dd, dd2, dd3;
+    return {
+        init: function() {
+            dd = new YAHOO.util.DD("dragDiv1");
+            dd2 = new YAHOO.util.DD("dragDiv2");
+            dd3 = new YAHOO.util.DD("dragDiv3");
+        }
+    }
+}();
+    
+YAHOO.util.Event.onDOMReady(YAHOO.example.DDApp.init);
+</script>
+
+<div id="pageTitle"><h3>Drag and Drop - YAHOO.util.DD</h3></div>
+
+
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+<div id="content">
+<form name="dragDropForm" action="javscript:;">
+<div class="newsItem">
+  <h3>Basic Implementation of YAHOO.util.DragDrop</h3>
+  <p>
+  In this implementation of YAHOO.util.DragDrop, we keep track of the position of the clicked element
+  so that we can move it along with cursor during the drag operation, maintaining the relationship
+  between the location of the element and the location of the click.  
+  This class also provides a way to
+  define other elements that modify the way the drag operation works.      </p>
+
+<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
+
+</div>
+</form>
+</div>
+
+      <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="dragDiv1" class="testSquare" >YAHOO.util.DD</div>
+<div id="dragDiv2" class="testSquare" >YAHOO.util.DD</div>
+<div id="dragDiv3" class="testSquare" >YAHOO.util.DD</div>
+
+</body>
+</html>
--- a/www/extras/yui/examples/dragdrop/grid.html
+++ b/www/extras/yui/examples/dragdrop/grid.html
@ -0,0 +1,182 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+
+<body>
+
+<style type="text/css">
+body { background: url("img/grid.png") }
+
+#dragDiv1 { 
+    background:url(img/sq1.png) 0 0 no-repeat;background-color:#6D739A;
+    top:237px; left:113px;border:0px solid white;
+}
+
+#dragDiv2 {
+    background:url(img/sq2.png) 0 0 no-repeat;background-color:#566F4E;
+    top:362px; left:238px; border:0px solid white;
+}
+
+#dragDiv3 {
+    background:url(img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;
+    top:487px; left:363px; border:0px solid white;
+}
+
+</style>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+<script type="text/javascript">
+
+YAHOO.example.DDApp = function() {
+    var dd, dd2, dd3;
+    return {
+        init: function() {
+
+            dd = new YAHOO.util.DD("dragDiv1");
+            dd.setXConstraint(1000, 1000, 25);
+            dd.setYConstraint(1000, 1000, 25);
+
+            dd2 = new YAHOO.util.DD("dragDiv2");
+            dd2.setXConstraint(1000, 1000, 25);
+            dd2.setYConstraint(1000, 1000, 25);
+
+            dd3 = new YAHOO.util.DD("dragDiv3");
+            dd3.setXConstraint(1000, 1000, 25);
+            dd3.setYConstraint(1000, 1000, 25);
+        }
+    };
+} ();
+    
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
+    
+</script>
+v
+<div id="pageTitle">
+  <h3>Drag and Drop - YAHOO.util.DD</h3>
+</div>
+
+
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+<div id="content">
+  <form name="dragDropForm" action="javscript:;">
+    <div class="newsItem">
+      <h3>YAHOO.util.DD Grid</h3>
+      <p>&nbsp;</p>
+<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
+    </div>
+  </form>
+</div>
+
+      <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<div id="dragDiv1" class="testSquare">YAHOO.util.DD</div>
+<div id="dragDiv2" class="testSquare">YAHOO.util.DD</div>
+<div id="dragDiv3" class="testSquare">YAHOO.util.DD</div>
+
+</body>
+</html>
--- a/www/extras/yui/examples/dragdrop/img/GREYBG.PNG
+++ b/www/extras/yui/examples/dragdrop/img/GREYBG.PNG
--- a/www/extras/yui/examples/dragdrop/img/HEADER.GIF
+++ b/www/extras/yui/examples/dragdrop/img/HEADER.GIF
--- a/www/extras/yui/examples/dragdrop/img/bullet.gif
+++ b/www/extras/yui/examples/dragdrop/img/bullet.gif
--- a/www/extras/yui/examples/dragdrop/img/channel.png
+++ b/www/extras/yui/examples/dragdrop/img/channel.png
--- a/www/extras/yui/examples/dragdrop/img/circle.gif
+++ b/www/extras/yui/examples/dragdrop/img/circle.gif
--- a/www/extras/yui/examples/dragdrop/img/grid.png
+++ b/www/extras/yui/examples/dragdrop/img/grid.png
--- a/www/extras/yui/examples/dragdrop/img/hline.png
+++ b/www/extras/yui/examples/dragdrop/img/hline.png
--- a/www/extras/yui/examples/dragdrop/img/horizBg.png
+++ b/www/extras/yui/examples/dragdrop/img/horizBg.png
--- a/www/extras/yui/examples/dragdrop/img/horizSlider.png
+++ b/www/extras/yui/examples/dragdrop/img/horizSlider.png
--- a/www/extras/yui/examples/dragdrop/img/horizSlider_on.png
+++ b/www/extras/yui/examples/dragdrop/img/horizSlider_on.png
--- a/www/extras/yui/examples/dragdrop/img/hue.png
+++ b/www/extras/yui/examples/dragdrop/img/hue.png
--- a/www/extras/yui/examples/dragdrop/img/logo.gif
+++ b/www/extras/yui/examples/dragdrop/img/logo.gif
--- a/www/extras/yui/examples/dragdrop/img/lthumb.png
+++ b/www/extras/yui/examples/dragdrop/img/lthumb.png
--- a/www/extras/yui/examples/dragdrop/img/navHover2.png
+++ b/www/extras/yui/examples/dragdrop/img/navHover2.png
--- a/www/extras/yui/examples/dragdrop/img/pickerbg.png
+++ b/www/extras/yui/examples/dragdrop/img/pickerbg.png
--- a/www/extras/yui/examples/dragdrop/img/qbottom.png
+++ b/www/extras/yui/examples/dragdrop/img/qbottom.png
--- a/www/extras/yui/examples/dragdrop/img/qmiddle.png
+++ b/www/extras/yui/examples/dragdrop/img/qmiddle.png
--- a/www/extras/yui/examples/dragdrop/img/qtop.png
+++ b/www/extras/yui/examples/dragdrop/img/qtop.png
--- a/www/extras/yui/examples/dragdrop/img/select.gif
+++ b/www/extras/yui/examples/dragdrop/img/select.gif
--- a/www/extras/yui/examples/dragdrop/img/select.png
+++ b/www/extras/yui/examples/dragdrop/img/select.png
--- a/www/extras/yui/examples/dragdrop/img/sortList.png
+++ b/www/extras/yui/examples/dragdrop/img/sortList.png
--- a/www/extras/yui/examples/dragdrop/img/sq1.png
+++ b/www/extras/yui/examples/dragdrop/img/sq1.png
--- a/www/extras/yui/examples/dragdrop/img/sq2.png
+++ b/www/extras/yui/examples/dragdrop/img/sq2.png
--- a/www/extras/yui/examples/dragdrop/img/sq3.png
+++ b/www/extras/yui/examples/dragdrop/img/sq3.png
--- a/www/extras/yui/examples/dragdrop/img/vertBg.png
+++ b/www/extras/yui/examples/dragdrop/img/vertBg.png
--- a/www/extras/yui/examples/dragdrop/img/vertSlider.png
+++ b/www/extras/yui/examples/dragdrop/img/vertSlider.png
--- a/www/extras/yui/examples/dragdrop/img/vertSlider_on.png
+++ b/www/extras/yui/examples/dragdrop/img/vertSlider_on.png
--- a/www/extras/yui/examples/dragdrop/img/vline.png
+++ b/www/extras/yui/examples/dragdrop/img/vline.png
--- a/www/extras/yui/examples/dragdrop/index.html
+++ b/www/extras/yui/examples/dragdrop/index.html
@ -0,0 +1,81 @@
+
+<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+
+
+<body style="height:100%">
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="pageTitle">
+  <h3>Drag and Drop</h3>
+</div>
+<div id="content">
+  <form name="dragDropForm" action="javscript:;">
+    <div class="newsItem">
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+
+      <p><a href="drag.html?mode=dist">Drag test</a>:
+	  All three squares can be dragged, and are drop targets</p>
+
+      <p><a href="ontop.html?mode=dist">Always on top</a>: 
+	  Same as the drag test, except the object being dragged is 
+	  displayed on top of the others.</p>
+
+      <p><a href="proxy.html?mode=dist">Proxy drag</a>: 
+	  The actual element is not moved during a drag operation. 
+	  Instead, an absolutely positioned div (created once for all instances) is resized to the dimensions 
+	  of the linked element and moved to the location of the drag operation.
+	  </p>
+
+	<p><a href="list.html?mode=dist">Sortable list</a>: 
+		When a list item is dragged past the center
+		of another list item, it is inserted before that item.
+		The items in the first two columns can interact with items in the other
+		column.  The items in the third column are defined as a separate group,
+		so they can only interact with other items in the third column.
+	  </p>
+
+	   <p><a href="multihandle.html?mode=dist">Multiple drag handles</a>:
+       Shows how you can create multiple "hot spots" on your draggable item.
+	  </p>
+
+	  <p><a href="targetable.html?mode=dist">Targetable afforance</a>:
+        Demonstrates how multiple interaction groups and the events exposed
+        by the utility can be used to provide user feedback during the drag.
+	  </p>
+
+	  <p><a href="grid.html?mode=dist">Grid</a>:
+       Demonstrates the graduated movement feature of drag and drop.
+	  </p>
+
+	  <p><a href="resize.html?mode=dist">Resize</a>:
+       Demonstrates one approach to creating a draggable and resizable module.
+	  </p>
+
+	  <p><a href="circle.html?mode=dist">Custom Click Validator</a>:
+
+      In this example, we override clickValidator to provide custom logic for
+      determining if the initial mousedown should initiate a drag.  A drag is 
+      initiated only if the mousedown happens inside of the circle.  
+	  </p>
+
+	  <p>&nbsp;</p>
+    </div>
+  </form>
+</div>
+      <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
--- a/www/extras/yui/examples/dragdrop/interface.html
+++ b/www/extras/yui/examples/dragdrop/interface.html
@ -0,0 +1,151 @@
+  <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+  
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+<script type="text/javascript">
+	
+	var dd, dd2, dd3;
+	
+	function dragDropInit() {
+		dd = new YAHOO.util.DragDrop("dragDiv1");
+		dd2 = new YAHOO.util.DragDrop("dragDiv2");
+		dd3 = new YAHOO.util.DragDrop("dragDiv3");
+	}
+	
+	YAHOO.util.Event.addListener(window, "load", dragDropInit);
+	
+</script>
+<body>
+<div id="pageTitle">
+	<h3>Drag and Drop - YAHOO.util.DragDrop</h3>
+</div>
+
+
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+  <div id="content">
+    <form name="dragDropForm" action="javscript:;">
+	<div class="newsItem">
+	  <h3>No Implementation</h3>
+	  <p>By implementing the base drag and drop class, the manager class will
+      keep track of the element's virtual position, but not actually move anything.
+      You can click on any of the
+	  three squares and watch the various events that the Drag and Drop Manager fires in
+	  logger window.	  </p>
+	</div>
+	</form>
+  </div>
+
+        <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+ 
+	<div id="dragDiv1" class="testSquare" style="background:url(img/sq1.png) 0 0 no-repeat;background-color:#6D739A;top:240px; left:105px ">DragDrop</div>
+	<div id="dragDiv2" class="testSquare" style="background:url(img/sq2.png) 0 0 no-repeat;background-color:#566F4E;top:350px; left:215px">DragDrop</div>
+	<div id="dragDiv3" class="testSquare" style="background:url(img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;top:460px; left:325px">DragDrop</div>
+   
+    </body>
+  </html>
--- a/www/extras/yui/examples/dragdrop/js/DDList.js
+++ b/www/extras/yui/examples/dragdrop/js/DDList.js
@ -0,0 +1,172 @@
+
+(function() {
+
+var Dom = YAHOO.util.Dom;
+var Event = YAHOO.util.Event;
+var DDM = YAHOO.util.DragDropMgr;
+
+YAHOO.example.DDListItem = function(id, sGroup, config) {
+
+    if (id) {
+        this.init(id, sGroup, config);
+        this.initFrame();
+        this.logger = this.logger || YAHOO;
+    }
+
+    var el = this.getDragEl();
+    Dom.setStyle(el, "opacity", 0.67);
+    this.host= config && config.hostId;
+
+    this.setPadding(-4);
+    this.goingUp = false;
+    this.lastY = 0;
+};
+
+YAHOO.extend(YAHOO.example.DDListItem, YAHOO.util.DDProxy, {
+
+    startDrag: function(x, y) {
+        this.logger.log(this.id + " startDrag");
+
+        var dragEl = this.getDragEl();
+        var clickEl = this.getEl();
+        Dom.setStyle(clickEl, "visibility", "hidden");
+
+        dragEl.innerHTML = clickEl.innerHTML;
+
+
+        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
+        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
+        Dom.setStyle(dragEl, "border", "2px solid gray");
+    },
+
+    endDrag: function(e) {
+
+        var srcEl = this.getEl();
+        var proxy = this.getDragEl();
+        Dom.setStyle(proxy, "visibility", "visible");
+
+        // animate the proxy element to the src element's location
+        var a = new YAHOO.util.Motion( 
+            proxy, { 
+                points: { 
+                    to: Dom.getXY(srcEl)
+                }
+            }, 
+            0.3, 
+            YAHOO.util.Easing.easeOut 
+        )
+        var proxyid = proxy.id;
+        var id = this.id;
+        a.onComplete.subscribe(function() {
+                Dom.setStyle(proxyid, "visibility", "hidden");
+                Dom.setStyle(id, "visibility", "");
+            });
+        a.animate();
+    },
+
+    onDragDrop: function(e, id) {
+        YAHOO.log("DROP: " + id, "warn");
+    },
+
+    onDrag: function(e, id) {
+
+        // figure out which direction we are moving
+        var y = Event.getPageY(e);
+
+        if (y < this.lastY) {
+            this.goingUp = true;
+        } else if (y > this.lastY) {
+            this.goingUp = false;
+        }
+
+        this.lastY = y;
+        
+    },
+
+    onDragOver: function(e, id) {
+
+        
+    
+        var srcEl = this.getEl();
+        var destEl;
+
+        if ("string" == typeof id) { // POINT mode
+            destEl = Dom.get(id);
+        } else { // INTERSECT mode
+            destEl= YAHOO.util.DDM.getBestMatch(id).getEl();
+        }
+
+        var destDD = DDM.getDDById(destEl.id);
+
+        if (destDD.isContainer) {
+
+            if (this.isEmpty) {
+                destEl.appendChild(this.getEl());
+                this.isEmpty = false;
+                DDM.refreshCache();
+            }
+
+        } else {
+
+            var orig_p = srcEl.parentNode;
+            var p = destEl.parentNode;
+
+            //YAHOO.log("destEl: " + destEl.id, "error");
+            //YAHOO.log("p: " + p.id, "error");
+
+            if (this.goingUp) {
+                p.insertBefore(srcEl, destEl);
+            } else {
+                p.insertBefore(srcEl, destEl.nextSibling);
+            }
+
+            if (p != orig_p) {
+
+                // set the new parent
+                this.hostId = p.id;
+
+                // check to se if the original parent is empty
+                if (orig_p.getElementsByTagName("li").length === 0) {
+                    // mark the list dd instance empty
+                    DDM.getDDById(orig_p.id).isEmpty = true;
+                }
+
+                // the new parent can't be empty if it was previously
+                DDM.getDDById(p.id).isEmpty = false;
+            }
+
+            DDM.refreshCache();
+        }
+    },
+
+    onDragEnter: function(e, id) {
+    },
+
+    onDragOut: function(e, id) {
+    },
+
+    toString: function() {
+        return "DDListItem " + this.id;
+    }
+
+});
+
+
+YAHOO.example.DDList = function(id, sGroup, config) {
+
+    if (id) {
+        this.initTarget(id, sGroup, config);
+        this.logger = this.logger || YAHOO;
+    }
+
+    this.isContainer = true;
+    this.isEmpty = false;
+
+};
+
+YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
+
+
+});
+
+})();
--- a/www/extras/yui/examples/dragdrop/js/DDMy.js
+++ b/www/extras/yui/examples/dragdrop/js/DDMy.js
@ -0,0 +1,48 @@
+
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+/**
+ * @class a ygDDFramed implementation where the frame only moves vertically, and
+ * the DOM elements are swapped when one is dropped on another
+ *
+ * @extends YAHOO.util.DDProxy
+ * @constructor
+ * @param {String} id the id of the linked element
+ * @param {String} sGroup the group of related DragDrop objects
+ */
+YAHOO.example.DDMy = function(id, sGroup, config) {
+
+    if (id) {
+        this.init(id, sGroup, config);
+        this.initFrame();
+        this.logger = this.logger || YAHOO;
+    }
+
+    // The frame should only move vertically...  this makes it so the user can
+    // only move content channels up and down within a column
+    this.setXConstraint(0, 0);
+};
+
+// YAHOO.example.DDMy.prototype = new YAHOO.util.DDProxy();
+YAHOO.extend(YAHOO.example.DDMy, YAHOO.util.DDProxy);
+
+YAHOO.example.DDMy.prototype.onDragDrop = function(e, id) {
+    this.logger.log(this.id + " onDragDrop");
+
+    var el;
+
+    if ("string" == typeof id) {
+        el = YAHOO.util.DDM.getElement(id);
+    } else {
+        el = YAHOO.util.DDM.getBestMatch(id).getEl();
+    }
+
+    YAHOO.util.DDM.swapNode(this.getEl(), el);
+};
+
+YAHOO.example.DDMy.prototype.endDrag = function(e) {
+    // we default behavior is to move the element to the end point when
+    // the drag is ended.  In our case, we only want to move the element
+    // when it is dropped on another dd element.  To override the default,
+    // we simply need to create an empty endDrag function.
+};
--- a/www/extras/yui/examples/dragdrop/js/DDMy2.js
+++ b/www/extras/yui/examples/dragdrop/js/DDMy2.js
@ -0,0 +1,62 @@
+
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+/**
+ * @class a YAHHO.util.DDProxy implementation like DDMy, but the content 
+ * channels are * not restricted to one column, and we drag a miniature 
+ * representation of the * content channel rather than a frame of the channel.
+ *
+ * @extends YAHOO.util.DDProxy
+ * @constructor
+ * @param {String} id the id of the linked element
+ * @param {String} sGroup the group of related DragDrop objects
+ */
+YAHOO.example.DDMy2 = function(id, sGroup, config) {
+
+    if (id) {
+        this.init(id, sGroup, config);
+        this.initFrame();
+        this.logger = this.logger || YAHOO;
+    }
+
+    // Change the style of the frame to be a miniature representation of a
+    // content channel
+    var s = this.getDragEl().style;
+    s.background = "url(img/channel.png) 0 0 no-repeat";
+    s.height = "92px";
+    s.width = "100px";
+    // s.opacity = 0.66;
+    // s.filter = "alpha(opacity=66)";
+
+    // Specify that we do not want to resize the drag frame... we want to keep
+    // the drag frame the size of our miniature content channel image
+    //this.resizeFrame = false;
+
+    // Specify that we want the drag frame centered around the cursor rather 
+    // than relative to the click location so that the miniature content
+    // channel appears in the location that was clicked
+    // this.centerFrame = true;
+};
+
+// YAHOO.example.DDMy2.prototype = new YAHOO.util.DDProxy();
+YAHOO.extend(YAHOO.example.DDMy2, YAHOO.util.DDProxy);
+
+YAHOO.example.DDMy2.prototype.onDragDrop = function(e, id) {
+    this.logger.log(this.id + " onDragDrop");
+
+    var el;
+    if ("string" == typeof id) {
+        el = YAHOO.util.DDM.getElement(id);
+    } else {
+        el = YAHOO.util.DDM.getBestMatch(id).getEl();
+    }
+
+    YAHOO.util.DDM.swapNode(this.getEl(), el);
+};
+
+YAHOO.example.DDMy2.prototype.endDrag = function(e) {
+    // we default behavior is to move the element to the end point when
+    // the drag is ended.  In our case, we only want to move the element
+    // when it is dropped on another dd element.  To override the default,
+    // we simply need to create an empty endDrag function.
+};
--- a/www/extras/yui/examples/dragdrop/js/DDOnTop.js
+++ b/www/extras/yui/examples/dragdrop/js/DDOnTop.js
@ -0,0 +1,49 @@
+
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+/**
+ * @class a DragDrop implementation that moves the object as it is being dragged,
+ * and keeps the object being dragged on top.  This is a subclass of DD rather
+ * than DragDrop, and inherits the implementation of most of the event listeners
+ * from that class.
+ *
+ * @extends YAHOO.util.DD
+ * @constructor
+ * @param {String} id the id of the linked element
+ * @param {String} sGroup the group of related DragDrop items
+ */
+YAHOO.example.DDOnTop = function(id, sGroup, config) {
+    if (id) {
+        this.init(id, sGroup, config);
+        this.logger = this.logger || YAHOO;
+    }
+};
+
+// YAHOO.example.DDOnTop.prototype = new YAHOO.util.DD();
+YAHOO.extend(YAHOO.example.DDOnTop, YAHOO.util.DD);
+
+/**
+ * The inital z-index of the element, stored so we can restore it later
+ *
+ * @type int
+ */
+YAHOO.example.DDOnTop.prototype.origZ = 0;
+
+YAHOO.example.DDOnTop.prototype.startDrag = function(x, y) {
+    this.logger.log(this.id + " startDrag");
+
+    var style = this.getEl().style;
+
+    // store the original z-index
+    this.origZ = style.zIndex;
+
+    // The z-index needs to be set very high so the element will indeed be on top
+    style.zIndex = 999;
+};
+
+YAHOO.example.DDOnTop.prototype.endDrag = function(e) {
+    this.logger.log(this.id + " endDrag");
+
+    // restore the original z-index
+    this.getEl().style.zIndex = this.origZ;
+};
--- a/www/extras/yui/examples/dragdrop/js/DDPlayer.js
+++ b/www/extras/yui/examples/dragdrop/js/DDPlayer.js
@ -0,0 +1,164 @@
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+/////////////////////////////////////////////////////////////////////////
+
+/**
+ * @class a YAHOO.util.DDFramed implementation. During the drag over event, the
+ * dragged element is inserted before the dragged-over element.
+ *
+ * @extends YAHOO.util.DDProxy
+ * @constructor
+ * @param {String} id the id of the linked element
+ * @param {String} sGroup the group of related DragDrop objects
+ */
+YAHOO.example.DDPlayer = function(id, sGroup, config) {
+    this.initPlayer(id, sGroup, config);
+};
+
+// YAHOO.example.DDPlayer.prototype = new YAHOO.util.DDProxy();
+YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy);
+
+YAHOO.example.DDPlayer.TYPE = "DDPlayer";
+
+YAHOO.example.DDPlayer.prototype.initPlayer = function(id, sGroup, config) {
+    if (!id) { return; }
+
+    this.init(id, sGroup, config);
+    this.initFrame();
+
+    this.logger = this.logger || YAHOO;
+    var el = this.getDragEl()
+    YAHOO.util.Dom.setStyle(el, "borderColor", "transparent");
+    YAHOO.util.Dom.setStyle(el, "opacity", 0.76);
+
+    // specify that this is not currently a drop target
+    this.isTarget = false;
+
+    this.originalStyles = [];
+
+    this.type = YAHOO.example.DDPlayer.TYPE;
+    this.slot = null;
+
+    this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
+    this.logger.log(id + " startpos: " + this.startPos);
+};
+
+YAHOO.example.DDPlayer.prototype.startDrag = function(x, y) {
+    this.logger.log(this.id + " startDrag");
+    var Dom = YAHOO.util.Dom;
+
+    var dragEl = this.getDragEl();
+    var clickEl = this.getEl();
+
+    dragEl.innerHTML = clickEl.innerHTML;
+    dragEl.className = clickEl.className;
+
+    Dom.setStyle(dragEl, "color",  Dom.getStyle(clickEl, "color"));
+    Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
+
+    Dom.setStyle(clickEl, "opacity", 0.1);
+
+    var targets = YAHOO.util.DDM.getRelated(this, true);
+    this.logger.log(targets.length + " targets");
+    for (var i=0; i<targets.length; i++) {
+        
+        var targetEl = this.getTargetDomRef(targets[i]);
+
+        if (!this.originalStyles[targetEl.id]) {
+            this.originalStyles[targetEl.id] = targetEl.className;
+        }
+
+        targetEl.className = "target";
+    }
+};
+
+YAHOO.example.DDPlayer.prototype.getTargetDomRef = function(oDD) {
+    if (oDD.player) {
+        return oDD.player.getEl();
+    } else {
+        return oDD.getEl();
+    }
+};
+
+YAHOO.example.DDPlayer.prototype.endDrag = function(e) {
+    // reset the linked element styles
+    YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1);
+
+    this.resetTargets();
+};
+
+YAHOO.example.DDPlayer.prototype.resetTargets = function() {
+
+    // reset the target styles
+    var targets = YAHOO.util.DDM.getRelated(this, true);
+    for (var i=0; i<targets.length; i++) {
+        var targetEl = this.getTargetDomRef(targets[i]);
+        var oldStyle = this.originalStyles[targetEl.id];
+        if (oldStyle) {
+            targetEl.className = oldStyle;
+        }
+    }
+};
+
+YAHOO.example.DDPlayer.prototype.onDragDrop = function(e, id) {
+    // get the drag and drop object that was targeted
+    var oDD;
+    
+    if ("string" == typeof id) {
+        oDD = YAHOO.util.DDM.getDDById(id);
+    } else {
+        oDD = YAHOO.util.DDM.getBestMatch(id);
+    }
+
+    var el = this.getEl();
+
+    // check if the slot has a player in it already
+    if (oDD.player) {
+        // check if the dragged player was already in a slot
+        if (this.slot) {
+            // check to see if the player that is already in the
+            // slot can go to the slot the dragged player is in
+            // YAHOO.util.DDM.isLegalTarget is a new method
+            if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
+                this.logger.log("swapping player positions");
+                YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
+                this.slot.player = oDD.player;
+                oDD.player.slot = this.slot;
+            } else {
+                this.logger.log("moving player in slot back to start");
+                YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
+                this.slot.player = null;
+                oDD.player.slot = null
+            }
+        } else {
+            // the player in the slot will be moved to the dragged
+            // players start position
+            oDD.player.slot = null;
+            YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
+        }
+    } else {
+        // Move the player into the emply slot
+        // I may be moving off a slot so I need to clear the player ref
+        if (this.slot) {
+            this.slot.player = null;
+        }
+    }
+
+    YAHOO.util.DDM.moveToEl(el, oDD.getEl());
+    this.resetTargets();
+
+    this.slot = oDD;
+    this.slot.player = this;
+};
+
+YAHOO.example.DDPlayer.prototype.swap = function(el1, el2) {
+    var Dom = YAHOO.util.Dom;
+    var pos1 = Dom.getXY(el1);
+    var pos2 = Dom.getXY(el2);
+    Dom.setXY(el1, pos2);
+    Dom.setXY(el2, pos1);
+};
+
+YAHOO.example.DDPlayer.prototype.onDragOver = function(e, id) {};
+
+YAHOO.example.DDPlayer.prototype.onDrag = function(e, id) {};
+
--- a/www/extras/yui/examples/dragdrop/js/DDResize.js
+++ b/www/extras/yui/examples/dragdrop/js/DDResize.js
@ -0,0 +1,46 @@
+
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+/**
+ * @extends YAHOO.util.DragDrop
+ * @constructor
+ * @param {String} handle the id of the element that will cause the resize
+ * @param {String} panel id of the element to resize
+ * @param {String} sGroup the group of related DragDrop items
+ */
+YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
+    if (panelElId) {
+        this.init(panelElId, sGroup, config);
+        this.handleElId = handleElId;
+        this.setHandleElId(handleElId);
+        this.logger = this.logger || YAHOO;
+    }
+};
+
+// YAHOO.example.DDResize.prototype = new YAHOO.util.DragDrop();
+YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop);
+
+YAHOO.example.DDResize.prototype.onMouseDown = function(e) {
+    var panel = this.getEl();
+    this.startWidth = panel.offsetWidth;
+    this.startHeight = panel.offsetHeight;
+
+    this.startPos = [YAHOO.util.Event.getPageX(e),
+                     YAHOO.util.Event.getPageY(e)];
+};
+
+YAHOO.example.DDResize.prototype.onDrag = function(e) {
+    var newPos = [YAHOO.util.Event.getPageX(e),
+                  YAHOO.util.Event.getPageY(e)];
+
+    var offsetX = newPos[0] - this.startPos[0];
+    var offsetY = newPos[1] - this.startPos[1];
+
+    var newWidth = Math.max(this.startWidth + offsetX, 10);
+    var newHeight = Math.max(this.startHeight + offsetY, 10);
+
+    var panel = this.getEl();
+    panel.style.width = newWidth + "px";
+    panel.style.height = newHeight + "px";
+};
+
--- a/www/extras/yui/examples/dragdrop/js/DDResize2.js
+++ b/www/extras/yui/examples/dragdrop/js/DDResize2.js
@ -0,0 +1,106 @@
+
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+/**
+ * @extends YAHOO.util.DragDrop
+ * @constructor
+ * @param {String} handle the id of the element that will cause the resize
+ * @param {String} panel id of the element to resize
+ * @param {String} sGroup the group of related DragDrop items
+ */
+YAHOO.example.DDResize = function(panelElId, nwHandle, 
+        neHandle, seHandle, swHandle, sGroup, config) {
+    if (panelElId) {
+        this.init(panelElId, sGroup, config);
+        this.nwHandle = nwHandle;
+        this.neHandle = neHandle;
+        this.seHandle = seHandle;
+        this.swHandle = swHandle;
+        this.setHandleElId(nwHandle);
+        this.setHandleElId(neHandle);
+        this.setHandleElId(seHandle);
+        this.setHandleElId(swHandle);
+        this.logger = this.logger || YAHOO;
+    }
+};
+
+// YAHOO.example.DDResize.prototype = new YAHOO.util.DragDrop();
+YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop);
+
+YAHOO.example.DDResize.prototype.lockAspectRatio = false;
+
+YAHOO.example.DDResize.prototype.onMouseDown = function(e) {
+    var panel = this.getEl();
+    this.startWidth = panel.offsetWidth;
+    this.startHeight = panel.offsetHeight;
+    this.panelStartPos = YAHOO.util.Dom.getXY(panel);
+
+    this.aspectRatio = this.startWidth/this.startHeight;
+    this.direction = this.getDirection(YAHOO.util.Event.getTarget(e, true).id);
+    this.logger.log("direction " + this.direction);
+
+    this.startPos = [YAHOO.util.Event.getPageX(e),
+                     YAHOO.util.Event.getPageY(e)];
+};
+
+YAHOO.example.DDResize.prototype.onDrag = function(e) {
+    var newPos = [YAHOO.util.Event.getPageX(e),
+                  YAHOO.util.Event.getPageY(e)];
+
+    var offsetX = newPos[0] - this.startPos[0];
+    var offsetY = (this.lockAspectRatio) ? offsetX : newPos[1] - this.startPos[1];
+
+    var newWidth = Math.max(this.startWidth + offsetX, 10);
+    var newHeight = Math.max(this.startHeight + offsetY, 10);
+
+    var panel = this.getEl();
+
+
+    var panelPos = YAHOO.util.Dom.getXY(panel);
+    var movePos = [this.panelStartPos[0], this.panelStartPos[1]];
+    var doMove = false;
+
+    if (this.direction == "nw" || this.direction == "sw") {
+        movePos[0] = this.panelStartPos[0] + offsetX;
+        newWidth = Math.max(this.startWidth - offsetX, 10);
+        doMove = true;
+    }
+
+    if (this.direction == "ne" || this.direction == "nw") {
+        offsetY = newPos[1] - this.startPos[1];
+        offsetX = offsetY;
+        movePos[1] = this.panelStartPos[1] + offsetY;
+        newHeight = Math.max(this.startHeight - offsetY, 10);
+        newWidth = Math.max(this.startWidth - offsetX, 10);
+        doMove = true;
+    }
+
+
+    switch (this.direction) {
+        case "nw":
+            
+    }
+
+
+    if (doMove) {
+        YAHOO.util.Dom.setXY(panel, movePos);
+    }
+
+    panel.style.width = newWidth + "px";
+    panel.style.height = newHeight + "px";
+};
+
+YAHOO.example.DDResize.prototype.getDirection = function(handle) {
+    if (handle == this.nwHandle) {
+        return "nw";
+    } else if (handle == this.neHandle) {
+        return "ne";
+    } else if (handle == this.seHandle) {
+        return "se";
+    } else if (handle == this.swHandle) {
+        return "sw";
+    } else {
+        return null;
+    }
+}
+
--- a/www/extras/yui/examples/dragdrop/js/DDSwap.js
+++ b/www/extras/yui/examples/dragdrop/js/DDSwap.js
@ -0,0 +1,170 @@
+
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+/**
+ * @class a YAHOO.util.DDProxy implementation that swaps positions with the 
+ * target when dropped
+ *
+ * @extends YAHOO.util.DDProxy
+ * @constructor
+ * @param {String} id the id of the linked element
+ * @param {String} sGroup the group of related DragDrop items
+ */
+YAHOO.example.DDSwap = function(id, sGroup, config) {
+    this.swapInit(id, sGroup, config);
+};
+
+YAHOO.extend(YAHOO.example.DDSwap, YAHOO.util.DDProxy);
+
+YAHOO.example.DDSwap.prototype.swapInit = function(id, sGroup, config) {
+    if (!id) { return; }
+
+    this.init(id, sGroup, config);
+    this.initFrame();
+    this.logger = this.logger || YAHOO;
+
+    /**
+     * css style to use when items are not being hovered over.
+     */
+    this.offClass = "testSquare";
+
+    /**
+     * css style to use when hovered over
+     */
+    this.onClass = "testSquareOn";
+
+    /**
+     * cache of the elements we have changed the style so we can restore it
+     * later
+     */
+    this.els = [];
+
+};
+
+YAHOO.example.DDSwap.prototype.onDragDrop = function(e, id) {
+    var dd = YAHOO.util.DDM.getDDById(id);
+    this.swap(this.getEl(), dd.getEl());
+    this.resetConstraints();
+    dd.resetConstraints();
+};
+
+YAHOO.example.DDSwap.prototype.swap = function(el1, el2) {
+    this.logger.log(this.id + " onDragDrop swap");
+
+    // Swap out the position of the two objects.  This only works for absolutely
+    // positioned elements.  See for an implementation that 
+    // works for relatively positioned elements
+    var s1 = el1.style;
+    var s2 = el2.style;
+
+    var l = s1.left;
+    var t = s1.top;
+
+    s1.left = s2.left;
+    s1.top = s2.top;
+
+    s2.left = l;
+    s2.top = t;
+};
+
+YAHOO.example.DDSwap.prototype.onDragEnter = function(e, id) {
+    this.logger.log(this.id + " dragEnter " + id);
+
+    // store a ref so we can restore the style later
+    this.els[id] = true;
+
+    // set the mouseover style
+    var el = YAHOO.util.DDM.getElement(id);
+    if (el.className != this.onClass) {
+        el.className = this.onClass;
+    }
+};
+
+YAHOO.example.DDSwap.prototype.onDragOut = function(e, id) {
+    this.logger.log(this.id + " dragOut " + id);
+
+    // restore the style
+    YAHOO.util.DDM.getElement(id).className = this.offClass;
+};
+
+YAHOO.example.DDSwap.prototype.endDrag = function(e) {
+    this.logger.log(this.id + " endDrag");
+    this.resetStyles();
+
+    /*
+        var el = this.getDragEl();
+    el.style.visibility = ""; // show the element first
+    var position = [100, 100];
+    var duration = 0.4;
+    var oAnim = new YAHOO.util.Motion( 
+           el, { points: { to: position } }, duration, YAHOO.util.Easing.easeOut );
+
+    oAnim.onComplete.subscribe( function() { el.style.visibility = "hidden" } );
+*/
+
+
+};
+
+YAHOO.example.DDSwap.prototype.resetStyles = function() {
+    // restore all element styles
+    for (var i in this.els) {
+        var el = YAHOO.util.DDM.getElement(i);
+        if (el) { el.className = this.offClass; }
+    }
+};
+
+YAHOO.example.DDSwap.prototype.onDrag = function(e) { };
+
+YAHOO.example.DDSwap.prototype.onDragOver = function(e) { };
+
+
+//-------------------------------------------------------------------------
+// Intersect mode
+//-------------------------------------------------------------------------
+
+
+
+YAHOO.example.DDSwap_i = function(id, sGroup, strict) {
+    this.swapInit(id, sGroup);
+};
+
+YAHOO.example.DDSwap_i.prototype = new YAHOO.example.DDSwap();
+
+YAHOO.example.DDSwap_i.prototype.onDragDrop = function(e, dds) {
+    // this.logger.log(this.id + " onDragDrop swap");
+    var dd = YAHOO.util.DDM.getBestMatch(dds, this.strict);
+    this.swap(this.getEl(), dd.getEl());
+
+    this.resetConstraints();
+    dd.resetConstraints();
+};
+
+YAHOO.example.DDSwap_i.prototype.onDragEnter = function(e, dds) { 
+  // this.logger.log(this.id + " dragEnter " + id);
+};
+
+YAHOO.example.DDSwap_i.prototype.onDragOver = function(e, dds) {
+ 
+    this.resetStyles();
+
+    var dd = YAHOO.util.DDM.getBestMatch(dds, this.strict);
+
+    this.els[dd.id] = true;
+
+    // set the mouseover style
+    var el = dd.getEl();
+    if (el.className != this.onClass) {
+        el.className = this.onClass;
+    }
+ 
+};
+
+YAHOO.example.DDSwap_i.prototype.onDragOut = function(e, dds) {
+    // this.logger.log(this.id + " dragOut " + id);
+
+    // restore the style
+    for (var i=0; i<dds.length; ++i) {
+        dds[i].getEl().className = this.offClass;
+    }
+};
+
--- a/www/extras/yui/examples/dragdrop/js/color.js
+++ b/www/extras/yui/examples/dragdrop/js/color.js
@ -0,0 +1,2 @@
+
+
--- a/www/extras/yui/examples/dragdrop/js/key.js
+++ b/www/extras/yui/examples/dragdrop/js/key.js
@ -0,0 +1,34 @@
+/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
+
+YAHOO.util.Key = new function() {
+	// this.logger	= new ygLogger("ygEventUtil");
+	// DOM key constants 
+	this.DOM_VK_UNDEFINED               = 0x0;
+	this.DOM_VK_RIGHT_ALT               = 0x12;
+	this.DOM_VK_LEFT_ALT                = 0x12;
+	this.DOM_VK_LEFT_CONTROL            = 0x11;
+	this.DOM_VK_RIGHT_CONTROL           = 0x11;
+	this.DOM_VK_LEFT_SHIFT              = 0x10;
+	this.DOM_VK_RIGHT_SHIFT             = 0x10;
+	this.DOM_VK_META                    = 0x9D;
+	this.DOM_VK_BACK_SPACE              = 0x08;
+	this.DOM_VK_CAPS_LOCK               = 0x14;
+	this.DOM_VK_DELETE                  = 0x7F;
+	this.DOM_VK_END                     = 0x23;
+	this.DOM_VK_ENTER                   = 0x0D;
+	this.DOM_VK_ESCAPE                  = 0x1B;
+	this.DOM_VK_HOME                    = 0x24;
+	this.DOM_VK_NUM_LOCK                = 0x90;
+	this.DOM_VK_PAUSE                   = 0x13;
+	this.DOM_VK_PRINTSCREEN             = 0x9A;
+	this.DOM_VK_SCROLL_LOCK             = 0x91;
+	this.DOM_VK_SPACE                   = 0x20;
+	this.DOM_VK_TAB                     = 0x09;
+	this.DOM_VK_LEFT                    = 0x25;
+	this.DOM_VK_RIGHT                   = 0x27;
+	this.DOM_VK_UP                      = 0x26;
+	this.DOM_VK_DOWN                    = 0x28;
+	this.DOM_VK_PAGE_DOWN               = 0x22;
+	this.DOM_VK_PAGE_UP                 = 0x21;
+};
+
--- a/www/extras/yui/examples/dragdrop/js/log.js
+++ b/www/extras/yui/examples/dragdrop/js/log.js
@ -0,0 +1,20 @@
+// Adapter for YAHOO.widget.Logger
+
+var ygLogger = function(module) {
+    return new YAHOO.widget.LogWriter(module);
+};
+
+YAHOO.widget.LogWriter.prototype.debug = function() {
+    this.log.apply(this, arguments);
+};
+
+YAHOO.widget.LogWriter.prototype.setModuleName = function(source) {
+    this._source = source;
+};
+
+
+ygLogger.init = function(div) {
+   new YAHOO.widget.LogReader(div, { 
+            height: "400px" 
+        });
+};
--- a/www/extras/yui/examples/dragdrop/list.html
+++ b/www/extras/yui/examples/dragdrop/list.html
@ -0,0 +1,393 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+<style type="text/css">
+
+div.workarea { padding:10px; float:left }
+
+ul.draglist { 
+    position: relative;
+    width: 200px; 
+    height:300px;
+    background: #f7f7f7;
+    border: 1px solid gray;
+    list-style: none;
+    margin:0;
+    padding:0;
+}
+
+ul.draglist li {
+    margin: 1px;
+    cursor: move; 
+}
+
+ul.draglist_alt { 
+    position: relative;
+    width: 200px; 
+    list-style: none;
+    margin:0;
+    padding:0;
+    /*
+       The bottom padding provides the cushion that makes the empty 
+       list targetable.  Alternatively, we could leave the padding 
+       off by default, adding it when we detect that the list is empty.
+    */
+    padding-bottom:20px;
+}
+
+ul.draglist_alt li {
+    margin: 1px;
+    cursor: move; 
+}
+
+
+li.list1 {
+    background-color: #D1E6EC;
+    border:1px solid #7EA6B2;
+}
+
+li.list2 {
+    background-color: #D8D4E2;
+    border:1px solid #6B4C86;
+}
+
+#user_actions { float:right }
+
+</style> 
+
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
+<script type="text/javascript">
+
+(function() {
+
+var Dom = YAHOO.util.Dom;
+var Event = YAHOO.util.Event;
+var DDM = YAHOO.util.DragDropMgr;
+
+//////////////////////////////////////////////////////////////////////////////
+// example app
+//////////////////////////////////////////////////////////////////////////////
+YAHOO.example.DDApp = {
+    init: function() {
+
+        var rows=3,cols=2,i,j;
+        for (i=1;i<cols+1;i=i+1) {
+            new YAHOO.util.DDTarget("ul"+i);
+        }
+
+        for (i=1;i<cols+1;i=i+1) {
+            for (j=1;j<rows+1;j=j+1) {
+                new YAHOO.example.DDList("li" + i + "_" + j);
+            }
+        }
+
+        Event.on("showButton", "click", this.showOrder);
+        Event.on("switchButton", "click", this.switchStyles);
+    },
+
+    showOrder: function() {
+        var parseList = function(ul, title) {
+            var items = ul.getElementsByTagName("li");
+            var out = title + ": ";
+            for (i=0;i<items.length;i=i+1) {
+                out += items[i].id + " ";
+            }
+            return out;
+        };
+
+        var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");
+        alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2"));
+
+    },
+
+    switchStyles: function() {
+        Dom.get("ul1").className = "draglist_alt";
+        Dom.get("ul2").className = "draglist_alt";
+    }
+};
+
+//////////////////////////////////////////////////////////////////////////////
+// custom drag and drop implementation
+//////////////////////////////////////////////////////////////////////////////
+
+YAHOO.example.DDList = function(id, sGroup, config) {
+
+    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
+
+    this.logger = this.logger || YAHOO;
+    var el = this.getDragEl();
+    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
+
+    this.goingUp = false;
+    this.lastY = 0;
+};
+
+YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
+
+    startDrag: function(x, y) {
+        this.logger.log(this.id + " startDrag");
+
+        // make the proxy look like the source element
+        var dragEl = this.getDragEl();
+        var clickEl = this.getEl();
+        Dom.setStyle(clickEl, "visibility", "hidden");
+
+        dragEl.innerHTML = clickEl.innerHTML;
+
+        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
+        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
+        Dom.setStyle(dragEl, "border", "2px solid gray");
+    },
+
+    endDrag: function(e) {
+
+        var srcEl = this.getEl();
+        var proxy = this.getDragEl();
+
+        // Show the proxy element and animate it to the src element's location
+        Dom.setStyle(proxy, "visibility", "");
+        var a = new YAHOO.util.Motion( 
+            proxy, { 
+                points: { 
+                    to: Dom.getXY(srcEl)
+                }
+            }, 
+            0.2, 
+            YAHOO.util.Easing.easeOut 
+        )
+        var proxyid = proxy.id;
+        var thisid = this.id;
+
+        // Hide the proxy and show the source element when finished with the animation
+        a.onComplete.subscribe(function() {
+                Dom.setStyle(proxyid, "visibility", "hidden");
+                Dom.setStyle(thisid, "visibility", "");
+            });
+        a.animate();
+    },
+
+    onDragDrop: function(e, id) {
+
+        // If there is one drop interaction, the li was dropped either on the list,
+        // or it was dropped on the current location of the source element.
+        if (DDM.interactionInfo.drop.length === 1) {
+
+            // The position of the cursor at the time of the drop (YAHOO.util.Point)
+            var pt = DDM.interactionInfo.point; 
+
+            // The region occupied by the source element at the time of the drop
+            var region = DDM.interactionInfo.sourceRegion; 
+
+            // Check to see if we are over the source element's location.  We will
+            // append to the bottom of the list once we are sure it was a drop in
+            // the negative space (the area of the list without any list items)
+            if (!region.intersect(pt)) {
+                var destEl = Dom.get(id);
+                var destDD = DDM.getDDById(id);
+                destEl.appendChild(this.getEl());
+                destDD.isEmpty = false;
+                DDM.refreshCache();
+            }
+
+        }
+    },
+
+    onDrag: function(e) {
+
+        // Keep track of the direction of the drag for use during onDragOver
+        var y = Event.getPageY(e);
+
+        if (y < this.lastY) {
+            this.goingUp = true;
+        } else if (y > this.lastY) {
+            this.goingUp = false;
+        }
+
+        this.lastY = y;
+    },
+
+    onDragOver: function(e, id) {
+    
+        var srcEl = this.getEl();
+        var destEl = Dom.get(id);
+
+        // We are only concerned with list items, we ignore the dragover
+        // notifications for the list.
+        if (destEl.nodeName.toLowerCase() == "li") {
+            var orig_p = srcEl.parentNode;
+            var p = destEl.parentNode;
+
+            if (this.goingUp) {
+                p.insertBefore(srcEl, destEl); // insert above
+            } else {
+                p.insertBefore(srcEl, destEl.nextSibling); // insert below
+            }
+
+            DDM.refreshCache();
+        }
+    }
+});
+
+Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
+
+})();
+
+</script>
+
+<body>
+
+<div id="pageTitle"><h3>Drag and Drop - DDProxy</h3></div>
+  
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+  <div id="content">
+    <form name="dragDropForm" action="javscript:;">
+    <div class="newsItem">
+      <span id="user_actions">
+        <input type="button" id="showButton" value="Show Current Order" />
+        <input type="button" id="switchButton" value="Remove List Background" />
+      </span>
+      <h3>Sortable List - POINT mode</h3>
+        <p>
+        In the sortable list example, we extend DDProxy instead of DD
+        so that we can use the source element as the "insertion point". 
+        When the drag starts, the proxy element style and content is
+        adjusted to match the source element, and visibility:hidden is
+        applied to the source element.
+        </p><p>
+        To facilitate dragging into an empty list, we make the two list
+        elements DDTargets.  When interacting with the list items, we
+        will get two notifications (one for the list, one for the list
+        item).  We ignore all dragOver events that happen on the list 
+        and ignore all dragDrop events unless the drop was in the 
+        list's negative space (not over another list item).
+        </p>
+
+      <div class="workarea">
+        <h3>List 1</h3>
+        <ul id="ul1" class="draglist">
+          <li class="list1" id="li1_1">list 1, item 1</li>
+          <li class="list1" id="li1_2">list 1, item 2</li>
+          <li class="list1" id="li1_3">list 1, item 3</li>
+        </ul>
+      </div>
+
+      <div class="workarea">
+        <h3>List 2</h3>
+        <ul id="ul2" class="draglist">
+          <li class="list2" id="li2_1">list 2, item 1</li>
+          <li class="list2" id="li2_2">list 2, item 2</li>
+          <li class="list2" id="li2_3">list 2, item 3</li>
+        </ul>
+      </div>
+
+    </div>
+    </form>
+  </div>
+        <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+  </body>
+</html>
+ 
--- a/www/extras/yui/examples/dragdrop/multihandle.html
+++ b/www/extras/yui/examples/dragdrop/multihandle.html
@ -0,0 +1,166 @@
+  <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+  
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+<script type="text/javascript" src="js/DDOnTop.js" ></script>
+
+<script type="text/javascript">
+
+YAHOO.example.DDApp = function() {
+    var dd, dd3, logger;
+    return {
+        init: function() {
+            dd = new YAHOO.example.DDOnTop("dragDiv1");
+            dd.setHandleElId("handle1");
+            dd.setHandleElId("handle2");
+            dd3 = new YAHOO.util.DDTarget("dragDiv3");
+        }
+    };
+} ();
+    
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
+    
+</script>
+<body>
+<div id="pageTitle">
+    <h3>Drag and Drop - DD, DDTarget</h3>
+</div>
+
+
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+  <div id="content">
+    <form name="dragDropForm" action="javscript:;">
+    <div class="newsItem">
+      <h3>Multiple Drag Handles</h3>
+      <p>
+      &nbsp;
+      </p>
+<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
+
+    </div>
+    </form>
+  </div>
+    
+      <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+    <div id="dragDiv1" style="position:absolute;color:white;background-color:#594178;top:240px; left:105px;height:200px;width:200px;z-index:2;padding:4px">
+        <div id="handle1" style="text-align:center;margin-right:14px;cursor:move;float:left;color:black;width:90px;background-color:#eeeeee;border:1px solid black ">handle1</div>
+        <div id="handle2" style="text-align:center;cursor:move;float:right;color:black;width:90px;background-color:#eeeeee;border:1px solid black ">handle2</div>
+        <p>
+        
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nec turpis. Vestibulum gravida suscipit libero. Integer id sapien. Nullam tempus, lorem quis rutrum consectetuer, erat massa vehicula nisl, eu pulvinar lacus diam ac orci
+        
+        </p>
+    </div>
+
+    <div id="dragDiv3" class="testSquare" style="background-color:#000000;top:460px; left:325px;cursor:default;z-index:0">DDTarget</div>
+    
+  </body>
+</html>
+ 
--- a/www/extras/yui/examples/dragdrop/ontop.html
+++ b/www/extras/yui/examples/dragdrop/ontop.html
@ -0,0 +1,208 @@
+  <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+  
+<body>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+        <script type="text/javascript" src="js/DDOnTop.js" ></script>
+
+<script type="text/javascript" language="JavaScript">
+
+YAHOO.example.DDApp = function() {
+    var dd, dd2, dd3;
+
+    return {
+        init: function() {
+            dd = new YAHOO.example.DDOnTop("dragDiv1");
+            dd.addInvalidHandleId("excludeid3");
+            dd.addInvalidHandleClass("excludeclass2");
+
+            dd2 = new YAHOO.example.DDOnTop("dragDiv2");
+            // dd2.setPadding(-10);
+            // dd2.setXConstraint(100, 100);
+            // dd2.setYConstraint(0, 0);
+
+            dd3 = new YAHOO.example.DDOnTop("dragDiv3");
+        }
+    };
+} ();
+
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
+    
+</script>
+<style type="text/css">
+
+#dragDiv1 {
+    background:url(img/sq1.png) 0 0 no-repeat;
+    background-color:#6D739A;top:240px; left:105px;
+}
+#excludeid1 {
+    position:absolute; top:20px; left:20px;height:20px;width:20px;
+    background-color:#333333;
+}
+#excludeid2 {
+    position:absolute; top:40px; left:40px;height:20px;width:20px;
+    background-color:#333333;
+}
+#excludeid3 {
+    position:absolute; top:60px; left:60px;height:20px;width:20px;
+    background-color:#333333;
+}
+#maskDiv {
+    position: absolute; top:0px; left: 0px; width:100px; height:20px;
+}
+
+#dragDiv2 {
+    background:url(img/sq2.png) 0 0 no-repeat;background-color:#566F4E;
+    top:350px; left:215px;
+}
+
+#dragDiv3 {
+    background:url(img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;
+    top:460px; left:325px;
+}
+
+</style>
+<div id="pageTitle"><h3>Drag and Drop - DD</h3></div>
+
+  
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+  <div id="content">
+    <form name="dragDropForm" action="javscript:;">
+    <div class="newsItem">
+      <h3>Dragged object is on top</h3>
+      <p>
+        This example is identical to the basic drag and drop implementation, 
+        YAHOO.util.DD,
+        but we have extended it so that the square that is being dragged is positioned
+        on top of the others.
+      </p>
+<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
+      <div id="workArea">&nbsp;</div>
+      <p>&nbsp;</p>
+    </div>
+    </form>
+  </div>
+    
+        <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+    <div id="dragDiv1" class="testSquare">
+        DDOnTop
+        <div id="excludeid1" class="excludeclass1">&nbsp;</div>
+        <div id="excludeid2" class="excludeclass2">&nbsp;</div>
+        <div id="excludeid3" class="excludeclass1">&nbsp;</div>
+        <div id="maskDiv">&nbsp;</div>
+    </div>
+    <div id="dragDiv2" class="testSquare">
+        <a href="#">DDOnTop</a>
+    </div>
+    <div id="dragDiv3" class="testSquare">DDOnTop</div>
+ 
+  </body>
+</html>
--- a/www/extras/yui/examples/dragdrop/proxy.html
+++ b/www/extras/yui/examples/dragdrop/proxy.html
@ -0,0 +1,293 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+
+<body>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+        <script type="text/javascript" src="js/DDSwap.js" ></script>
+
+<script type="text/javascript" language="JavaScript">
+
+YAHOO.example.DDApp = function() {
+    var dd, dd2, dd3;
+
+    function handleKeypress(e) {
+        alert("asdf");
+        YAHOO.log("keypress");
+        YAHOO.util.Event.stopEvent(e);
+        e.cancel = true;
+        return false;
+    }
+
+    function initPointMode() {
+
+        YAHOO.log("point mode");
+
+        unreg();
+
+        YAHOO.util.DDM.mode = YAHOO.util.DDM.POINT;
+
+        dd = new YAHOO.example.DDSwap("dragDiv1", "proxytest");
+        // dd.setPadding(10);
+        //dd.setXConstraint(0,0);
+
+        dd2 = new YAHOO.example.DDSwap("dragDiv2", "proxytest");
+        dd2.addInvalidHandleType("input");
+        // dd2.setPadding(10, 20, 30, 40);
+        // dd2.setXConstraint(0,0);
+
+        // the third DD instance uses its own proxy element
+        dd3 = new YAHOO.example.DDSwap("dragDiv3", "proxytest",
+                    { dragElId: "dragDiv4", 
+                    centerFrame: true, resizeFrame: false });
+                    //{ dragElId: "dragDiv4" });
+        // dd3.setPadding(10, 40);
+        // dd3.setPadding(10, 0, 20, 40);
+
+
+    }
+
+    function initIntersectMode(strict) {
+
+        YAHOO.log("intersect mode");
+
+        unreg();
+
+        if (strict) {
+            YAHOO.util.DDM.mode = YAHOO.util.DDM.STRICT_INTERSECT;
+        } else {
+            YAHOO.util.DDM.mode = YAHOO.util.DDM.INTERSECT;
+        }
+
+        dd = new YAHOO.example.DDSwap_i("dragDiv1");
+        //dd.setPadding(10);
+
+        dd2 = new YAHOO.example.DDSwap_i("dragDiv2");
+        dd2.addInvalidHandleType("input");
+        //dd2.setPadding(10, 20, 30, 40);
+        // dd2.setXConstraint(0,0);
+
+        dd3 = new YAHOO.example.DDSwap_i("dragDiv3");
+        // dd3.setPadding(10, 40);
+        //dd3.setPadding(10, 0, 20, 40);
+    }
+
+    function unreg() {
+        if (dd) dd.unreg();
+        if (dd2) dd2.unreg();
+        if (dd3) dd3.unreg();
+    }
+
+    return {
+        init: function() {
+
+            // YAHOO.util.Event.on("testtext", "keydown", handleKeypress);
+            initPointMode();
+        },
+
+        lock: function() { 
+            dd.lock(); 
+            dd2.setXConstraint(100, 100);
+            dd2.setYConstraint(100, 100);
+        },
+
+        unlock: function() { 
+            dd.unlock(); 
+        },
+
+        changeMode: function(val) {
+            if (val ==1) {
+                initIntersectMode(false);
+            } else if (val == 2) {
+                initIntersectMode(true);
+            } else {
+                initPointMode();
+            }
+        },
+
+        unreg: function() {
+            dd.unreg();
+        }
+
+    };
+}();
+
+
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
+
+</script>
+
+<div id="pageTitle">
+    <h3>Drag and Drop - DDProxy</h3>
+</div>
+
+  
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+  <div id="content">
+    <form name="dragDropForm" action="javscript:;">
+    <div class="newsItem">
+      <h3>Proxy</h3>
+
+      <!--
+      <a href="javascript:YAHOO.util.DDM._onUnload()">Unload test</a>
+      <a href="javascript:YAHOO.example.DDApp.lock()">lock</a>
+      <a href="javascript:YAHOO.example.DDApp.unlock()">unlock</a>
+      <a href="javascript:YAHOO.example.DDApp.unreg()">Unreg test</a>
+      -->
+      <p>
+        This example builds on
+        <a href="../test/test_draggable.php?mode=
+Notice: Undefined index:  mode in /Library/WebServer/Documents/DragDrop.dev/examples/proxy.php on line 142
+">YAHOO.util.DD</a>.
+        Instead of moving the actual html element that was clicked, we have a hidden
+        layer, empty aside from a border, absolutely positioned, that we place in the same 
+        location of the clicked object.  The onDrag event handler was implemented so
+        that the style of the DragDrop elements change when they interact.  The onDragDrop
+        event handler was implemented so that the elements swap positions if one is dropped
+        on another.
+        Mode: 
+        <select onchange="YAHOO.example.DDApp.changeMode(this.selectedIndex)">
+          <option value="0" selected>Point</option>
+          <option value="1">Intersect</option>
+          <option value="2">Strict Intersect</option>
+        </select>
+<!--
+        <input name="testtext" id="testtext" type="text" />
+-->
+
+      </p>
+
+<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
+    </div>
+    </form>
+  </div>
+    
+        <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+  
+<!--
+<div id="wrapperDiv" style="position:relative;width:400px;top:200px;height:200px;overflow:auto">
+-->
+
+<div id="dragDiv1" class="testSquare" style="background:url(img/sq1.png) 0 0 no-repeat;background-color:#6D739A;top:270px; left:105px ">DDSwap</div>
+<div id="dragDiv2" class="testSquare" style="background:url(img/sq2.png) 0 0 no-repeat;background-color:#566F4E;top:350px; left:215px">
+DDSwap
+<!--
+<input type="text" name="testinput" />
+-->
+</div>
+<div id="wrapperDiv">
+  <div id="dragDiv3" class="testSquare" style="background:url(img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;top:430px; left:325px">DDSwap</div>
+</div>
+
+  <div id="dragDiv4" class="testSquare" style="visibility:hidden;border:0px solid black;height: 141px;width:160px;background-color:#7E5B60;top:630px; left:525px;height:50px;width:50px">a custom proxy element</div>
+<!--
+</div>
+-->
+</body>
+</html>
--- a/www/extras/yui/examples/dragdrop/resize.html
+++ b/www/extras/yui/examples/dragdrop/resize.html
@ -0,0 +1,195 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+  
+<body>
+
+
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+
+        <script type="text/javascript" src="js/DDResize.js" ></script>
+
+<script type="text/javascript">
+YAHOO.example.DDApp = function() {
+    var dd, dd2, dd3;
+    return {
+        init: function() {
+            dd = new YAHOO.example.DDResize("panelDiv", "handleDiv", "panelresize");
+            dd2 = new YAHOO.util.DD("panelDiv", "paneldrag");
+            dd2.addInvalidHandleId("handleDiv");
+            
+        }
+    };
+} ();
+
+function testclick(e) {
+    alert("click");
+}
+    
+// var resizer_dd1 = new YAHOO.util.DD("theimage");                                                                                                      
+// resizer_dd1.setYConstraint(0,0); 
+
+// YAHOO.util.Event.addListener("theimage", "mousedown", testclick);
+
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
+    
+</script>
+
+<div id="pageTitle"><h3>Drag and Drop - DD</h3></div>
+
+  
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+  <div id="content">
+    <form name="dragDropForm" action="javscript:;">
+      <h3>Resize</h3>
+     
+<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
+    <div id="panelDiv">&nbsp;
+        <div id="handleDiv"></div>
+    </div>     
+      
+      <p>&nbsp;</p>
+
+
+
+    </form>
+  </div>
+    
+
+<style type="text/css">
+    #panelDiv {
+        position:relative; 
+        height: 300px; 
+        width: 150px;
+        top:80px; 
+        left:105px; 
+        border:1px solid #333333;
+        background-color: #f7f7f7;
+    }
+
+    #handleDiv {
+        position: absolute; 
+        bottom:0px; 
+        right: 0px; 
+        width:10px; 
+        height:10px;
+        background-color:blue;
+        font-size: 1px;
+    }
+
+    #theimage {
+        position:absolute;top:10px;left:10px;
+    }
+</style>
+<!--
+<table>
+  <tr>
+    <td>
+      <img id='theimage' src='img/lthumb.png' />
+    </td>
+  </tr>
+</table>
+-->
+
+<!--
+ <div id="theimage" style="position:absolute;top:50px;height:10px;width:10px;background-color:red">asdf</div>
+ -->
+</body>
+</html>
--- a/www/extras/yui/examples/dragdrop/slider.html
+++ b/www/extras/yui/examples/dragdrop/slider.html
@ -0,0 +1,576 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
+		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
+		xmlns:x2="http://www.w3.org/TR/xhtml2"
+		xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
+		xmlns:state="http://www.w3.org/2005/07/aaa">
+<head>
+<title>Yahoo! UI Library - Slider Widget</title>
+<link rel="stylesheet" type="text/css" href="css/screen.css">
+<style type="text/css">
+</style>
+</head>
+<body> 
+<div id="pageTitle"><h3>Drag and Drop - Slider Widgets</h3></div> 
+
+<div id="container">
+  <div id="containerTop">
+    <div id="header"><img src="img/logo.gif" vspace="4" hspace="4" /></div>
+	<div id="main">
+
+		<div id="content"> 
+		  <div class="newsItem"> 
+			<h3>Basic Sliders</h3>
+			  <p>
+				The slider widget is an implementation of YAHOO.util.DragDrop 
+				It also will use YAHOO.util.Animation if available to
+				animate the movement of the thumb when you click the 
+				slider background.
+
+				The only difference between the two sliders aside from
+				the fact that one is vertical and one horizontal is that 
+				the horizontal slider implements the "tick mark" feature
+				of drag and drop; it will "snap" to the tick marks spaced
+				25 pixels apart.
+			  </p>
+              <!--
+			  <p>
+				<a href="javascript:slider1.lock()">Lock</a>
+				<a href="javascript:slider1.unlock()">Unlock</a>
+			  </p>
+              -->
+
+              <div id="vertWrapper">
+              <div 
+                 id="vertBGDiv"
+                 name="vertBGDiv"
+                 tabindex="0" 
+                 x2:role="role:slider" 
+                 state:valuenow="0" 
+                 state:valuemin="0" 
+                 state:valuemax="200"
+                 title="Vertical Slider" 
+                 onkeypress="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
+               >
+              <div id="vertHandleDiv"><img src="img/vertSlider.png"></div> 
+              </div>
+
+                <div id="vertValueDiv">
+                    <form name="formV" onsubmit="return updateVert()">
+                    <input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
+                    <input type="button" value="Update" onclick="updateVert()" />
+                    </form>
+                </div>
+
+
+              </div>
+ 
+           <div id="horizWrapper">
+           <div
+             id="horizBGDiv"
+             name="horizBGDiv"
+             tabindex="0" 
+             x2:role="role:slider" 
+             state:valuenow="0" 
+             state:valuemin="-100" 
+             state:valuemax="100"
+             title="Horizontal Slider" 
+             onkeypress="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
+           >
+             <div id="horizHandleDiv" ><img src="img/horizSlider.png"></div> 
+
+          </div> 
+
+            <div id="horizValueDiv">
+                <form name="formH" onsubmit="return updateHoriz()">
+                <input name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
+                <input type="button" value="Update" onclick="updateHoriz()" />
+                </form>
+            </div>
+
+
+          </div>
+
+     
+		</div> 
+      
+    </div>
+  </div>
+</div>
+
+<div id="content"> 
+    <h3>Color Picker</h3>
+      <p>
+      Implements a slider region and a vertical slider to implement an HSV color
+      picker.
+      </p>
+
+        <div id="pickerPanel" class="dragPanel">
+            <h4 id="pickerHandle">&nbsp;</h4>
+            <div id="pickerDiv">
+              <img id="pickerbg" src="img/pickerbg.png" alt="">
+              <div id="selector"><img src="img/select.gif"></div> 
+            </div>
+
+             <div id="hueBg">
+              <div id="hueThumb"><img src="img/hline.png"></div> 
+            </div> 
+
+            <div id="pickervaldiv">
+                <form name="pickerform" onsubmit="return pickerUpdate()">
+                <br />
+                R <input name="pickerrval" id="pickerrval" type="text" value="0" size="3" maxlength="3" />
+                H <input name="pickerhval" id="pickerhval" type="text" value="0" size="3" maxlength="3" />
+                <br />
+                G <input name="pickergval" id="pickergval" type="text" value="0" size="3" maxlength="3" />
+                S <input name="pickergsal" id="pickersval" type="text" value="0" size="3" maxlength="3" />
+                <br />
+                B <input name="pickerbval" id="pickerbval" type="text" value="0" size="3" maxlength="3" />
+                V <input name="pickervval" id="pickervval" type="text" value="0" size="3" maxlength="3" />
+                <br />
+                <br />
+                # <input name="pickerhexval" id="pickerhexval" type="text" value="0" size="6" maxlength="6" />
+                <br />
+
+                </form>
+            </div>
+
+            <div id="pickerSwatch">&nbsp;</div>
+        </div>
+
+
+		</div> 
+      
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+<script type="text/javascript" src="../../build/logger/logger.js" ></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js" ></script>
+<script type="text/javascript" src="js/color.js" ></script>
+<script type="text/javascript" src="js/key.js" ></script>
+<script type="text/javascript" src="../../build/animation/animation.js" ></script>
+<script type="text/javascript" src="../../build/slider/slider.js" ></script>
+<script type="text/javascript">
+
+	var hue;
+	var picker;
+	var dd1, dd2;
+	var r, g, b;
+
+	function init() {
+        standardSliderInit();
+        // rgbInit();
+        pickerInit();
+    }
+
+    // Picker ---------------------------------------------------------
+
+    function pickerInit() {
+		hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
+		hue.onChange = function(newVal) { hueUpdate(newVal); };
+
+		picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 
+				0, 180, 0, 180);
+		picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
+
+		hueUpdate();
+
+		dd1 = new YAHOO.util.DD("pickerPanel");
+		dd1.setHandleElId("pickerHandle");
+		dd1.endDrag = function(e) {
+			// picker.thumb.resetConstraints();
+			// hue.thumb.resetConstraints(); 
+        };
+	}
+
+	window.onload = init;
+
+	function pickerUpdate(newX, newY) {
+		pickerSwatchUpdate();
+	}
+
+	function hueUpdate(newVal) {
+
+		var h = (180 - hue.getValue()) / 180;
+		if (h == 1) { h = 0; }
+
+		YAHOO.log("hue " + hue.getValue());
+
+		var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
+
+		document.getElementById("pickerDiv").style.backgroundColor = 
+			"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
+
+		pickerSwatchUpdate();
+	}
+
+	function pickerSwatchUpdate() {
+		var h = (180 - hue.getValue());
+		if (h == 180) { h = 0; }
+		document.getElementById("pickerhval").value = (h*2);
+
+		h = h / 180;
+		YAHOO.log("h " + hue.getValue());
+
+		var s = picker.getXValue() / 180;
+		document.getElementById("pickersval").value = Math.round(s * 100);
+
+		YAHOO.log("s " + s);
+
+		var v = (180 - picker.getYValue()) / 180;
+		document.getElementById("pickervval").value = Math.round(v * 100);
+
+		YAHOO.log("v " + v);
+
+		var a = YAHOO.util.Color.hsv2rgb( h, s, v );
+
+		document.getElementById("pickerSwatch").style.backgroundColor = 
+			"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
+
+		document.getElementById("pickerrval").value = a[0];
+		document.getElementById("pickergval").value = a[1];
+		document.getElementById("pickerbval").value = a[2];
+		document.getElementById("pickerhexval").value = 
+			YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
+	}
+
+
+    // RGB slider ---------------------------------------------------------
+
+	function rgbInit() {
+
+		r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
+		r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
+
+		g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
+		g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
+
+		b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
+		b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
+
+		initColor();
+
+		dd2 = new YAHOO.util.DD("rgbPanel");
+		dd2.setHandleElId("rgbHandle");
+		dd2.endDrag = function(e) {
+			// r.thumb.resetConstraints();
+			// g.thumb.resetConstraints();
+			// b.thumb.resetConstraints();
+		}
+	}
+
+
+	function initColor() {
+		var ch = " ";
+
+		d = document.createElement("P");
+		d.className = "rb";
+		r.getEl().appendChild(d);
+		d = document.createElement("P");
+		d.className = "rb";
+		g.getEl().appendChild(d);
+		d = document.createElement("P");
+		d.className = "rb";
+		b.getEl().appendChild(d);
+
+		for (var i=0; i<34; i++) {
+			d = document.createElement("SPAN");
+			d.id = "rBG" + i
+			// d.innerHTML = ch;
+			r.getEl().appendChild(d);
+
+			d = document.createElement("SPAN");
+			d.id = "gBG" + i
+			// d.innerHTML = ch;
+			g.getEl().appendChild(d);
+
+			d = document.createElement("SPAN");
+			d.id = "bBG" + i
+			// d.innerHTML = ch;
+			b.getEl().appendChild(d);
+		}
+
+		d = document.createElement("P");
+		d.className = "lb";
+		r.getEl().appendChild(d);
+		d = document.createElement("P");
+		d.className = "lb";
+		g.getEl().appendChild(d);
+		d = document.createElement("P");
+		d.className = "lb";
+		b.getEl().appendChild(d);
+
+		userUpdate();
+	}
+
+	function updateSliderColors() {
+		var curr, curg, curb;
+		curr = Math.min(r.getValue() * 2, 255);
+		curg = Math.min(g.getValue() * 2, 255);
+		curb = Math.min(b.getValue() * 2, 255);
+
+        YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);
+
+		var d;
+		for (var i=0; i<34; i++) {
+			d = document.getElementById("rBG" + i);
+			d.style.backgroundColor = 
+				"rgb(" + (i*8) + "," + curg + "," + curb + ")";
+
+			d = document.getElementById("gBG" + i);
+			d.style.backgroundColor = 
+				"rgb(" + curr + "," + (i*8) + "," + curb + ")";
+
+			d = document.getElementById("bBG" + i);
+			d.style.backgroundColor = 
+				"rgb(" + curr + "," + curg + "," + (i*8) + ")";
+		}
+
+		document.getElementById("rgbSwatch").style.backgroundColor =
+			"rgb(" + curr + "," + curg + "," + curb + ")";
+
+		document.getElementById("hexval").value = 
+					YAHOO.util.Color.rgb2hex(curr, curg, curb);
+	}
+
+
+	function listenerUpdate(whichSlider, newVal) {
+		if (newVal == 256) {
+			newVal = 255;
+		}
+		document.getElementById(whichSlider + "val").value = newVal;
+		updateSliderColors();
+	}
+
+	function userUpdate(isHex) {
+        YAHOO.log("userupdate");
+		var v;
+		var f = document.forms['rgbform'];
+
+		if (isHex) {
+			var hexval = f["hexval"].value;
+			// shorthand #369
+			if (hexval.length == 3) {
+				var newval = "";
+				for (var i=0;i<3;i++) {
+					var a = hexval.substr(i, 1);
+					newval += a + a;
+				}
+
+				hexval = newval;
+			}
+
+			YAHOO.log("hexval:" + hexval);
+
+			if (hexval.length != 6) {
+				alert("illegal hex code: " + hexval);
+			} else {
+				var rgb = YAHOO.util.Color.hex2rgb(hexval);
+				// alert(rgb.toString());
+				if (YAHOO.util.Color.isValidRGB(rgb)) {
+					f['rval'].value = rgb[0];
+					f['gval'].value = rgb[1];
+					f['bval'].value = rgb[2];
+				}
+			}
+		}
+
+		// red
+		v = parseFloat(f['rval'].value);
+		v = ( isNaN(v) ) ? 0 : Math.round(v);
+		r.setValue(Math.round(v) / 2);
+
+		v = parseFloat(f['gval'].value);
+		v = ( isNaN(v) ) ? 0 : Math.round(v);
+		g.setValue(Math.round(v) / 2);
+
+		v = parseFloat(f['bval'].value);
+		v = ( isNaN(v) ) ? 0 : Math.round(v);
+		b.setValue(Math.round(v) / 2);
+
+		updateSliderColors();
+
+		return false;
+	}
+
+	function userReset() {
+		var v;
+		var f = document.forms['rgbform'];
+
+		r.setValue(0);
+		g.setValue(0);
+		b.setValue(0);
+	}
+
+var slider1, slider2;
+	function standardSliderInit() {
+
+		slider1 = YAHOO.widget.Slider.getVertSlider("vertBGDiv", "vertHandleDiv", 0, 200);
+
+		slider1.onChange = function(offsetFromStart) {
+			document.getElementById("vertVal").value = offsetFromStart;
+		}
+
+		slider2 = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100, 25);
+
+		slider2.onChange = function(offsetFromStart) {
+			document.getElementById("horizVal").value = offsetFromStart;
+		}
+
+        // if (document.getElementById("vertBGDiv").getAttributeNS) {
+            // slider1.focusOnClick = true;
+            // slider2.focusOnClick = true;
+        // }
+	}
+
+	function updateVert() {
+		var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
+		if ( isNaN(v) ) v = 0;
+		slider1.setValue(Math.round(v));
+		return false;
+	}
+	
+	function updateHoriz() {
+		var v = parseFloat(document.forms['formH']['horizVal'].value, 10);
+		if ( isNaN(v) ) v = 0;
+		slider2.setValue(Math.round(v));
+		return false;
+	}
+
+// accessibility keypress test
+function handleHorizSliderKey(slider, ev) {
+    YAHOO.log("horizontal slider keypress");
+
+    // Firefox 1.5+ only at this point
+    if (!slider.getAttributeNS) {
+        return true;
+    }
+
+	// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
+
+	var valueNow = slider2.getValue();
+
+	var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
+	var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
+
+	var delta = 0;
+
+	var kc = ev.keyCode;
+
+	YAHOO.log("keycode: " + kc);
+
+	if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
+		delta = -25;
+	} else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
+		delta = 25;
+	} else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
+		delta = -( valueNow - valueMin );
+	} else if (kc == YAHOO.util.Key.DOM_VK_END) {
+		delta = valueMax - valueNow;
+	} else {
+		return true;
+	}
+	
+	valueNow += delta;
+
+	slider2.setValue(valueNow, true);
+
+	slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
+	
+	// displaySlider(slider);
+
+	return false;
+}
+
+function handleVertSliderKey(slider, ev) {
+	YAHOO.log("vertical slider keypress");
+
+    // Firefox 1.5+ only at this point
+    if (!slider.getAttributeNS) {
+        return true;
+    }
+
+	// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
+
+	var valueNow = slider1.getValue();
+
+	var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
+	var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
+
+	var delta = 0;
+	var kc = ev.keyCode;
+	if (kc == YAHOO.util.Key.DOM_VK_UP) {
+		delta = -20;
+	}
+	else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
+		delta = 20;
+	}
+	else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
+		delta = -( valueNow - valueMin );
+	}
+	else if (kc == YAHOO.util.Key.DOM_VK_END) {
+		delta = valueMax - valueNow;
+	}
+	else {
+		return true;
+	}
+	
+	valueNow += delta;
+	if (valueNow < valueMin) {
+		valueNow = valueMin;
+	}
+
+	if (valueNow > valueMax) {
+		valueNow = valueMax;
+	}  
+	slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
+	
+	// displaySlider(slider);
+	slider1.setValue(valueNow, true);
+
+	return false;
+}
+
+</script>
+
+
+<!--[if gte IE 5.5000]>
+<script type="text/javascript">
+
+function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
+   {
+   for(var i=0; i<document.images.length; i++)
+      {
+	  var img = document.images[i]
+	  var imgName = img.src.toUpperCase()
+	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
+	     {
+		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
+		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
+		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
+		 var imgStyle = "display:inline-block;" + img.style.cssText 
+		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
+		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
+		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
+		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
+		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
+		 img.outerHTML = strNewHTML
+		 i = i-1
+	     }
+      }
+   }
+
+YAHOO.util.Event.addListener(window, "load", correctPNG);
+
+</script>
+<![endif]-->
+
+</body>
+</html>
--- a/www/extras/yui/examples/dragdrop/targetable.html
+++ b/www/extras/yui/examples/dragdrop/targetable.html
@ -0,0 +1,219 @@
+  <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>Yahoo! UI Library - Drag and Drop</title>
+<link rel="stylesheet" type="text/css" href="./css/screen.css">
+</head>
+  
+<script type="text/javascript" src="../../build/yahoo/yahoo-min.js" ></script>
+<script type="text/javascript" src="../../build/event/event-min.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
+<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
+
+<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
+
+        <script type="text/javascript" src="js/DDPlayer.js" ></script>
+<script type="text/javascript">
+YAHOO.example.DDApp = function() {
+    var slots = [];
+    var players = [];
+    var Event = YAHOO.util.Event;
+    var DDM = YAHOO.util.DDM;
+    return {
+
+        remove: function() {
+            players[4].removeFromGroup("bottomslots");
+        },
+
+        init: function() {
+            
+            // slots
+            slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
+            slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
+            slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
+            slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
+            slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
+            slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
+            
+            // players
+            players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
+            players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
+            players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
+            players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
+            players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
+            players[4].addToGroup("bottomslots");
+            players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
+            players[5].addToGroup("bottomslots");
+
+            DDM.mode = document.getElementById("ddmode").selectedIndex;
+        }
+
+    };
+} ();
+
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
+//YAHOO.util.Event.addListener("removeButton", "click", YAHOO.example.DDApp.remove);
+
+</script>
+<body>
+<div id="pageTitle"><h3>Drag and Drop - DDProxy</h3></div>
+
+  
+<style type="text/css">
+
+/* logger default styles */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
+/* width is controlled here: default 31em */
+.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
+.yui-log p {margin:1px;padding:.1em;}
+.yui-log button {font-family:monospace;}
+.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
+.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-ft .yui-log-categoryfilters {}
+.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.yui-log .yui-log-filtergrp {margin-right:.5em;}
+.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
+.yui-log .warn {background-color:#F58516;} /* F58516 orange */
+.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
+.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
+.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
+
+
+</style>
+
+
+<img id="ylogo" src="img/logo.gif" />
+
+<div id="container">
+<div id="containerTop">
+<div id="header">
+<h4>&nbsp;</h4>
+</div>
+<div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="drag.html?mode=dist">Drag test</a></li>
+<li><a href="ontop.html?mode=dist">Always on top</a></li>
+<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
+<li><a href="list.html?mode=dist">Sortable list</a> </li>
+<!--
+<li><a href="slider.html?mode=dist">Slider</a></li>
+-->
+<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
+<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
+<li><a href="grid.html?mode=dist">Grid</a></li>
+<li><a href="resize.html?mode=dist">Resize pane</a></li>
+<li><a href="circle.html?mode=dist">Custom click validator</a></li>
+
+</ul>
+</div> 
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+    YAHOO.example.logApp =  {
+
+       reader: null,
+
+       init:  function() {
+            if (YAHOO.widget.Logger) {
+                this.reader = new YAHOO.widget.LogReader( "logDiv", 
+                        { newestOnTop: true, height: "400px" } );
+
+                this.reader._onClickPauseBtn(null, this.reader);
+            }
+        }
+    };
+
+    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
+
+//]]>
+</script>
+
+</h4>
+<div id="logDiv"></div>
+</div>
+
+
+</div>
+
+  <div id="content">
+    <form name="dragDropForm" action="javscript:;">
+    <div class="newsItem">
+      <h3>Multiple groups, targetable affordance</h3>
+      <p> 
+        Mode: 
+        <select id="ddmode" onchange="YAHOO.util.DDM.mode = this.selectedIndex">
+          <option value="0" selected>Point</point>
+          <option value="1">Intersect</point>
+        </select>
+      </p>
+<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>
+      <div id="workArea">&nbsp;</div>
+      <p>
+     <!-- 
+<input id="removeButton" type="button" value="remove" />
+-->
+      </p>
+    </div>
+    </form>
+  </div>
+    
+        <div id="footerContainer">
+        <div id="footer">
+          <p>&nbsp;</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<style type="text/css">
+    .slot { border:2px solid #aaaaaa; background-color:#dddddd; color:#666666; text-align:center; position: absolute; width:60px; height:60px; }
+    .player { border:2px solid #bbbbbb; color:#eeeeee; text-align:center; position: absolute; width:60px; height:60px; }
+    .target { border:2px solid #574188; background-color:#cccccc; text-align:center; position: absolute; width:60px; height:60px; }
+
+    #t1 { left: 90px; top: 167px; }
+    #t2 { left: 458px; top: 167px; }
+    #b1 { left: 164px; top: 230px; }
+    #b2 { left: 238px; top: 230px; }
+    #b3 { left: 312px; top: 230px; }
+    #b4 { left: 386px; top: 230px; }
+    
+    #pt1 { background-color:#7E695E; left: 164px; top: 350px; }
+    #pt2 { background-color:#7E695E; left: 164px; top: 430px; }
+    #pb1 { background-color:#416153; left: 275px; top: 350px; }
+    #pb2 { background-color:#416153; left: 275px; top: 430px; }
+    #pboth1 { background-color:#552E37; left: 386px; top: 350px; }
+    #pboth2 { background-color:#552E37; left: 386px; top: 430px; }
+</style>
+
+<div class="slot" id="t1" >1</div>
+<div class="slot" id="t2" >2</div>
+<div class="slot" id="b1" >3</div>
+<div class="slot" id="b2" >4</div>
+<div class="slot" id="b3" >5</div>
+<div class="slot" id="b4" >6</div>
+
+<div class="player" id="pt1" >1</div>
+<div class="player" id="pt2" >2</div>
+<div class="player" id="pb1" >3</div>
+<div class="player" id="pb2" >4</div>
+<div class="player" id="pboth1" >5</div>
+<div class="player" id="pboth2" >6</div>
+
+
+</body>
+</html>
				`@ -0,0 +1 @@`
				`#container { float: none; } #header h1 { margin-left: 24px; } #content { margin-left: 25px; } #pageTitle {top:10px;}`