var uploaders = new Array();

$(document).ready(function(){

  $("#add_userbar").livequery("click", function() {
    var nextItem = $(".userbar_item").length + 1;
    if (nextItem <= 10) {
      var clone = $(".userbar_item:last").clone();

      var legend = $(".legend", clone).html();
      legend = updateFieldOffset(legend, nextItem, ' ');
      $(".legend", clone).html(legend);

      var fetchLabelFor = $(".fetch_label", clone).attr('for');
      fetchLabelFor = updateFieldOffset(fetchLabelFor, nextItem, '_');
      $(".fetch_label", clone).attr('for', fetchLabelFor);

      fetchName = 'fetch['+(nextItem-1)+']';
      $(".fetch", clone).attr('name', fetchName);

      var fetchId = $(".fetch", clone).attr('id');
      fetchId = updateFieldOffset(fetchId, nextItem, '_');
      $(".fetch", clone).attr('id', fetchId);
      $(".fetch", clone).val('');

      var fetchButtonId = $(".fetch_button", clone).attr('id');
      fetchButtonId = updateFieldOffset(fetchButtonId, nextItem, '_');
      $(".fetch_button", clone).attr('id', fetchButtonId);

      var uploadLabelFor = $(".upload_label", clone).attr('for');
      uploadLabelFor = updateFieldOffset(uploadLabelFor, nextItem, '_');
      $(".upload_label", clone).attr('for', uploadLabelFor);

      var uploadName = $(".upload", clone).attr('name');
      uploadName = 'upload['+(nextItem-1)+']';
      $(".upload", clone).attr('name', uploadName);

      var uploadId = $(".upload", clone).attr('id');
      uploadId = updateFieldOffset(uploadId, nextItem, '_');
      $(".upload", clone).attr('id', uploadId);
      $(".upload", clone).val('');

      var uploadButtonId = $(".upload_button", clone).attr('id');
      uploadButtonId = updateFieldOffset(uploadButtonId, nextItem, '_');
      $(".upload_button", clone).attr('id', uploadButtonId);

      var fileName = $(".file", clone).attr('name');
      fileName = 'file['+(nextItem-1)+']';
      $(".file", clone).attr('name', fileName);

      var fileId = $(".file", clone).attr('id');
      fileId = updateFieldOffset(fileId, nextItem, '_');
      $(".file", clone).attr('id', fileId);
      $(".file", clone).val('');

      clone.appendTo('.userbar_items');

      // Create an uploader for the new file upload field
      createUploader(nextItem);

      if (nextItem == 10) {
        $("#add_userbar").fadeOut();
      }
    }

    return false;
  });

  function updateFieldOffset(str, offset, separator) {
    return str.substr(0, str.lastIndexOf(separator)+1) + offset;
  }

  $("#transition_effect").livequery('change', function() {
    loadPreview();
    return false;
  });

  $(".fetch_button").livequery('click', function() {
    var parts = this.id.split('_');
    $("#file_" + parts[2]).val('');
    loadPreview();
    return false;
  });

  function loadPreview() {
    if ($("#userbar_preview").html() != 'loading...') {
      $("#userbar_preview").fadeOut('fast', function() {
          $("#userbar_preview").html('loading...').fadeIn()});
    }
    $.post("/design/animator/animatorPreview.php", $("#animator_form").serialize(),
      function(data) {
        if (data.status == 'ok') {
          var preview = new Image();
          preview.onload = function() {
            var src = this.src;
            $("#userbar_preview").fadeOut('fast', function() {
                $("#userbar_preview").html('<img src="' + src + '" width="350" height="19" />').fadeIn('medium',
                function() {
                  if (data.files && (data.files.length > 1)) {
                    var basename = src.substr(src.lastIndexOf('/')+1);
                    $.post("/design/animator/animatorPreview.php", 'action=delete&filename=' + basename);
                  }
                });
            });
          };
          preview.src = data.image ? ('/design/imagestor/' + data.image) : '/images/blank.png';
          if (data.files) {
            for (var i in data.files) {
              $(".file:eq("+i+")").val(data.files[i]);
            }
          }
        } else {
          $.post("/design/preview.php", 'action=ubDelete&filename=' + data.image);
          $("#userbar_preview").fadeOut('fast', function() {
            $("#userbar_preview").html('preview failed!').fadeIn()});
        }
      }, "json");
  }

  createUploader(1);

  function createUploader(offset) {
    uploaders[offset-1] = new AjaxUpload('upload_'+offset, {
        action: '/design/animator/animatorUpload.php',
        name:'upload',
        autoSubmit: false,
        responseType: false,
        onChange: function(file, ext){
          var inputId = this._button.id;
          $('#'+inputId).val(file);
        },
        onSubmit : function(file , ext){
//            $("#editAvatarPopup .infull").fadeOut('fast', function() {
//            $("#editAvatarPopup .infull").html('<div style="text-align:center; margin-top:20px;"><img src="/images/loading-small.gif" width="32" height="32" /></div>').fadeIn()});
        },
        onComplete : function(file, data) {
          data = eval('(' + data + ')');
          if (data.status == 'ok') {
            loadPreview();
          } else {
alert(data.msg);
          }
        }
    });
  }

  $('.upload_button').livequery("click", function(e){
    var id = $(this).attr('id');
    var pos = id.lastIndexOf('_');
    var offset = id.substr(pos+1) - 1;
    if (uploaders[offset]) {
      uploaders[offset].submit();
    }
    return false;
  });

  $("a#confirm_finished").fancybox({
      'onComplete' : function() {
          $.post("/design/animator/animatorPreview.php", $("#animator_form").serialize() + '&uploadUserbar=1',
            function(data){
              if (data.status == 'ok') {
                $.post("/design/animator/animatorPreview.php", $("#animator_form").serialize() + '&action=deleteall');
                window.location = '/design/finished.php?nubid=' + data.id;
              } else {
                $("#confirmFinished .infull").fadeOut('fast', function() {
                  $("#confirmFinished .infull").html('<h2 style="text-align:center;">Failed</h2>').fadeIn()});
                window.setTimeout(function() { $.fancybox.close(); }, 3000);
              }
            }, "json");
    }
  });

});