<%@ Page Title="Home Page" Language="C#"  AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="shanuASP.NETGreetingCard._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
   <title>SHANU - > Web Greeting Card Tool using HTML 5 CANVAS</title>
  
      <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
    <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
   <meta http-equiv="x-ua-compatible" content="IE=9" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="Scripts/jscolor.js"></script>  
   
     <link href="Content/myStyle.css" rel="stylesheet" type="text/css" />
<SCRIPT>
    //public Canvas object to use in all the functions.

    //Main canvas declaration 
    var canvas;
    var ctx;

    var canvasEffect;
    var ctxEffect;
    var x = 75;
    var y = 50;
    //Width and Height of the canvas
    var WIDTH = 200;
    var HEIGHT = 252;
    //    var dragok = false;
    //Global color variable which will be used to store the selected color name.
    var Colors = "";
    var newPaint = false;
    var DrawingTypes = "";

    //Circle default radius size
    var radius = 30;
    var radius_New = 30;
    var stickerWidth = 40, stickerHeight = 40;
    // Rectangle array
    rect = {},
    //drag= false defult to test for the draging
drag = false;

    // Array to store all the old Shanpes drawing details
    var rectStartXArray = new Array();
    var rectStartYArray = new Array();
    var rectWArray = new Array();
    var rectHArray = new Array();


    var recttextXArray = new Array();
    var recttextYArray = new Array();
    var recttextWArray = new Array();
    var recttextHArray = new Array();

    var textXArray = new Array();
    var textYArray = new Array();

  
    var rectColor = new Array();
    var DrawType_ARR = new Array();
    var radius_ARR = new Array();

    var Text_ARR = new Array();
    var Text_ARRNew = new Array();
    // Declared for the Free hand pencil Drawing.
    var prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0;


    //to add the Image
    var ImageNames = new Array();
    var imageCount = 0;
    var imageObj = new Image();
    var imageObj_BG = new Image();
    //to clear the Canvas
    function clear() {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
    }
    var newImagename = '';
    var isEffectadded = 'NO';
    var EffectType = 'black';
    var DrawBorder = "No";
    //Initialize the Canvas and Mouse events for Canvas
    function init(DrawType, ImageName) {
        newPaint = true;
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");

        canvasEffect = document.getElementById("canvas");
        ctxEffect = canvasEffect.getContext("2d");

        x = 5;
        y = 5;
        if (ImageName) {           
            ImageNames[imageCount] = ImageName;
            imageCount = imageCount + 1;
        }

        DrawingTypes = DrawType;


        if (DrawType = 'BG') {

            ctx.drawImage(imageObj_BG, 1, 1, canvas.width - 1, canvas.height - 1);
            
        }    

        radius = 30;
        radius_New = radius;
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mousemove', mouseMove, false);

        return setInterval(draw, 10);
    }

    //Mouse down event method
    function mouseDown(e) {
        rect.startX = e.pageX - this.offsetLeft;
        rect.startY = e.pageY - this.offsetTop;
        radius_New = radius;
        prevX = e.clientX - canvas.offsetLeft;
        prevY = e.clientY - canvas.offsetTop;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;
        drag = true;
    }

    //Mouse UP event Method
    function mouseUp(e) {
       

        rectStartXArray[rectStartXArray.length] = rect.startX;
        rectStartYArray[rectStartYArray.length] = rect.startY;      
        rectWArray[rectWArray.length] = rect.w;
        rectHArray[rectHArray.length] = rect.h;

     
        recttextXArray[recttextXArray.length] = e.pageX - this.offsetLeft;
        recttextYArray[recttextYArray.length] = e.pageY - this.offsetTop;
     

        Colors = document.getElementById("SelectColor").value;
        imageObj.src = ImageNames[imageCount - 1];
        rectColor[rectColor.length] = "#" + Colors;
        DrawType_ARR[DrawType_ARR.length] = DrawingTypes
        radius_ARR[radius_ARR.length] = radius_New;
        Text_ARR[Text_ARR.length] = $('#txtInput').val();
        Text_ARRNew[Text_ARRNew.length] = $('#txtmsg').val();
        drag = false;
        draw();
    }


    //mouse Move Event method
    function mouseMove(e) {
        if (drag) {
            rect.w = (e.pageX - this.offsetLeft) - rect.startX;

            rect.h = (e.pageY - this.offsetTop) - rect.startY;

            drawx = e.pageX - this.offsetLeft;
            drawy = e.pageY - this.offsetTop;

            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            if (drag = true) {
                radius_New += 2;

            }
           
            if (DrawingTypes == "FreeDraw" || DrawingTypes == "Erase") {
            }
            else {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }

        }
      
        drawOldShapes();

    }

    //Darw all Shaps,Text and add images 
    function draw() {

        ctx.beginPath();
        Colors = document.getElementById("SelectColor").value;
        ctx.fillStyle = "#" + Colors;
        switch (DrawingTypes) {
            case "Border":
                ctx.strokeStyle = "#" + Colors;
                ctx.lineWidth = 10;
                ctx.strokeRect(0, 0, canvas.width, canvas.height)
                DrawBorder = "YES";
                //     ctx.rect(canvas.width - 4, 0, canvas.width - 4, canvas.height);
                break;

            case "Images":

                imageObj.src = ImageNames[imageCount - 1];
                ctx.drawImage(imageObj, rect.startX, rect.startY, rect.w, rect.h);
                //  ctx.drawImage(imageObj, rect.startX, rect.startY, stickerWidth, stickerHeight);
                break;
            case "DrawText":
                ctx.font = '54pt Calibri';
                ctx.fillText($('#txtInput').val(), drawx, drawy);

                break;
            case "DrawTextNew":
                ctx.font = '16pt Calibri';

                ctx.fillText($('#txtmsg').val(), drawx, drawy);

                break;
        }
        ctx.fill();
        // ctx.stroke();
    }

    //Redraw all shapes and images
    function drawOldShapes() {
        ctx.drawImage(imageObj_BG, 1, 1, canvas.width - 1, canvas.height - 1);
       
        if (DrawingTypes == "ClearAll") {
            return;
        }

        Colors = document.getElementById("SelectColor").value;


        for (var i = 0; i < rectStartXArray.length; i++) {
            if (rectStartXArray[i] != rect.startX && rectStartYArray[i] != rect.startY && rectWArray[i] != rect.w && rectHArray[i] != rect.h) {
                ctx.beginPath();
                ctx.fillStyle = rectColor[i];
                // ctx.rect(rectStartXArray[i], rectStartYArray[i], rectWArray[i], rectHArray[i]);

                switch (DrawType_ARR[i]) {
                    case "Border":
                        ctx.strokeStyle = "#" + Colors;
                        ctx.lineWidth = 10;
                        ctx.strokeRect(0, 0, canvas.width, canvas.height)
                    case "Images":

                        imageObj.src = ImageNames[i];
                        ctx.drawImage(imageObj, rectStartXArray[i], rectStartYArray[i], rectWArray[i], rectHArray[i]);
                        //  ctx.drawImage(imageObj, rectStartXArray[i], rectStartYArray[i], stickerWidth, stickerHeight);
                        break;
                    case "DrawText":
                        ctx.font = '54pt Calibri';

                        ctx.fillText(Text_ARR[i], recttextXArray[i], recttextYArray[i]);

                        break;
                    case "DrawTextNew":
                        ctx.font = '16pt Calibri';

                        ctx.fillText(Text_ARRNew[i], recttextXArray[i], recttextYArray[i]);

                        break;


                }

                if (DrawBorder == "YES") {
                    ctx.strokeStyle = "#" + Colors;
                    ctx.lineWidth = 10;
                    ctx.strokeRect(0, 0, canvas.width, canvas.height)
                }
              
                ctx.fill();
                // ctx.stroke();
            }
        }
    }


    //new Canvas Drawing
    function ClearAll() {
        var m = confirm("Are you sure to clear All ");
        if (m) {
            DrawingTypes = "ClearAll";
                   
            DrawBorder = "No";
            rectColor.length = 0;
            DrawType_ARR.length = 0
            radius_ARR.length = 0;

             rectStartXArray = new Array();
             rectStartYArray = new Array();
             rectWArray = new Array();
             rectHArray = new Array();
             rectColor = new Array();
             DrawType_ARR = new Array();
             radius_ARR = new Array();

              ImageNames = new Array();
              imageCount = 0;
              imageObj = new Image();
              imageObj_BG = new Image();

              recttextXArray = new Array();
              recttextYArray = new Array();

               Text_ARR = new Array();
               Text_ARRNew = new Array();

            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    }

    // to upload the image to Canvas
    var uploadImage = function (event) {
        var reader = new FileReader();
        ////canvas = document.getElementById("canvas");
        ////ctx = canvas.getContext("2d");
        reader.onload = function () {
            imageObj_BG.src = reader.result;
            init('BG', '');
            // ctx.drawImage(imageObj_BG, 2, 3, canvas.width - 6, canvas.height );
        };
        reader.readAsDataURL(event.target.files[0]);
    };


    function sendEmail() {
        var m = confirm("Are you sure to Save ");
        if (m) {

            var image_NEW = document.getElementById("canvas").toDataURL("image/png");
            image_NEW = image_NEW.replace('data:image/png;base64,', '');
            $("#<%=hidImage.ClientID%>").val(image_NEW);
            alert('Image saved to your root Folder and email send !');
        }

    }
  


    function sendtoFB() {
        var m = confirm("Are you sure Post in FaceBook ");
        if (m) {


            $.getScript('//connect.facebook.net/en_US/all.js', function () {
                // Load the APP / SDK
                FB.init({
                    appId: 'YOURFBAPPID', // App ID from the App Dashboard
                    cookie: true, // set sessions cookies to allow your server to access the session?
                    xfbml: true, // parse XFBML tags on this page?
                    frictionlessRequests: true,
                    oauth: true
                });
                FB.login(function (response) {
                    alert('1')
                    if (response.authResponse) {
                        alert('1')
                        window.authToken = response.authResponse.accessToken;
                        alert('1')
                        PostImageToFacebook(window.authToken)
                    } else {
                    }
                }, {
                    scope: 'publish_actions'
                });
            });

        }

    }


    // Post a BASE64 Encoded PNG Image to facebook
    function PostImageToFacebook(authToken) {
        var canvas = document.getElementById("canvas");
        var imageData = canvas.toDataURL("image/png");
        try {
            blob = dataURItoBlob(imageData);
            alert(blob)
        } catch (e) {
            console.log(e);
        }
        var fd = new FormData();
        fd.append("access_token", authToken);
        fd.append("source", blob);
        fd.append("message", "Shanu Greeting Card Tool now you can send Email and share to FB :)");
        try {
            $.ajax({
                url: "https://graph.facebook.com/me/photos?access_token=" + authToken,
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    console.log("success " + data);
                    $("#poster").html("Posted Canvas Successfully");
                },
                error: function (shr, status, data) {
                    console.log("error " + data + " Status " + shr.status);
                    alert("error " + data + " Status " + shr.status)
                },
                complete: function () {
                    alert("Posted to facebook");
                }
            });

        } catch (e) {
            console.log(e);
        }
    }

    // Convert a data URI to blob
    function dataURItoBlob(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {
            type: 'image/png'
        });
    }

