/**
 *
 * Ok, so, you took a look. Let's set a deal.
 * What's inside those files, will stay between you and me. Ok?
 *
 * I know, it doesn't look good. It doesn't have to. The goal for now
 * is to create a working UI, that fits our needs.
 *
 * Basing on that, we'll prepare the API for communication between client-side
 * and server-side. Once we have this. We can rework JS to make it clean :)
 *
 **/

var desktop = null;

function globalOnLoad () {
  var content = document.getElementById('content');
  if (window.documentHeight) {
    content.style.height = documentHeight + 'px';
    desktop = new Desktop(content);
  } else {
    desktop = new Desktop();
  }

  document.addEventListener('mouseup',desktop.getMouse().onMouseUp,false);
  document.addEventListener('mousemove',desktop.getMouse().onMouseMove,false);

  addLoginBox();
  addNewAccountBox();

  enableTabSwitcher(document.getElementById('bottom-nav'));
}

function addLoginBox () {
  var fb = new Box('login-box');
  var tag = fb.getTagObject();
  fb.addClass('popup-box');
  tag.innerHTML='Email: <input type="text" id="new-account-box-email" /><br/>Real name: <input type="text" id="new-account-box-name" /><br/><span class="button" onclick="onLogin()">Create</span><div class="working-icon"><img src="./images/new/loading-anim.gif" alt="Loading..." /></div>';
  document.body.appendChild(tag);
  fb.setVisibility(0);
}

function addNewAccountBox () {
  var fb = new Box('new-account-box');
  var tag = fb.getTagObject();
  fb.addClass('popup-box');
  tag.innerHTML='Email: <input type="text" id="login-box-email" /><br/>Password: <input type="password" id="login-box-password" /><br/><span class="button" onclick="onCreate()">Create</span><div class="working-icon"><img src="./images/new/loading-anim.gif" alt="Loading..." /></div>';
  document.body.appendChild(tag);
  fb.setVisibility(0);
}

function onLoginOpen () {
  var box = document.getElementById('login-box');
  var box2 = document.getElementById('new-account-box');
  box2.object.switchVisibility(false);

  box.object.switchVisibility();

  return false;
}

function onNewAccount () {
  var box = document.getElementById('new-account-box');
  var box2 = document.getElementById('login-box');
  box2.object.switchVisibility(false);

  box.object.switchVisibility();
  return false;
}

function onCreate () {
  var box = document.getElementById('new-account-box');
  if (!box.object.isWorking() && box.object.getVisibility() == 10) {
    box.object.switchWorking(true);
    setTimeout(onFinishCreate, 2000);
  }
}

function onFinishCreate () {
  var box = document.getElementById('new-account-box');
  if (box.object.isWorking()) {
    box.object.switchWorking(false);
    if (box.object.getVisibility() == 10) {
      box.object.switchVisibility();
    }
  }
}

function onLoginOpen () {
  var box = document.getElementById('login-box');
  var box2 = document.getElementById('new-account-box');
  box2.object.switchVisibility(false);

  box.object.switchVisibility();

  return false;
}

function enableTabSwitcher (tabDiv) {
  var tabs = tabDiv.getElementsByTagName('li');
  for (var i=0;i<tabs.length;i++) {
    tabs[i].addEventListener('click',switchPanels,false);
  }
}

function switchPanels () {
  var list = this.parentNode;
  var tabs = list.getElementsByTagName('li');
  var tabfieldbox = document.getElementById(this.parentNode.getAttribute('for'));
  var tabfields = [];
  for (var i=0;i < tabfieldbox.childNodes.length;i++) {
    if (tabfieldbox.childNodes[i].style)
      tabfields.push(tabfieldbox.childNodes[i]);
  }
  var num = null;
  for( var i in tabs ) {
    if (tabs[i] == this) {
      num = i;
    }
    tabs[i].className=(num==i?"active":"");

    if (tabfields[i] && tabfields[i].style && tabfields[i].className!=='tablist-element')
      tabfields[i].style.display=(num==i?"block":"none");
  }
}

function switchEditableSpan (event) {
  function spanOnClick (event) {
    event.stopPropagation();
    return false;
  }

  function spanOnKeyPress (event) {
    if (event.keyCode==13)
      spanOnFinish.call(this, event);
  }

  function spanOnFinish (event) {
    var text = this.value;
    var parent = this.parentNode;
    var span = document.createElement('span');
    span.innerHTML = text;
    span.addEventListener('mousedown',switchEditableSpan,false);
    parent.removeChild(this);
    parent.appendChild(span);
  }

  var parent = this.parentNode;
  var text = this.innerHTML;
  var input = document.createElement('input');
  input.setAttribute('type','text');
  input.value = text;
  input.style.width=Math.floor(text.length/1.5)+"em";
  input.addEventListener('blur',spanOnFinish,false);
  input.addEventListener('keypress',spanOnKeyPress,false);
  input.addEventListener('mousedown',spanOnClick,false);
  parent.removeChild(this);
  parent.appendChild(input);
  input.focus();
  return false;
}