New 'libraries' folder in root instalation directory

libraries/jquery.ui/demos/real-world/image-cropper/image-cropper.css

@@ -0,0 +1,68 @@
+
+/*************************************/
+/* Real-World CSS                    */
+
+@import "real-world.css";
+
+/*************************************/
+/* Demo CSS                          */
+
+#sidebar div {
+    text-align:center;
+}
+.thumb ul {
+    padding:10px 0 0 0;
+}
+.thumbs li {
+    margin:4px 20px;
+}
+.thumbs li a,
+.thumbs li a img{
+    height: 75px;
+    width: 75px;
+    display: block;
+}
+.thumbs li a:hover,
+.thumbs li a:hover img{
+    height: 130px;
+    width: 130px;
+}
+.thumbs li a:hover {
+    border: 4px solid #E8EEF7;
+}
+
+#break strong {
+    margin:0 0 4px 0;
+}
+#break ul {
+    padding:6px;
+}
+#break ul li {
+    padding:3px 0px;
+    font-style: italic;
+}
+#break ul li span {
+    font-style: normal;
+}
+
+.ui-resizable-knob {
+	border: 1px #fff dashed;
+}
+
+/*************************************/
+/* Cropper CSS                       */
+
+#_Container_Image, #\\_Container\\_Image {
+  position: relative;
+}
+#_Container, #\\_Container {
+    position: absolute;
+    top:0px;
+    left:0px;
+    width: 150px;
+    height:150px;
+}
+
+#_Wrapper, #\\_Wrapper {
+   position: relative;
+}

libraries/jquery.ui/demos/real-world/image-cropper/image-cropper.js

@@ -0,0 +1,90 @@
+   var getSizeImg = function(src) {
+        var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
+        var size = {width: timg.get(0).offsetWidth, height: timg.get(0).offsetHeight };
+        
+        try { document.body.removeChild(timg[0]); }
+        catch(e) {};
+
+        return size;
+    };
+
+$().ready(function(){
+
+	$('#_Container').resizable({
+		containment: $('#_Wrapper'),
+		handles: 'all',
+		knobHandles: true,
+		autoHide: true,
+		minWidth: 100,
+		minHeight: 100,
+		resize: function(event, ui){
+			var self = $(this).data("resizable"),
+				imageSize = $('#_Container').data("image-size"),
+				top = self.position.top, 
+				height = ((self.position.top + self.size.height) <= imageSize.height ? self.size.height : imageSize.height),
+				left = self.position.left,
+				width = ((self.position.left + self.size.width) <= imageSize.width ? self.size.width : imageSize.width);
+
+			left = left > 0 ? left : 0;
+			top = top > 0 ? top : 0;
+			
+			var bgPos = '-' + (left + 1) + 'px -' + (top + 1) + 'px';
+
+			//the borders of the resize rect are offsetting the bg pos incorrectly. subtract (add, since its a negative) 1 to fix.
+			$(this).css({backgroundPosition: bgPos});
+
+			$("#log-top").html(top + "px");
+			$("#log-height").html(height + "px");
+			$("#log-left").html(left + "px");
+			$("#log-width").html(width + "px");
+		},
+		stop: function(event, ui){
+			var self = $(this).data("resizable"),
+				top = self.position.top,
+				left = self.position.left;
+
+			left = left > 0 ? left : 0;
+			top = top > 0 ? top : 0;
+
+  		$(this).css({backgroundPosition: ((left + 1) * -1) + 'px ' + ((top + 1) * -1) + 'px'});
+		}
+	})
+	.draggable({
+		cursor: 'move',
+		containment: $('#_Wrapper'),
+		drag: function(event, ui){
+			var self = $(this).data("draggable");
+			$(this).css({backgroundPosition: ((self.position.left + 1) * -1) + 'px ' + ((self.position.top + 1) * -1) + 'px'});
+
+			$("#log-top").html(self.position.top+"px");
+			$("#log-left").html(self.position.left+"px");
+		}
+	});
+
+	$('.thumbs')
+		.find("li a")
+		.click(function(event){
+		  $('#_Container').css({top: '0', left: '0'});
+      
+      var size = getSizeImg($(this).find("img").attr("src"));
+
+	  	$('#_Container_Image').css({
+	  		width: size.width, 
+	  		height: size.height, 
+	  		background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%' 
+	  	});
+	  	
+      $('#_Wrapper').css({ width: size.width, height: size.height });
+	  	$('#_Container')
+	  		.css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px')
+	  		.data("image-size", size);
+
+      return false;
+		});
+
+	$('#_Container_Image').css({ opacity: 0.5 });
+  $("#log-height").html($('#_Container').height()+"px");
+  $("#log-width").html($('#_Container').width()+"px");
+  
+  $(".thumbs li a:first").click();
+});

