
$(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);
		});
	

});