var z = 1000;
var imageSize;
 

$(function(){

    
    if ($('.content').get(0) != undefined) {
      
        $('.content').each(function(index) {
          var position = $(this).position();
          $("#"+$(this).attr('id').replace(/im/, 's')).css('top', position.top);
          $("#"+$(this).attr('id').replace(/im/, 's')).css('left', position.left);
          
          $("#"+$(this).attr('id').replace(/im/, 's')).css('width', $(this).width()+25);
          $("#"+$(this).attr('id').replace(/im/, 's')).css('height', $(this).height()+25);
          
     var key = $(this).attr('id');
          
        });
		
        
        $(".content").draggable({
          drag: function(event, ui) {
              var position = $(this).position();
              $("#"+$(this).attr('id').replace(/im/, 's')).css('top', position.top);
              $("#"+$(this).attr('id').replace(/im/, 's')).css('left', position.left);
          },
          stop: function(event, ui) {
              var position = $(this).position();
              $("#"+$(this).attr('id').replace(/im/, 's')).css('top', position.top);
              $("#"+$(this).attr('id').replace(/im/, 's')).css('left', position.left);
          }
          
        }).resizable({
          aspectRatio: true, 
          
          resize: function(event, ui) {
            var actualWidth = ui.element.width();
            var actualHeight = ui.element.height();
            

            var key = ui.element.attr('id');
          
            $("#"+ui.element.attr('id').replace(/im/, 's')).css('width', ui.element.width()+25);
            $("#"+ui.element.attr('id').replace(/im/, 's')).css('height', ui.element.height()+25);
            
            ui.element.children('img').css('width', ui.element.width());
            ui.element.children('img').css('height', ui.element.height());
          },
          
          stop: function(event, ui) {
            var actualWidth = ui.element.width();
    
            var key = ui.element.attr('id');
    
             $("#"+ui.element.attr('id').replace(/im/, 's')).css('width', ui.element.width()+25);
            $("#"+ui.element.attr('id').replace(/im/, 's')).css('height', ui.element.height()+25); 
            

            ui.element.children('img').css('width', ui.element.width());
            ui.element.children('img').css('height', ui.element.height());
          }   
        }).each(function() {
          $(this).children('div').css('z-index', 0);
        });

    }
});