<!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/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../../source/ui.core.js"></script>
<script type="text/javascript" src="../../../source/ui.resizable.js"></script>
<script type="text/javascript" src="../../../source/ui.draggable.js"></script>

<script type="text/javascript" src="../../../source/effects.core.js"></script>
<script type="text/javascript" src="../../../source/effects.bounce.js"></script>
<script type="text/javascript" src="../../../source/effects.scale.js"></script>


<style type="text/css">
<!--
/*************************************/
/* Real-World CSS                    */

@import "../../css/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                       */

#resizeme_containment_wrap_image {
  position: relative;
}
#resizeme_containment_div {
    position: absolute;
    top:0px;
    left:0px;
    width: 150px;
    height:150px;
}

#resizeme_containment_div_wrapper {
   position: relative;
}


-->
</style>
<script type="text/javascript">
    var getSizeImg = function(src) {
        var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
        var size = [ timg.get(0).offsetWidth, timg.get(0).offsetHeight ];
        
        try { document.body.removeChild(timg[0]); }
        catch(e) {};

        return size;
    };

  $().ready(function(){

	$('#resizeme_containment_div').resizable({

		containment: $('#resizeme_containment_div_wrapper'),

		//proxy: 'proxy',

		//ghost: true,

		//animate:true,

		handles: 'all',
		
		knobHandles: true,

		//transparent: true,

		//aspectRatio: true,

		autoHide: true,

		minWidth: 100,

		minHeight: 100,

		resize: function(e, ui) {

  		  this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';

		  $("#log-top").html(ui.instance.position.top+"px");

		  $("#log-left").html(ui.instance.position.left+"px");

		  $("#log-height").html(ui.instance.size.height+"px");

		  $("#log-width").html(ui.instance.size.width+"px");

  	    },
		stop: function(e, ui) {

  		  this.style.backgroundPosition = '-' + (ui.instance.position.left) + 'px -' + (ui.instance.position.top) + 'px';
  	    }
	})

	.draggable({

		cursor: 'move',

		containment: $('#resizeme_containment_div_wrapper'),

		drag: function(e, ui) {

			this.style.backgroundPosition = '-' + (ui.position.left) + 'px -' + (ui.position.top) + 'px';

		  $("#log-top").html(ui.instance.position.top+"px");

		  $("#log-left").html(ui.instance.position.left+"px");

		}

	});

    	$('.thumbs').find("li a").click(function(e){
    
    	  $('#resizeme_containment_div').css('top', '0');

    	  $('#resizeme_containment_div').css('left', '0');
          
          var size = getSizeImg($(this).find("img").attr("src"));

    	  $('#resizeme_containment_wrap_image').css( { width: size[0], height: size[1], background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%' } );
          $('#resizeme_containment_div_wrapper').css( { width: size[0], height: size[1] } );
    	  $('#resizeme_containment_div').css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px');

          return false;

    	});


    	$('#resizeme_containment_wrap_image').css({ opacity: 0.5 });

        $("#log-height").html($('#resizeme_containment_div').height()+"px");

        $("#log-width").html($('#resizeme_containment_div').width()+"px");

     });
     
     $(window).load(function(){
        var size = getSizeImg("img/img01.jpg");
       	$('#resizeme_containment_div').css('background', 'transparent url(img/img01.jpg) no-repeat scroll 0px 0px');
       	$('#resizeme_containment_div_wrapper').css( { width: size[0], height: size[1] } );
        $('#resizeme_containment_wrap_image').css( { width: size[0], height: size[1], background: 'transparent url(img/img01.jpg) no-repeat scroll 0%' } );

       });
</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="resizeme_containment_div_wrapper">
                    <div id="resizeme_containment_wrap_image"></div>
                    <div id="resizeme_containment_div"></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>