var layers = [over, front, scarf, lhand, rhand, hairwear, headwear, facejewl, njewl, coat, hair, facewear, belt, ajewl, top, ljewl, bottom, shoe, underwear, eyes, base, capeback, upperb, lowerb, back];


for (i=0;i<layers.length;i++) {
   layers[i].unshift(['spacer', 'spacer', 0]);
}

   base[0] = ['femalebase', 'Female Base', 0];

function clearKokomo() {
  document.getElementById('main').innerHTML = '';
}

function append(donde, quien) {
  document.getElementById(donde).innerHTML += quien;
}

function replaceAppend(donde, quien) {
  document.getElementById(donde).innerHTML = quien;
}

function show(id) {
  if (id.style.display =='inline') {
      id.style.display = 'none'
    }
    else {
      document.getElementById(id).style.display='inline';
    }
}

function hideCanvas() {
  var canvas = document.getElementById('canvas');
    if(canvas.style.display == 'block') {
      canvas.style.display = 'none';
    }
}

//

var maxpg;
var pN = null;
var pP = null;
function appendMen(layer, string, pC) {

  maxpg = Math.floor((layer.length-1)/30);

  var divMenu = '<div id="menu" class="menu">';

  for (i=0; i<=maxpg; i++) {
    if (i==pC) {
      navA = i+1;
    }
    else {
      var navA = "<a href=\"javascript:writeItems("+cLayer+", '"+string+"', "+i+")\">"+(i+1)+"</a>";
    }

    divMenu += navA + " ";

  }
  
  if (pC !== 0) {
    pP = pC -1;
    }
  else {
  pP = maxpg;
  }
  
  if (pC !== maxpg) {
    pN = pC + 1;
    }
  else {
    pN = 0;
  }

  //page anchors
  apP = "<a class='arrow' href=\"javascript:writeItems("+cLayer+", '"+string+"', "+pP+")\"><</a>";
  apN = "<a class='arrow' href=\"javascript:writeItems("+cLayer+", '"+string+"', "+pN+")\">></a>";  

  if (string !== 'base') {
    var unequip = '[<a href="javascript:changeNul(\'spacer\', \'spacer\', '+string+')">unequip</a>]';
  }
  else{
    var unequip = '<span class="strike">[unequip]</span>';
  }
  
    if (maxpg >1) {
      divMenu += "| " + apP + " " + unequip + " " + apN;
  }
  else {
    divMenu += "| " + unequip;
  }
  
  divMenu += '</div>';

  append('main', divMenu);

}




function writeItems(layer, string, pC) {
  hideCanvas();
  clearKokomo();
  equip = layer;
  cLayer = string;
  
  appendMen(layer, string, pC);

  var hold = (pC*30) +29 + 1;
  if (layer[hold] !== undefined) {
    var stop = hold;
  }
  else {
    var stop = layer.length - 1;
  }

    for (i=(hold - 29); i<=stop; i++) {
      var divClass = layer[i][6];
      var iName = layer[i][1];
      
      var sinSpace;
      if(layer[i][0] == true) {
        sinSpace = iName.replace(/ /g, '');
      }
      else {
        sinSpace = layer[i][0];
      }
       

      if (layer[i][7] == false) { 
        var preSrc = 'http://roliava.roliana.com/pre/'+sinSpace+'.gif';
    } 
      else {
        var preSrc = 'http://www.roliana.com/forums/shop/images/'+sinSpace+'.gif';
       }
      var anchor = "javascript:changeNul('"+sinSpace+"', '"+iName+"', '"+layer[i][3]+"', "+layer[i][4]+", '"+layer[i][5]+"', "+layer[i][7]+");";

    var item = '<div class=' + divClass + '><a href="'+anchor+'"><img src="'+preSrc+'" alt="[preview unavailable]" class="preview" />'+ iName+ '</a>';
    
    document.getElementById('main').innerHTML += item;
  }
  appendMen(layer, string, pC);
  
}

function storeItem(name, nameSpace, price) {
  equip[0][0] = name;
  equip[0][1] = nameSpace;
  equip[0][2] = price;
}

function changeNul(name, nameSpace, shop, price, misc, hasPre) {
  storeItem(name, nameSpace, price);
  itemInfo(name, nameSpace, shop, price, misc, hasPre);
  
  replaceAppend(cLayer, '<img src="http://www.roliana.com/forums/images/nulavatar/'+name+'.gif" />');

}

function itemInfo(name, nameSpace, shop, price, misc, hasPre) {
if(name !=='spacer') {
    replaceAppend('i1', ' ' + nameSpace);
    replaceAppend('i2', ' ' + shop);
    replaceAppend('i3', ' ' + price + ' gold');
    replaceAppend('i4', ' ' + misc);
    
    if (hasPre !==false) {
      var preEquippd = "<img id='equipped' src='http://www.roliana.com/forums/shop/images/" + name + ".gif' />";
      replaceAppend('s_equip', preEquippd);
    }
    else {
      var preEquippd = "<img id='equipped' src='http://www.roliava.roliana.com/pre/" + name + ".gif' />";
      replaceAppend('s_equip', preEquippd);
    }
    
  }
else;
}


function save() {
  clearCanvas();
  clearKokomo();
  totalEquip();
  
  for (i = layers.length - 1; i >= 0; i--) {
    draw(layers[i][0][0]);
  }
  document.getElementById("canvas").style.display = "block";
}

function draw(name) {
    var ctx = document.getElementById("canvas").getContext('2d');
    var img = new Image();

    img.onload = function(){
    //  ctx.globalCompositeOperation = 'destination-over';
      ctx.drawImage(img, 0, 0);
    }
      img.src = 'http://www.roliana.com/forums/images/nulavatar/' + name + '.gif';
  }
  
  function clearCanvas() {
  if (navigator.appName=="Microsoft Internet Explorer") {
    var ctx = document.getElementById("canvas").getContext('2d');
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect (0, 0, 140, 200);
  }
  else {
    var canvas = document.getElementById("canvas");
    canvas.parentNode.removeChild(canvas);
    append("canvasHolder", "<canvas id='canvas' width='140px' height='200px'></canvas>");
  }
}

function totalEquip() {

  var aruba = "<div id='aruba'></div>";
  replaceAppend('main', aruba);
  
  var total = 0;
  for (i=0; i<layers.length; i++) {
    if(layers[i][0][0] !== 'spacer') {
      var txtN = layers[i][0][1] + ': ';
      var txtG = layers[i][0][2];
    
      var total = layers[i][0][2] + total;
      var totalPrint = 'Total: ' + total + ' gold';
      
      append('aruba', "<div>" + txtN + txtG + "</div>");
    }
    else {}
  }
  append('aruba', totalPrint);
}