<%@ Page Language="C#" MasterPageFile="~/Admin/WebUI/AdminPageTemplate.Master" AutoEventWireup="true" CodeBehind="ProfileIcon.aspx.cs" Inherits="EnjooSite.Web.Admin.Pages.ProfileIcon" Title="Change Icon" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_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 = '<%= UserProfileImage.ClientID  %>';
    
        var _topID = '<%= TextBox_Top.ClientID  %>';
        var _leftID = '<%= TextBox_Left.ClientID  %>';
        var _widthID = '<%= TextBox_Width.ClientID  %>';
        var _heightID = '<%= TextBox_Height.ClientID  %>';

        $(function(e) {
            $(String.format("#{0}", '<%= SaveUserIconButton.ClientID %>')).click(function(e) {
                if ($(String.format("#{0}", '<%= UserIconFileUpload.ClientID %>')).val().trim() == "") {
                    alert("请选择合适的图像文件！");
                    return false;
                }
            });
        })
            
        $().ready(function(){
        if( isUploaded ){
            $('#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(){
        if( isUploaded ){
            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="LocationContent" ContentPlaceHolderID="ContentLocationContentPlace" runat="server">
    <ul class="vList content_location clearfix">
        <li>
            <b><%= UIText.GetSafeText("Label_Location_Text")%></b>
        </li>
        <li>
            <a class="admin-home" href='<%= UrlHelper.AdminUrl %>' title='<%= UIText.GetSafeText("Label_AdminCenter_Text")%>'><span><%= UIText.GetSafeText("Label_AdminCenter_Text")%></span></a>
        </li>
        <li class="vSeparate">
            <span>»</span>
        </li>
        <li>
            <label><%= UIText.GetSafeText("Label_UserAvatarEdit_Text")%></label>
        </li>
        <li style="float:right;">
            <label>上次更新时间：<%= UIText.NiceDateString( Config.CurrentBlog.LastUpdated) %></label>
        </li>
    </ul>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="pageContent" runat="server">

	<div class="section enjoosite_portal_fullwidth">
        <h5>更新头像</h5>
        <div style="line-height:200%;">
            <asp:MultiView ID="UserIconMultiView" runat="server" ActiveViewIndex="0">
                <asp:View ID="UploadView" runat="server">
                    <span>
                        头像文件仅支持 JPG/JPEG, PNG 或者 GIF 类型图像，并且图像文件小于5M。
                    </span>
                    <label>选择头像文件：</label>                    
                    <asp:FileUpload ID="UserIconFileUpload" runat="server" />
                    <div class="hSpace_10"></div>
                    <asp:Button ID="SaveUserIconButton" runat="server" Text="上传头像" OnClick="SaveUserIconButton_Click" />
                </asp:View>
                <asp:View ID="CropView" runat="server">
                    <div style="display:none;">
                        <asp:Image ID="UserProfileImage" 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 class="hSpace_10"></div>
                    <asp:Button ID="SaveUserThumbnailIconButton" runat="server" OnClick="SaveUserThumbnailIconButton_Click"  />
                </asp:View>
            </asp:MultiView>
        </div>
    </div>
</asp:Content>
