<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ContactDetails.aspx.vb" Inherits="MailEnable.Clients.WebMail.Mobile.ContactDetails" %>
<%@ Register TagPrefix="m" TagName="Document" Src="Controls/Document.ascx" %>
<%@ Register TagPrefix="m" TagName="Page" Src="Controls/Page.ascx" %>
<%@ Register TagPrefix="m" TagName="TextBox" Src="Controls/TextBox.ascx" %>

<m:Document Id="ContactDetailsDocument" runat="server">
    <Content>
        <m:Page Id="ContactDetailsPage" runat="server">
            <Content>
               <%If AllowPhoto() And ShowPhoto() Then %>
                <div id="uploader" style="position:absolute; top:200px;left:200px;">
                    <form id="fmUpload" name="fileupload" enctype="multipart/form-data" action="" accept="image/*">
                    <input id="file" name="file" type="file" style="display: none;" />
                    </form>
                </div>

                <script type="text/javascript">
                    function ContactsImgClose_show() {
                        $('.contacts_img_close').show();
                    }
                    function ContactsImgClose_hide() {
                        $('.contacts_img_close').hide();
                    }

                    var gUploadSizeInKB = <%=GetMaximumUploadSize%>;

                    function clearUploadSelector() {
                        $(':file').unbind("change");
                        $("#file").val(""); //cant do because it invokes the change event.
                        RegisterChangeHandler();
                    }


                    function readFile(file) 
                    { 
                        var reader = new FileReader(); 
                        reader.onloadend = function () { 
                            
                            processFile(reader.result, file.type); 
                        } 
                        reader.onerror = function () { 
                            alert('There was an error reading the file!'); 
                        } 
                        reader.readAsDataURL(file); 
                    } 


                    function UploadImage(uploadData) {
                        var sId = '<%=ItemId%>';

                        $("#prgUpload").val("0"); //reset it
                        $('#prgUpload').show();
                        $.ajax({
                            url: getAppServletURL() + '?Cmd=SET-CONTACT&Options=PHOTO&ID=' + sId + '&ME_SID=<%=Session.Item("ME_SID")%>&TD=' + (new Date()).getTime() + '&ME_VALIDATIONTOKEN=<% =Session.Item("ME_VALIDATIONTOKEN") %>',
                            data: uploadData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            type: 'POST',
                            success: function (data) {
                                if (data && (data.length > 0)) {
                                }
                            },
                            error: function (request, error) {
                                alert("An error occured uploading: " + error);
                            },
                            complete: function (jqXHR, sTextstatus) {
                                //request image
                                $('#imgPhoto').attr("src", getAppServletURL() + '?Cmd=GET-CONTACT&Options=PHOTO&ID=' + sId + '&TD=' + (new Date()).getTime() + '&ME_VALIDATIONTOKEN=<% =Session.Item("ME_VALIDATIONTOKEN") %>');
                                $('#prgUpload').hide();
                                $('#uploader').hide();
                                if (typeof clearUploadSelector !== 'undefined') {
                                    clearUploadSelector();
                                }
                            },
                            processData: false,
                            xhr: function() {
                                var myXhr = $.ajaxSettings.xhr();
                                if (myXhr.upload) {
                                    myXhr.upload.addEventListener('progress', function(e) {
                                        if (e.lengthComputable) {
                                            $('progress').attr({
                                                value: e.loaded,
                                                max: e.total
                                            });
                                        }
                                    } , false);
                                }
                                return myXhr;
                            }
                        });
                    }


                    function isCanvasSupported(){
                        var elem = document.createElement('canvas');
                        return !!(elem.getContext && elem.getContext('2d'));
                    }

                    function RegisterChangeHandler() {
                        $(':file').change(function () {
                            if (this.files) {
                                var file = this.files[0];
                                if (file) {
                                    var bFileIsImage =  (/^image\//i.test(file.type));
                                    if (bFileIsImage) {
                                        var bAllowReduce = bFileIsImage && isCanvasSupported();
                                        var uploadData;
                                        if (bAllowReduce) {
                                            //here we want to look at the dimensions of the object using the canvas etc
                                            var reader = new FileReader();
                                            reader.onloadend = function () { 
                                                var dataURL = reader.result;
                                                var image = new Image();
                                                image.onload = function () {
                                                    var maxWidth = 128;
                                                    var maxHeight = 128;
                                                    var width = image.width;
                                                    var height = image.height;
                                                    var shouldResize = (width > maxWidth) || (height > maxHeight);
                                                    if (shouldResize) {
                                                        //need to reduce and then send
                                                        var newWidth;
                                                        var newHeight;
                                                        if (width > height) {
	                                                        newHeight = height * (maxWidth / width);
	                                                        newWidth = maxWidth;
                                                        } else {
	                                                        newWidth = width * (maxHeight / height);
	                                                        newHeight = maxHeight;
                                                        }
                                                        var canvas = document.createElement('canvas');
                                                        canvas.width = newWidth;
                                                        canvas.height = newHeight;
                                                        var context = canvas.getContext('2d');
                                                        context.drawImage(this, 0, 0, newWidth, newHeight);
                                                        dataURL = canvas.toDataURL(file.type);
                                                    }
                                                    var formData = new FormData();
                                                    formData.append('imageData', dataURL);
                                                    UploadImage(formData);
                                                }
                                                image.onerror = function () { 
                                                    alert('An error occurred resizing the image.'); 
                                                }; 
                                                //kick off the load (and subsequent upload)
                                                image.src = dataURL;
                                            } 
                                            reader.onerror = function () { 
                                                alert('There was an error reading the file!'); 
                                            } 
                                            reader.readAsDataURL(file);
                                        } else {

                                            if (file) {
                                                if ((gUploadSizeInKB > 0) && (file.size < (gUploadSizeInKB * 1024))) {
                                                    uploadData = new FormData($('#fmUpload').get(0));
                                                    UploadImage(uploadData);
                                                }
                                                else {
                                                    alert('<%=GetText("[ME_TXT-MaximumUploadSizeIs]")%>' + ' ' + gUploadSizeInKB + ' ' + '<%=GetText("[ME_TXT-KB]")%>');
                                                    return;
                                                }
                                            }

                                        }
                                    } else {
                                        alert('file is not an image');
                                    }
                                }
                                else {
                                    alert('no file support');
                                }
                            }
                            else {
                                try {
                                    uploadData = new FormData($('#fmUpload').get(0));
                                    if (confirm('Warning: This browser does not support modern file upload and the upload may take quite some time if the upload is large. Do you wish to continue?')) {
                                        UploadImage(uploadData);
                                    } else {
                                        // Do nothing!
                                    }
                                }
                                catch (ex) {
                                    alert('Unable to upload file. The browser does not support FormData uploads');
                                }
                            }
                        });
                    }

                    $(document).ready(function () {
                        RegisterChangeHandler();
                    });

                </script>
            <!--BEGIN CONTACT -->
                <div class="contacts_img_shell" onmouseover="ContactsImgClose_show();" onmouseout="ContactsImgClose_hide();" onselectstart="return false;">
                <center>
                    <div style="display:table-cell;vertical-align:middle;text-align:center;height:125px;width:125px;" onselectstart="return false;">
                        <img alt="<%=GetText("[ME_TXT-ContactPicture]")%>" align="middle" id="imgPhoto" src="<%=ImageURL%>" style="max-width:125px;max-height:125px;width:expression(this.width>125?'125px':true);height:expression(this.height>125?'125px':true);" onselectstart="return false;"/>
                    </div>
                    <!-- <div class="contacts_img_close" title="<%=GetText("[ME_TXT-RemoveImage]")%>" onselectstart="return false;"></div>-->
                </div></center>
                <!-- Add Image Button -->
                <button id="jsUpload" name="Upload" type="button"  onclick="document.getElementById('file').click();" data-theme="b" data-iconpos="right"><%=GetText("[ME_TXT-Add/EditImage]")%></button>
                <div style="width:100%"><progress id="prgUpload" style="height: 16px;width:100%;display:none"></progress></div>
            <!--END CONTACT -->
    <%End If%>

    <form action="?id=<%= ItemId %>" method="post"><%WriteFormValidationField()%>


                    <m:TextBox Id="DisplayName" Label="Full Name" runat="server" />
                    <m:TextBox Id="EmailAddress" Label="Email Address" Type="email" runat="server" />
                    <m:TextBox Id="MobilePhone" Label="Mobile Number" Type="tel" runat="server" />
                    <m:TextBox Id="WorkPhone" Label="Work Number" Type="tel" runat="server" />
                    <m:TextBox Id="HomePhone" Label="Work Number" Type="tel" runat="server" />

                    <div data-role="collapsible" data-content-theme="c">
                        <h3><%= GetText("[ME_TXT-Address]")%></h3>
                        <m:TextBox Id="StreetAddress" Label="StreetAddress" runat="server" />
                        <m:TextBox Id="Locality" Label="Locality" runat="server" />
                        <m:TextBox Id="StateOrProvince" Label="State or Province"  runat="server" />
                        <m:TextBox Id="PostalCode" Label="Postal Code" runat="server" />
                        <m:TextBox Id="Country" Label="Country" runat="server" />
                    </div>

                    <m:TextBox Id="Company" Label="Company" runat="server" />
                    <m:TextBox Id="Department" Label="Department" runat="server" />

                    <div class="textarea">
                        <m:TextBox ID="Notes" Label="Notes" LabelVisible="false" Placeholder="Notes" Multiline="true" runat="server" />
                    </div>


                    <div class="ui-grid-a bttn_grid2_shell">
                        <div class="ui-block-a"><a data-role="button" data-rel="back"><%=GetText("[ME_TXT-Cancel]")%></a></div>
                        <div class="ui-block-b"><input type="submit" value="Save" data-theme="b" data-iconpos="right" data-icon="check"/></div>
                    </div>
                </form>
                
                <div id="ConfirmContactDeletion" data-role="popup" data-overlay-theme="a">
                    <div data-role="header" data-theme="c">
                        <h1 class="ui-title-fullwidth"><%=GetText("[ME_TXT-Delete]")%></h1>
                    </div>
                    <div data-role="content">
                        <p><%=GetText("[ME_TXT-Deletethecurrentlyselectedcontact?]")%></p><br />
                        <a href="?Id=<%= ItemId %>&Op=Del" data-role="button" data-theme="f"><%=GetText("[ME_TXT-Yes]")%></a>
                        <a data-rel="back" data-role="button"><%=GetText("[ME_TXT-No]")%></a>
                    </div>
                </div>
            </Content>
            <Footer>
                <div data-role="controlgroup" data-type="horizontal" data-mini="true">
                    <% If Not String.IsNullOrEmpty(ContactEmailAddress) Then%>
                        <a href="Compose.aspx?To=<%= Server.UrlEncode(ContactEmailAddress) %>" data-role="button" data-icon="cust-compose"><%=GetText("[ME_TXT-Email]")%></a>
                    <% End If%>
                    <% If Not String.IsNullOrEmpty(ContactMobilePhone) Then%>
                        <a href="tel:<%= ContactMobilePhone %>" data-role="button" data-icon="cust-call">Call</a>
                    <% End If%>
                    <% If Not CreationMode Then%>
                        <a href="#ConfirmContactDeletion" data-rel="popup" data-position-to="window" data-role="button" data-icon="cust-delete"><%=GetText("[ME_TXT-Delete]")%></a>
                    <% End If%>
                </div>
            </Footer>
        </m:Page>
    </Content>
</m:Document>