libraries/jquery.ui/demos/real-world/image-cropper/index.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Language" content="en" />
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<title>Image Cropper: jQuery Real-world Demo</title>
+
+	<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
+
+	<script type="text/javascript" src="../../../ui/effects.core.js"></script>
+	<script type="text/javascript" src="../../../ui/effects.bounce.js"></script>
+	<script type="text/javascript" src="../../../ui/effects.scale.js"></script>
+
+	<link href="image-cropper.css" type="text/css" rel="stylesheet" />
+	
+	<script type="text/javascript" src="image-cropper.js"></script>
+</head>
+<body>
+    <div id="sidebar">
+        <ul class="thumbs">
+            <li><a href="#" title="Open This Image"><img src="img/img01.jpg"/></a></li>
+            <li><a href="#" title="Open This Image"><img src="img/img02.jpg"/></a></li>
+            <li><a href="#" title="Open This Image"><img src="img/img03.jpg"/></a></li>
+            <li><a href="#" title="Open This Image"><img src="img/img04.jpg"/></a></li>
+            <li><a href="#" title="Open This Image"><img src="img/img05.jpg"/></a></li>
+        </div>
+    </div>
+    <div id="main">
+        <div id="header">
+            <h2>jQuery Real-world Demo: Image Cropper</h2>
+        </div>
+        <div id="content">
+                <div id="_Wrapper">
+                    <div id="_Container_Image"></div>
+                    <div id="_Container"></div>
+                </div>
+        </div>
+        <div id="break">
+            <strong>Properties:</strong>
+            <ul>
+                <li>width: <span id="log-width">0px</span></li>
+                <li>height: <span id="log-height">0px</span></li>
+                <li>top: <span id="log-top">0px</span></li>
+                <li>left: <span id="log-left">0px</span></li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>

libraries/jquery.ui/demos/real-world/image-cropper/real-world.css

@@ -0,0 +1,104 @@
+/*************************************/
+/* Blueprint: reset.css              */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 100%;
+	font-family: inherit;
+	vertical-align: baseline;
+}
+
+/* Remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+body {
+	line-height: 1;
+	color: black;
+	background: white;
+}
+ol, ul {
+	list-style: none;
+}
+
+/* Tables still need 'cellspacing="0"' in the markup. */
+table {
+	border-collapse: separate;
+	border-spacing: 0;
+}
+caption, th, td {
+	text-align: left;
+	font-weight: normal;
+}
+
+/* Remove possible quote marks (") from <q>, <blockquote>. */
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: "";
+}
+blockquote, q {
+	quotes: "" "";
+}
+
+.clear {
+    clear:both;
+}
+
+/*************************************/
+/* Layout                            */
+body, html {
+	height: 100%;
+    font-family:sans-serif;
+    font-size:13px;
+    margin:0px;
+    padding:0px;
+}
+body, html {
+	height: 100%;
+    font-family:sans-serif;
+    font-size:13px;
+    
+}
+#main {
+    height:auto;
+    background: #E8EEF7;
+    border-left:1px solid #ccc;
+    border-bottom:1px solid #ccc;
+    margin:0 0 0 200px;
+}
+	#header {
+	    height:30px;
+	    padding:10px;
+	    font-size:2em;
+	    font-weight:bold;
+		text-align: center;
+	    border-bottom:1px solid #ccc;
+        background: #E8EEF7;
+	}
+	#main #content {
+	    padding:10px;
+        background: #FFF;
+	}
+    #main #break {
+	    padding:10px;
+	    border-top:1px solid #ccc;
+    }
+#sidebar {
+    float:left;
+    width:200px;
+    height:100%;
+    border-right:1px solid #ccc;
+}
+    #sidebar div {
+        padding:10px;
+    }