// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function() {
    var cache = {};

    this.tmpl = function tmpl(str, data) {
        // Figure out if we're getting a template, or if we need to
        // load the template - and be sure to cache the result.
        var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

        // Generate a reusable function that will serve as a template
        // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

        // Convert the template into pure JavaScript
str.replace(/[\r\t\n]/g, " ")
   .replace(/'(?=[^%]*%>)/g,"\t")
   .split("'").join("\\'")
   .split("\t").join("'")
   .replace(/<%=(.+?)%>/g, "',$1,'")
   .split("<%").join("');")
   .split("%>").join("p.push('")
   + "');}return p.join('');");

        // Provide some basic currying to the user
        return data ? fn(data) : fn;
    };
})();

/*
filedrag.js - HTML5 File Drag & Drop demonstration
Featured on SitePoint.com
Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
*/
(function() {

  var loaded_files = {length:0};
  var api_url = '/w/api.php';
  var api_token_qry = api_url + '?format=json&action=query&prop=info&intoken=edit&titles=Skica';
  var api_token = false;
  var filebase = 'no-name';
  var captionbase = 'no-caption';
  
  this.mwfilebase = function(new_base) {
      if (!!new_base) {
        $('.remote-name').each(function() {
            $(this).attr('value', $(this).attr('value').replace(filebase,new_base));
        });
        filebase = new_base;
      }
      return filebase;
    }
  
    this.mwcaptionbase = function(new_base) {
      if (!!new_base) {
        $('.caption').each(function() {
            $(this).attr('value', $(this).attr('value').replace(captionbase,new_base));
        });
        captionbase = new_base;
      }
      return captionbase;
    }
  
  // getElementById
  function $id(id) {
    return document.getElementById(id);
  }
    
  // output information
  function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
  }
 
  // file drag hover
  function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
  }

  // file selection
  function FileSelectHandler(e) {
    // cancel event and hover styling
    FileDragHover(e);
    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;
    // process all File objects
    for (var i = 0, f; f = files[i]; i++) {
      ParseFile(f,files.length);
  //  UploadFile(f);
    }
  }
  
  // output file information
  function ParseFile(file,maks) {
    //ignore duplicates
    if (loaded_files.length==0) $id('upload-all').style.display = 'block';
    if (loaded_files[file.name]) return;
    $msg = $id("messages");
    loaded_files.length++;
    loaded_files[file.name] = file;
    loaded_files[file.name].id = file.name;
    loaded_files[file.name].newname = filebase + '-' + loaded_files.length + file.name.replace(/^.*([.].*)$/,'$1').toLowerCase();
    loaded_files[file.name].caption = captionbase + loaded_files.length + '/' + maks;
    if (file.type.indexOf("image") == 0) {
      
      var reader = new FileReader();
      reader.onload = function(e) {
        loaded_files[file.name].datasrc = e.target.result;
        //call template
        $msg.innerHTML += tmpl("upload_template",loaded_files[file.name]);
      }
      reader.readAsDataURL(file);
    } else {
      //call template
      $msg.innerHTML += tmpl("upload_template",loaded_files[file.name]);
    }
  }
  
  this.mwupload_all = function UploadFiles() {
    for (var i in loaded_files)
      if (i!='length') mwupload(i);
  }

  this.mwupdate = function UpdateFileProperty(idx,name,value) {
    loaded_files[idx][name] = value;
  }
 
  
  // upload JPEG files
  this.mwupload = function UploadFile(idx) {
    var file = loaded_files[idx];
    var xhr = new XMLHttpRequest();
    if (xhr.upload /* && file.type.indexOf("image")==0 && file.size <= $id("MAX_FILE_SIZE").value*/) {
      // progress bar
      var progress = $id(idx+"-progress");
      xhr.upload.addEventListener("progress", function(e) {
        var pc = parseInt(100 * e.loaded / e.total );
      	progress.style.width = pc + "%";
      }, false);
      	// file received/failed
      xhr.onreadystatechange = function(e) {
      	if (xhr.readyState == 4) {
      		progress.className = (xhr.status == 200 ? "progress-indicator success" : "progress-indicator failure");
      		progress.style.width = "100%";
      		//progress.appendChild(document.createTextNode("upload " + xhr.responseText.replace('<','&lt;')));
      	}
      };
      // start upload

        var text = '{{gallery-image|'+filebase+'|'+file.caption+'}}';

        data = new FormData;
        data.append('action', 'upload');
        data.append('format', 'json');
        data.append('token', api_token);
        data.append('filename', file.newname);
        data.append('filesize', file.size);
        data.append('file', file);
        data.append('text', text);
        data.append('ignorewarnings',1);

        xhr.open("POST", api_url, true);
        xhr.send(data);
     
    }
  }

 
  // initialize
  this.UploadInit = function Init() {
    var fileselect = $id("fileselect"),
        filedrag = $id("filedrag"),
        submitbutton = $id("submitbutton");
    filebase = $id('filebase').value;
    captionbase = $id('captionbase').value;
    // file select
    fileselect.addEventListener("change", FileSelectHandler, false);
    // is XHR2 available?
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
      // file drop
      filedrag.addEventListener("dragover", FileDragHover, false);
      filedrag.addEventListener("dragleave", FileDragHover, false);
      filedrag.addEventListener("drop", FileSelectHandler, false);
      filedrag.style.display = "block";
      // remove submit button
      submitbutton.style.display = "none";
    }
    xhr.onreadystatechange = function(e) {
    	if (xhr.readyState == 4 && xhr.status == 200) {
    	  var data = JSON.parse(xhr.responseText);
    	  for (idx in data.query.pages) api_token = data.query.pages[idx].edittoken;
    	  console.log('got token',api_token);
    	}
    };
    // start upload
    xhr.open("POST", api_token_qry, true);
    xhr.send();
  }
    
  // call initialization file
  $(function() {
    if (window.File && window.FileList && window.FileReader) {
      UploadInit();
    }
  });
  
})();