
$(document).ready(function (e) {
    var Stoppos, aw;
    aw = $("#iltr").val();
    aw++;
    $("#iconsdrag >ul>li").draggable({cursor: 'move', revert: true,
        drag: function () {
            Stoppos = $(this).position();
        }
    });
    $('#imgview').droppable({
        accept: '#iconsdrag >ul>li',
        drop: function (event, ui) {

            var selceticon = $(ui.draggable).html();
            var idno = $(ui.draggable).attr('data-po');
            $("#imgview").append("<div class='nct" + aw + "'>" + selceticon + "" +
                    /*"<input type='text' class='iconmake' name='nct"+aw+"' />"+*/
                    "<input type='hidden' name='imageNumber" + aw + "' id='imageNumber" + aw + "' value='" + idno + "' />" +
                    "width<input type='text' name='imageWidth" + aw + "' id='imageWidth" + aw + " value='' class = 'changewidth' style='width:30px; height:20px !important;'/>" +
                    "height<input type='text' name='imageHeight" + aw + "' id='imageHeight" + aw + "' value='' class = 'changeheight' style='width:30px; height:20px !important;'/>" +
                    "<input type='hidden' class='posx' name='posx" + aw + "' id='posx" + aw + "' value='" + Stoppos.left + "px' />" +
                    "<input type='hidden' class='posy' name='posy" + aw + "' id='posy" + aw + "' value='" + Stoppos.top + "px' />" +
                    "<input type='text' class='iconmake' name='no" + aw + "' value='" + aw + "' style='width:20px; height:20px !important;'/>" +
                    "<a class='delthis icon-remove' style='margin-top: -85px;margin-right: -10px;'>X</a></div>");
            $("#oll").append("<label id='itrlbl" + aw + "'> " + aw + " </label> &nbsp;<input type='text' class='' name='nct" + aw + "' value='' id='itr" + aw + "'>");

            $(".nct" + aw).css({"position": "absolute", "left": "" + Stoppos.left + "px", "top": "" + Stoppos.top + "px"});


            $("#iltr").val(aw);
        }
    });

    //function on del shaps
    $(".delthis").live("click", function () {
        $(this).parent().remove();
        aw = $("#iltr").val();
        $("#iltr").val(aw);
        $("#itrlbl" + aw).remove();
        $("#itr" + aw).remove();
    });


    ////////////Change width and height\\\\\\\\\\\\\\\\\

    $(".changeheight").live("blur", function () {
        var height = $(".changeheight").val();
        //alert(height);
        $(".nct" + aw + " img").height(height);
        $("#heightnew" + aw).val(height);
    });

    $(".changewidth").live("blur", function () {
        var width = $(".changewidth").val();
        //alert(height);
        $(".nct" + aw + " img").width(width);
        $("#widthnew" + aw).val(width);
    });

    $(".changeheight").blur(function (e) {
        var height = $(".changeheight").val();
        var no = $(".changeheight").attr('data-po');
        $(".nct" + no + " img").height(height);
        $("#height" + no).val(height);
    });

    $(".changewidth").blur(function (e) {
        var width = $(".changewidth").val();
        var no = $(".changeheight").attr('data-po');
        $(".nct" + no + " img").width(width);
        $("#width" + no).val(width);
    });


});