<%@ Page Language="C#" MasterPageFile="~/Admin/Posts/Posts.Master" AutoEventWireup="true" CodeBehind="UpdateThumbnailImage.aspx.cs" Inherits="EnjooSite.Web.Admin.Posts.UpdateThumbnailImage" Title="EnjooSite Admin - Edit Posts" %>


<asp:Content ID="Content_Head" ContentPlaceHolderID="ContentPlaceHoder_Head" runat="server">
    <style type="text/css">
    <!--

    /*************************************/
    /* Cropper CSS                       */

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

    #resizeme_containment_div_wrapper {
       position: relative;
    }


    -->
    </style>
    <script type="text/javascript" src="<%= VirtualPathUtility.ToAbsolute("~/Scripts/jquery.ui.all.min.js") %>" ></script>
    <script type="text/javascript">
        var _productImageID = '<%= ThumbnailImage.ClientID  %>';
    
        var _topID = '<%= TextBox_Top.ClientID  %>';
        var _leftID = '<%= TextBox_Left.ClientID  %>';
        var _widthID = '<%= TextBox_Width.ClientID  %>';
        var _heightID = '<%= TextBox_Height.ClientID  %>';
        
            
    $().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: 80,
		    minHeight: 80,
		    resize: function(e, ui) {
			    var self = $(this).data("resizable");
    			this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
			    $("#log-top").html(self.position.top+"px");
                $("#log-left").html(self.position.left+"px");
                $("#log-height").html(self.size.height+"px");
                $("#log-width").html(self.size.width+"px");
                
                $("#" + _topID ).val( self.position.top );
                $("#" + _leftID ).val( self.position.left );
                $("#" + _heightID ).val( self.size.height );
                $("#" + _widthID ).val( self.size.width );
                
            },
		    stop: function(e, ui) {
			    var self = $(this).data("resizable");
  		      this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
  	        }
  	    })
  	    .draggable({
            cursor: 'move',
            containment: $('#resizeme_containment_div_wrapper'),
            drag: function(e, ui) {
			    var self = $(this).data("draggable");
			    this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
                $("#log-top").html(self.position.top+"px");
                $("#log-left").html(self.position.left+"px");
                
                
                $("#" + _topID ).val( self.position.top );
                $("#" + _leftID ).val( self.position.left );
                
            }
        });

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

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

        $("#log-width").html($('#resizeme_containment_div').width()+"px");
        
        $("#" + _heightID ).val( $('#resizeme_containment_div').height() );
        $("#" + _widthID ).val( $('#resizeme_containment_div').width() );

     });
     
         
    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;
    };
     
    $(window).load(function(){
        var _productImageURL = $("#" + _productImageID ).attr("src");
        var size = getSizeImg( _productImageURL ) ;
        
       	$('#resizeme_containment_div').css('background', 'transparent url(' + _productImageURL  + ') 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(' + _productImageURL + ') no-repeat scroll 0%' } );

    });
    
    
    
    function thumb_resize(imageElement, max) {
        var elem = imageElement;

        if (elem == undefined || elem == null) return false;
        var orig_width = elem.width;
        var orig_height = elem.height;

        if (max == undefined) max = 150;
        if (elem.width > elem.height) {
            if (elem.width > max) { 
                elem.width = max; 
                elem.height = orig_height*(max/orig_width);
            }
        } else {
            if (elem.height > max) 
            { 
                elem.height = max; elem.width = orig_width*(max/orig_height);
            };
        }
    } 




    </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="postsContent" runat="server">

    <div style="display:none;">
        <asp:Image ID="ThumbnailImage" runat="server" />
    </div>


        <div id="resizeme_containment_div_wrapper">
            <div id="resizeme_containment_wrap_image"></div>
            <div id="resizeme_containment_div"></div>
        </div>
        
        
        <div id="break" style="display:none;">
            <div>
                <asp:TextBox ID="TextBox_Top" runat="server" Text="0"></asp:TextBox>
                <asp:TextBox ID="TextBox_Left" runat="server" Text="0"></asp:TextBox>
                <asp:TextBox ID="TextBox_Width" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox_Height" runat="server"></asp:TextBox>
            </div>
            <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>
            <asp:Button ID="SavePostThumbnailImageButton" runat="server" Text="保存" OnClick="SavePostThumbnailImageButton_Click" />
        </div>
</asp:Content>
