//alert(idx);
var descr = new Array('','','','','','');
var maxphotos = 30;
var tmp_folder = '/img/tmp/';
var pic_folder = '/img/';
var idx = getcount()+1;

function setTool(){
  var tool = $('<div id="tool"></div>');
  var form = $('<form name="form" id="form" action="" method="POST" enctype="multipart/form-data"></form>');
  var file = $('<input id="fileToUpload" type="file" style="height:30px;" name="fileToUpload">');
  var button = $('<button id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>');
  idx = getcount()+1;

  file.appendTo(form);
  button.appendTo(form);
  form.appendTo(tool);
  tool.appendTo($('#galery'));
}

function reSetTool(){
  $('#form').remove();
  var form = $('<form name="form" id="form" action="" method="POST" enctype="multipart/form-data"></form>');
  var file = $('<input id="fileToUpload" type="file" size="45" name="fileToUpload">');
  var button = $('<button id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>');
  
  file.appendTo(form);
  button.appendTo(form);
  form.appendTo($('#tool'));
}

function paintImage(id){
  $("#img"+id).remove();
  var div_img = $('<div id="img'+id+'" align="center" valign="middle" style="float:left;width:155px;height:155px;"></div>');
  var descr_text = $('<small id="descr_text'+id+'"></small>');
  descr_text.appendTo(div_img);
  div_img.appendTo($('#allimages'));
}

function editImage(id){}

function saveDescription(id){}

function deleteImage(id){
  $("#img"+id).remove();
  sync();   
}

function hideWait(){
  var del_button = $('<img id="delimage'+idx+'" src="'+pic_folder+'dell_ico.png" style="cursor:pointer;" title="Delete photo" onclick="deleteImage('+idx+')">');
  del_button.appendTo($('#img'+idx));
  $('#loading'+idx).hide();
  $('#thumb'+idx).show();
  reSetTool();
  $('#tool').show();
  sync();
	idx++;
}

function ajaxUrlUpload(){
	$('.url_photo').each(function(index) {
    if (getcount() < maxphotos+1){
  		var ready = $('<img id="loading'+idx+'" src="/img/loading.gif" style="display:none;padding-top:50px;padding:50px;">');
      paintImage(idx);	
  		ready.appendTo($('#img'+idx));
  		ready.show();
  		$('#tool').hide();
      
      
      $.ajax({
        url             : "/ajax/uploadurl/",
        data            : "url="+$(this).val(),
        success         : function(data){
          if(data.error != ''){
  					alert(data.error);
  					$('#loading'+idx).hide();
  					$('#img'+idx).remove();
  					$('#tool').show();
  				} else {
  					if (parseInt(data.width) > parseInt(data.height)){
  					  var img = $('<img width="150" id="thumb'+idx+'" onclick="editImage('+idx+');" style="display:none;" src="'+tmp_folder+data.url+'"><br>');
  					} else {
  						var img = $('<img height="150" id="thumb'+idx+'" onclick="editImage('+idx+');" style="display:none;" src="'+tmp_folder+data.url+'"><br>');
  					}
  					var input = $('<input name="photo[]" id="photo'+idx+'" type="hidden" value="'+tmp_folder+data.url+'">');	
  					img.appendTo($('#img'+idx));
  					input.appendTo($('#img'+idx));  					
  					hideWait();  							
  				}
        },
        type            :  'post',        
        dataType        :  'json',
        async           :  false
      });
      
      /*$.post(
  			"/ajax/uploadurl/", 
  			{
  				url: $(this).val()
  			},
  		  function(data){
  		  	if(data.error != ''){
  					alert(data.error);
  					$('#loading'+idx).hide();
  					$('#img'+idx).remove();
  					$('#tool').show();
  				} else {
  					if (parseInt(data.width) > parseInt(data.height)){
  					  var img = $('<img width="150" id="thumb'+idx+'" onclick="editImage('+idx+');" style="display:none;" src="'+tmp_folder+data.url+'"><br>');
  					} else {
  						var img = $('<img height="150" id="thumb'+idx+'" onclick="editImage('+idx+');" style="display:none;" src="'+tmp_folder+data.url+'"><br>');
  					}
  					var input = $('<input name="photo[]" id="photo'+idx+'" type="hidden" value="'+tmp_folder+data.url+'">');	
  					img.appendTo($('#img'+idx));
  					input.appendTo($('#img'+idx));  					
  					hideWait();  							
  				}
  		  },
  		  'json'
  		);*/
  		$('.newurl').remove();
  		$('.url_photo').val('');
    
    } else {
      alert('Maximum '+maxphotos+' foto');
      return false;
    }          
  });
}

function ajaxFileUpload(){
	if (getcount() < maxphotos+1){
		$("#allimages")
  		.ajaxStart(function(){
        var ready = $('<img id="loading'+idx+'" src="/img/loading.gif" style="display:none;padding-top:50px;padding:50px;">');
  	    paintImage(idx);	
  			ready.appendTo($('#img'+idx));
  			ready.show();
  			$('#tool').hide();
  		})
  		.ajaxComplete(function(){
  		});
  
  		$.ajaxFileUpload({
  				url:'/ajax/upload',
  				secureuri:false,
  				fileElementId:'fileToUpload',
  				dataType: 'json',
  				success: function (data, status){
  					if(typeof(data.error) != 'undefined'){
  						//alert(data.msg);
  						//alert(data.width);
  						if(data.error != ''){
  							alert(data.error);
  							$('#loading'+idx).hide();
  							$('#img'+idx).remove();
  							$('#tool').show();
  						} else {  							
  							if (parseInt(data.width) > parseInt(data.height)){
  							  var img = $('<img width="150" id="thumb'+idx+'" onclick="editImage('+idx+');" style="display:none;" src="'+tmp_folder+data.url+'"><br>');
  							} else {
    							var img = $('<img height="150" id="thumb'+idx+'" onclick="editImage('+idx+');" style="display:none;" src="'+tmp_folder+data.url+'"><br>');
    						}
								var input = $('<input name="photo[]" id="photo'+idx+'" type="hidden" value="'+tmp_folder+data.url+'">');	
  							img.appendTo($('#img'+idx));
  							input.appendTo($('#img'+idx));
  							hideWait();  							
  						}
  					}
  				},
  				error: function (data, status, e){
  					alert(e);
  				}
  			}
  		)  		
  		return false;
  } else {
    alert('Maximum 5 foto');
    return false;
  }
} 

function sync(){
	$('input[@id^="pic"]').each(function(){
      $(this).attr('value', '');      
  });
  
  var i = 1;
  $('img[@id^="thumb"]').each(function(){
  	  if ($(this).attr('src')){
        $("#pic"+i).attr('value',$(this).attr('src'));
				i++;
      }
  })
}

function getcount(){
	var i = 1;
	$('img[@id^="thumb"]').each(function(){
  	  i++;  	  
	});
	return i;
}

function addUrlUpload()
{
  $('#upload_url').append('<div style="width:100%" class="newurl"><a href="javascript:void(0);" onclick="addUrlUpload();"><img src="/img/add_icon.png"></a><input style="width:300px;" type="text" class="url_photo" id="url_photo"></div>');
  return false;
}


$().ready(
  function() {
    setTool();
  }
);