</script>
  
</head>
<body >
     <form id="form" name="form" runat="server" enctype="multipart/form-data">
     <asp:ScriptManager ID="scriptmanager" runat="server"></asp:ScriptManager>

          <table width="99%" style=" border-bottom:3px solid #3273d5;">
        <tr>
            <td align="center">
                <h3>Shanu Greeting Card using ASP.NET :)</h3>
            </td>

        </tr>
    </table>
    <img src="~/Image/blank.gif" alt="" width="1" height="2" />

         <table style=" background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;" cellpadding="2" cellspacing="2">
                    <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
                        <td align="center">
                            <h3> Shanu Greeting Card</h3>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <table style=" background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding: 5px;width: 99%;table-layout:fixed;" cellpadding="2" cellspacing="2">
                                <tr>

                                    <td width="20"></td>
                                    <td valign="top">

                                        <table style="color:#9F000F;font-size:large;width: 99%" cellpadding="4" cellspacing="6">

                                            <tr>
                                                <td>
                                                    <b> Clear Card</b>
                                                </td>

                                                <td>
                                                    <img src="images/New.png"  onClick="ClearAll()" />
                                                   
                                                </td>
                                                <td><b>Upload Image : </b></td>
                                                <td>

                                                    <input type="file" accept="image/*" onchange="uploadImage(event)" />
                                                </td>

                                                <td>
                                                    <b>   Select Color </b>
                                                </td>

                                                <td>
                                                      <input class="color" value="FF1251" id="SelectColor">

                                                </td>
                                                                                         
                                            </tr>
                                             <tr>
                                       
                                               
                                                    <td>
                                                    <b>  Border </b>
                                                </td>

                                                <td>
                                                       <img src="images/rect.png"  onClick="init('Border','')" />

                                                </td>        
                                                    <td>
                                                        <b>  Card Title </b>
                                                    </td>

                                                    <td>
                                                        <input type="text" id="txtInput" value="Happy New Year" /><img src="images/Font.png" onClick="init('DrawText','')" />

                                                    </td>
                                                    <td>
                                                        <b>  Card Message </b>
                                                    </td>

                                                    <td>
                                                        <input type="text" id="txtmsg" value="Wishing you all a Happy New Year 2016" /><img src="images/Font.png" onClick="init('DrawTextNew','')" />

                                                    </td>
                                                    </tr>
                                                   
                                            
                                            <tr>
                                                

                <td ><b>From Email:</b></td>
                <td>
                <asp:TextBox ID="txtFromEmail" runat="server" Text="syedshanumcain@gmail.com" 
                        Width="194px"></asp:TextBox>
                </td>
                 <td ><b>To Email:</b></td>
                <td>
                 <asp:TextBox ID="txtToEmail" runat="server" Text="syedshanumcain@gmail.com" 
                        Width="184px"></asp:TextBox>
                </td>
                  <td ><b>Subject:</b></td>
                <td>
                 <asp:TextBox ID="txtSub" runat="server" Text="Shanu Greeting Card" 
                        TextMode="MultiLine" Width="220px"></asp:TextBox>
                </td>  
                </tr>
                       <tr>
                             <td ><b>Message:</b></td>
                               <td colspan="3">
                 <asp:TextBox ID="txtMessage" runat="server" 
                        Text="Greetings From Shanu .Your Greeting Card has been attached in this mail.Thank You :)" 
                        Height="50px" TextMode="MultiLine" Width="600px"></asp:TextBox>
                 </td>
                     <td>                                  
                       <asp:UpdatePanel id="UpdatePanel1" runat="server">
                           <ContentTemplate>
                              <span> 
                                <asp:Button ID="btnImage" runat="server" Text=" Send Email "  style="background-color:#336699;font-size:x-large;color:#FFFFFF;height:60px;"
                                   OnClientClick = "sendEmail();return true;" onclick="btnImage_Click" />   
                                   <INPUT TYPE ="Button" id="btnFB" VALUE=" Send to FB " onClick="sendtoFB()"  style="background-color:#336699;font-size:x-large;color:#FFFFFF;height:60px;" />                                       
                               </span>
                            </ContentTemplate>
                      </asp:UpdatePanel>                                                
              

     </td>
       </tr>
                                            <tr>
                                                <td colspan="6">
                                                       <img src="images/1.png" width="48" height="48" onClick="init('Images', 'images/1.png')" /> 
                                                    <img src="images/2.png" width="48" height="48" onClick="init('Images', 'images/2.png')" /> 
                                                    <img src="images/3.png" width="48" height="48" onClick="init('Images', 'images/3.png')" />
                                                    <img src="images/4.png" width="48" height="48" onClick="init('Images', 'images/4.png')" /> 
                                                    <img src="images/5.png" width="48" height="48" onClick="init('Images', 'images/5.png')" /> 
                                                    <img src="images/6.png" width="48" height="48" onClick="init('Images', 'images/6.png')" /> 
                                                    <img src="images/7.png" width="48" height="48" onClick="init('Images', 'images/7.png')" /> 
                                                    <img src="images/8.png" width="48" height="48" onClick="init('Images', 'images/8.png')" />
                                                    <img src="images/9.png" width="48" height="48" onClick="init('Images', 'images/9.png')" /> 
                                                    <img src="images/10.png" width="48" height="48" onClick="init('Images', 'images/10.png')" /> 
                                                      <img src="images/11.png" width="48" height="48" onClick="init('Images', 'images/11.png')" /> 
                                                    <img src="images/12.png" width="48" height="48" onClick="init('Images', 'images/12.png')" /> 
                                                    <img src="images/13.png" width="48" height="48" onClick="init('Images', 'images/13.png')" />
                                                    <img src="images/14.png" width="48" height="48" onClick="init('Images', 'images/14.png')" /> 
                                                    <img src="images/15.png" width="48" height="48" onClick="init('Images', 'images/15.png')" /> 
                                                     <img src="images/16.png" width="48" height="48" onClick="init('Images', 'images/16.png')" /> 
                                                    <img src="images/17.png" width="48" height="48" onClick="init('Images', 'images/17.png')" /> 
                                                    <img src="images/18.png" width="48" height="48" onClick="init('Images', 'images/18.png')" />
                                                    <img src="images/19.png" width="48" height="48" onClick="init('Images', 'images/19.png')" /> 
                                                    <img src="images/20.png" width="48" height="48" onClick="init('Images', 'images/20.png')" />   
                                                </td>
                                            </tr>
                                              <tr>
                                                <td colspan="6">
                                                     
                                                                                               
                                                    <img src="images/21.png" width="48" height="48" onClick="init('Images', 'images/21.png')" /> 
                                                    <img src="images/22.png" width="48" height="48" onClick="init('Images', 'images/22.png')" /> 
                                                    <img src="images/23.png" width="48" height="48" onClick="init('Images', 'images/23.png')" />
                                                    <img src="images/24.png" width="48" height="48" onClick="init('Images', 'images/24.png')" /> 
                                                    <img src="images/25.png" width="48" height="48" onClick="init('Images', 'images/25.png')" /> 
                                                    <img src="images/26.png" width="48" height="48" onClick="init('Images', 'images/26.png')" /> 
                                                    <img src="images/27.png" width="48" height="48" onClick="init('Images', 'images/27.png')" /> 
                                                    <img src="images/28.png" width="48" height="48" onClick="init('Images', 'images/28.png')" />
                                                    <img src="images/29.png" width="48" height="48" onClick="init('Images', 'images/29.png')" /> 
                                                    <img src="images/30.png" width="48" height="48" onClick="init('Images', 'images/30.png')" /> 
                                                </td>
                                            </tr>
 </table>
   </td>                                

 </tr>
                                

                            </table>
                        </td>
                    </tr>

                </table>

               <div style="width:980px;margin: 0px auto;">
         <div style="width:800px;padding-right:10px">
                                            <SECTION style=" border-style: solid; border-width:2px; width:800px;">

                                                <CANVAS HEIGHT="600" WIDTH="800" ID="canvas">
                                                    Your browser is not supporting HTML5 Canvas .Upgrade Browser to view this program or check with Chrome or in Firefox.
                                                </CANVAS>

                                            </SECTION>

                                        </div>
          
<input type="hidden" name="imageData" id="imageData" runat="server" />
<asp:HiddenField ID="hidImage" runat="server" />

</form>
</body>
</html>