/** aw drag and drop and resize **/
/** start painter ***/

$(function () {
    if ($("#dragPage").val() == 1)
    {
        var patientId = $("#patientId").val();
        var controllName = $("#controllName").val();
        var docname = $("#DocName").val();
        var hosturl = $("#hosturl").val();
        var gtId = $("#gtId").val();

        var awitr = Number($('#iltr').val()) + 1;
        var offset, xPos, yPos, width = 50, height = 50;


        $('body').live('mouseover', function () {


            $('.awdrag_real').draggable({containment: "#containment-wrapper", scroll: false, helper: "clone", start: function (e, ui) {
                    $(ui.helper).css('position', 'absolute');
                    $(ui.helper).attr('data-id', awitr);

                }, stop: function (e, ui) {

                    offset = $(ui.helper).position();
                    xPos = offset.left;
                    yPos = offset.top;
                    var thisid = $(ui.helper).attr('data-id');
                    $(ui.helper).find('#posx' + awitr).val(xPos);
                    $(ui.helper).find('#posy' + awitr).val(yPos);
                    width = 30;
                    height = 30;
                    $(ui.helper).find('#poswidth' + awitr).val(width);
                    $(ui.helper).find('#posheight' + awitr).val(height);
                    var thisname = $(ui.helper).attr('data-name');


                    $(this).after($(ui.helper).clone().removeClass("awdrag_real").addClass("awdrag_new").attr("data-itr", awitr).draggable({containment: "#containment-wrapper", scroll: false, stop: function (e, ui) {

                            offset = $(this).position();
                            xPos = offset.left;
                            yPos = offset.top;
                            var thisid = $(this).attr('data-id');
                            $(this).find('#posx' + thisid).val(xPos);
                            $(this).find('#posy' + thisid).val(yPos);


                        }


                    }).append(
                            '<span class="noofitem">' + awitr + '</span>' +
                            '<span class="closeit" id="delImg' + awitr + '" data-id="0" data-old="0">x</span>' +
                            '<input type="hidden" id="posx' + awitr + '" name="posx' + awitr + '" value="' + xPos + '">' +
                            '<input type="hidden" id="posy' + awitr + '" name="posy' + awitr + '" value="' + yPos + '">' +
                            '<input type="hidden" id="poswidth' + awitr + '" name="poswidth' + awitr + '" value="' + width + '">' +
                            '<input type="hidden" id="posheight' + awitr + '" name="posheight' + awitr + '" value="' + height + '">' +
                            '<input type="hidden" id="nameimg' + awitr + '" name="nameimg' + awitr + '" value="' + thisname + '">' +
                            '<input type="text" class="updateComentC" data-itr="' + awitr + '"    id="picComment' + awitr + '"  />' +
                            '<span style="display:none;">' +
                            $("#iltr").val(awitr) +
                            awitr++
                            + '</span>'
                            ).resizable({/*containment: "#containment-wrapper",*/stop: function (e, ui) {
                            width = ui.size.width;
                            height = ui.size.height;
                            var i = $(this).attr("data-itr");
                            var thisid = $("#delImg" + i).attr('data-id');
                            $('#poswidth' + i).val(width);
                            $('#posheight' + i).val(height);
                            //Update width and height
                            $.post(hosturl + '/controllers/' + controllName + '.php?ac=updateSize', {id: thisid, w: width, h: height}, function (res)
                            {
                            });

                        }

                    })
                            );

                    //Get Image Elements
                    var i = awitr - 1;
                    var x = $("#posx" + i).val();
                    var y = $("#posy" + i).val();
                    var w = $("#poswidth" + i).val();
                    var h = $("#posheight" + i).val();
                    var no = $("#nameimg" + i).val();
                    var picComment = $("#picComment" + i).val();
                    var id = $("#delImg" + i).attr('data-id');

                    //Save By Ajax
                    $.post(hosturl + '/controllers/' + controllName + '.php?ac=update', {id: id, gtId: gtId, x: x, y: y, w: w, h: h, no: no, comment: picComment}, function (res)
                    {
                        data = Number(res);
                        $(ui.helper).attr('data-id', data);
                        $("#delImg" + i).attr('data-id', data);
                    });

                }});


            $('.awdrag_new').draggable({containment: "#containment-wrapper", scroll: false, start: function (e, ui) {
                    var i = $(this).attr("data-itr");
                    $(ui.helper).css('position', 'absolute');
                    $(ui.helper).attr('data-id', $("#delImg" + i).attr('data-id'));


                }, stop: function (e, ui) {
                    var i = $(this).attr("data-itr");
                    offset = $(ui.helper).position();
                    xPos = offset.left;
                    yPos = offset.top;
                    var thisid = $("#delImg" + i).attr('data-id');
                    $(ui.helper).find('#posx' + i).val(xPos);
                    $(ui.helper).find('#posy' + i).val(yPos);
                    var thisname = $(ui.helper).attr('data-name');

                    $(this).after($(ui.helper).draggable({containment: "#containment-wrapper", scroll: false, stop: function (e, ui) {

                            offset = $(this).position();
                            xPos = offset.left;
                            yPos = offset.top;
                            //var thisid = $("#delImg" + i).attr('data-id');
                            $(this).find('#posx' + i).val(xPos);
                            $(this).find('#posy' + i).val(yPos);


                        }


                    }).resizable({/*containment: "#containment-wrapper",*/stop: function (e, ui) {
                            width = ui.size.width;
                            height = ui.size.height;
                            var i = $(this).attr("data-itr");
                            var thisid = $("#delImg" + i).attr('data-id');
                            $('#poswidth' + i).val(width);
                            $('#posheight' + i).val(height);

                            //Update width and height
                            $.post(hosturl + '/controllers/' + controllName + '.php?ac=updateSize', {id: thisid, w: width, h: height}, function (res)
                            {
                                data = Number(res);
                                $("#delImg" + i).attr('data-id', data);
                            });

                        }

                    })
                            );

                    //Get Image Elements
                    var i = $(this).attr("data-itr");
                    var x = $("#posx" + i).val();
                    var y = $("#posy" + i).val();
                    var w = $("#poswidth" + i).val();
                    var h = $("#posheight" + i).val();
                    var no = $("#nameimg" + i).val();
                    var picComment = $("#picComment" + i).val();
                    var id = $("#delImg" + i).attr('data-id');
                    //Save By Ajax
                    $.post(hosturl + '/controllers/' + controllName + '.php?ac=update', {id: id, gtId: gtId, x: x, y: y, w: w, h: h, no: no, comment: picComment}, function (res)
                    {
                        data = Number(res);
                        $("#delImg" + i).attr('data-id', data);
                    });

                }})

        });

        $('.closeit').live('click', function () {
            var itemid = $(this).attr('data-id');
            bootbox.dialog({
                message: "Do you want to delete this item?",
                title: "Delete confirmation",
                buttons: {
                    danger: {
                        label: "Cancel",
                        className: "btn-primary"
                    },
                    main: {
                        label: "Delete",
                        className: "btn-danger",
                        callback: function () {
                            //do something else
                            window.location.href = hosturl + "/controllers/" + controllName + ".php?ac=delData&id=" + itemid + "&gtid=" + gtId + "&patientid=" + patientId;
                        }
                    }
                }
            }).find('.modal-content').addClass('modal-sm');
        });

        $('.removeAll').live('click', function () {
            //var itemid = $(this).attr('data-id');
            bootbox.dialog({
                message: "Do you want to delete all items ?",
                title: "Delete confirmation",
                buttons: {
                    danger: {
                        label: "Cancel",
                        className: "btn-primary"
                    },
                    main: {
                        label: "Delete",
                        className: "btn-danger",
                        callback: function () {
                            //do something else
                            window.location.href = hosturl + "/controllers/" + controllName + ".php?ac=delData&gtid=" + gtId + "&patientid=" + patientId;
                        }
                    }
                }
            }).find('.modal-content').addClass('modal-sm');
        });

        $(".updateComent").live('change', function () {

            var value = $(this).val();

            $.post(hosturl + '/controllers/' + controllName + '.php?ac=updateComment', {gtId: gtId, value: value}, function (res)
            {
            });

        });

        $('body').on('change', '.updateComentC', function () {
            var itr = $(this).attr('data-itr');
            var id = $("#delImg" + itr).attr('data-id');
            var value = $(this).val();

            $.post(hosturl + '/controllers/' + controllName + '.php?ac=updateComentC', {id: id, value: value}, function (res)
            {
                console.log(res);
            });

        });

        $('#printGt').live('click', function () {
            var patientName = $("#patientName").val();
            var patientType = $("#patientType").val();
            if ($(".updateComent").val() == "")
            {
                $(".iconcomments").css({'display': 'none'});
            }
            $('#img-out').css({'display': 'block'});
            $('.awdrag_real').css({'visibility': 'hidden'});
            $('#mytoolmain').css({'background': 'transparent', 'border': '0', 'padding': '0'});
            $(".closeit").css({'display': 'none'});
            $(".noofitem").css({'display': 'none'});
            var target = $('#allcom');
            html2canvas(target, {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    $('#img-out').html("<center><h4>" + patientType + "/ " + patientName + "</h4></center><img id='imgprintx' src=" + data + " />");
                    $.print("#img-out");
                    $('#img-out').css({'display': 'none'});
                    $('#img-out').html('');
                    $('#mytoolmain').css({'background': '#D5D5D5', 'border': '6px solid #636E81', 'padding': '5px 28px;', 'border-bottom': '0px'});
                    $('.awdrag_real').css({'visibility': 'visible'});
                    $(".iconcomments").css({'display': 'block'});
                    $(".closeit").css({'display': 'inline'});
                    $(".noofitem").css({'display': 'inline'});
                }
            });

        });

        $('.removeMsg').live('click', function () {
            var gtId = $(this).attr('data-id');
            bootbox.dialog({
                message: "Do you want to delete all items ?",
                title: "Delete confirmation",
                buttons: {
                    danger: {
                        label: "Cancel",
                        className: "btn-primary"
                    },
                    main: {
                        label: "Delete",
                        className: "btn-danger",
                        callback: function () {
                            //do something else
                            window.location.href = hosturl + "/controllers/" + controllName + ".php?ac=delRow&gtid=" + gtId + "&patientid=" + patientId;
                        }
                    }
                }
            }).find('.modal-content').addClass('modal-sm');
        });

    }
}
);