var Account = {

  MIN_BRANDNAME_LENGTH: 2,
  activeCategory: null,

  setActiveCategory: function(el)
  {
    Account.activeCategory = Account.getCategory(el);
  },

  handleMouseDown: function(el)
  {
    Account.setActiveCategory(el);

    if (el.parentNode.id == "searchResults")
    {
      if (Spif.isSafari)
      {
        // in safari, hide the scrollbar to prevent losing mouseover during drag
        var bv = document.getElementById('brandViewer');
        bv.style.overflow = 'hidden';
      }
      return;
    }

    if (!Spif.ClassNameAbstraction.contains(el.parentNode, 'dropBox'))
    {
      Spif.ClassNameAbstraction.add(el.parentNode, 'dropBox dropBox-onFinish_handleDrop');
    }

    Account.resizeThumbnail(el);
  },

  endDrag: function(el)
  {
    if (!Spif.isSafari)
    {
      return;
    }
    var bv = document.getElementById('brandViewer');
    bv.style.overflow = 'auto';
    bv.scrollTop = bv.scrollTop;
  },

  handleDrop: function(dropEl)
  {
    var brandId = dropEl.getElementsByTagName('img')[0].className.split("_")[1];
    if (brandId === null || typeof (brandId) === "undefined")
    {
      brandId = dropEl.getElementsByTagName('span')[0].className.split("_")[1];
    }
    var categoryId = Account.getCategory(dropEl);

    Account.actionHasBeenTaken();

    var dropBox = dropEl.parentNode;
    Spif.ClassNameAbstraction.remove(dropBox, 'dropBox-onFinish_handleDrop');
    Spif.ClassNameAbstraction.remove(dropBox, 'dropBox');

    Spif.ClassNameAbstraction.add(dropEl, "inCategory-" + categoryId);

    Account.resizeThumbnail(dropEl);
  },

  // new method that saves a snapshot of the current brands
  saveBrands: function(url)
  {
    if (!url)
      url = '/_/SaveBrands';

    var form = document.createElement('form');
    form.style.display = 'none';
    form.action = url;
    form.method = 'post';
    document.body.appendChild(form);

    var brandCategories = document.getElementById('brandCategories');
    var brandsImages = brandCategories.getElementsByTagName('img');
    var brandsSpans = brandCategories.getElementsByTagName('span');
    var catNames = brandCategories.getElementsByTagName('input');
    for (var i = 0; i < brandsImages.length; i++)
    {
      var input = Account.buildBrandInput(brandsImages[i]);
      if (input)
        form.appendChild(input);
    }
    for (var i = 0; i < brandsSpans.length; i++)
    {
      var input = Account.buildBrandInput(brandsSpans[i]);
      if (input)
        form.appendChild(input);
    }

    for (var i = 0; i < catNames.length; i++)
    {
      var input = Account.buildCatInput(catNames[i]);
      if (input)
        form.appendChild(input);
    }

    Account.pendingChanges = false;
    form.submit();
  },

  buildBrandInput: function(brand)
  {
    var matches = brand.className.match(/brand_\d+/);
    if (!matches)
      return null;
    var brandId = matches[0];
    var catId = Tools.getParentWithClassName(brand, 'dropBoxContainer').id.replace('cat_', '');
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = brandId;
    input.value = catId;
    return input;
  },

  buildCatInput: function(catInput)
  {
    var matches = catInput.id.match(/catname_\d+/);
    if (!matches)
      return null;
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = catInput.name;
    input.value = catInput.value;
    return input;
  },

  cancelEditing: function()
  {
    if (confirm('Weet je zeker dat je je veranderingen ongedaan wilt maken?'))
    {
      window.location.reload();
    }
  },

  getNumberOfBrandsInCategory: function(categoryId)
  {
    var categoryEl = document.getElementById('dropBox' + categoryId);
    var divs = categoryEl.getElementsByTagName('div');
    var brandsInCategory = [];

    for (var i = divs.length - 1; i >= 0; i--)
    {
      var div = divs[i];
      if (Spif.ClassNameAbstraction.contains(div, 'brandImage'))
      {
        brandsInCategory.push(div);
      }
    }

    return brandsInCategory.length;
  },

  deleteBrandFromAccount: function(removeLink)
  {
    var brandId = Account.getBrandId(removeLink);
    var categoryId = Account.getCategory(removeLink.parentNode);

    Account.actionHasBeenTaken();
    //Account.addEvent("remove", brandId, categoryId);

    var dropBox = removeLink.parentNode.parentNode;
    dropBox.removeChild(removeLink.parentNode);

    var numBrandsInCategory = Account.getNumberOfBrandsInCategory(categoryId);

    if (numBrandsInCategory < 5)
    {
      Spif.ClassNameAbstraction.add(dropBox, 'dropBox dropBox-onFinish_handleDrop');
    }

  },

  getBrandId: function(el)
  {
    var id = 0;
    if (el.parentNode.getElementsByTagName('img').length > 1)
    {
      id = el.parentNode.getElementsByTagName('img')[0].className.split("_")[1];
    }
    else
    {
      id = el.parentNode.getElementsByTagName('span')[0].className.split("_")[1];
    }
    return id;
  },

  getBrandHtml: function(assetId, name, id, assetExists)
  {
    var array = [];
    array.push(
      '<div class="brandImage draggable-onFinish_endDrag dragger unhover" ',
      'unselectable="on" title="', name, '" ',
      'onmousedown="Account.handleMouseDown(this)"><div class="brandLogo">'
    );
    if (!assetExists && Spif.isSafari)
    {
      array.push('<span class="noImage brand_', id, '">', name, '</span>');
    }
    else
    {
      array.push(
        '<img src="/AssetServer.ashx/branddating/', assetId, '?brandselector',
        '" alt="', name, '" class="brand_', id, '"/>'
      );
    }
    array.push(
      '<span class="ieSpace">&nbsp;</span></div>',
      '<a title="Verwijderen" onclick="Account.deleteBrandFromAccount(this)" href="#">',
      '<img alt="x" src="/img/delete.gif"/></a></div>'
    );
    return array.join("");
  },

  getCategory: function(el)
  {
    return el.parentNode.parentNode.id.replace("dropBox", "");
  },

  createJsStringLit: function(s)
  {
    // AARGH! Dit krijg je als je JS in HTML genereert in weer een ander JS.
    return "'" + s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\"/g, "&quot;") + "'";
  },

  // click a category in the left hand column
  filterBrandsByCategory: function(el)
  {
    var q = el.firstChild.nodeValue;
    Account.filterBrands(q, true);
    Account.endAddNewBrandProcedure();
  },

  filterBrands: function(q, isCategory)
  {
    var searchResults = document.getElementById('searchResults');
    var filter = document.getElementById('filter');
    var filterSubmit = document.getElementById('filterSubmit');

    q = q || filter.value;

    var mode = filterSubmit.name;
    var innerHTML = [];
    var noInput = !q || q == "Zoek hier je merken" || q == "Type hier je nieuwe merk";
    var invalidInput = q.length < Account.MIN_BRANDNAME_LENGTH && q.length > 0;
    var postUrl = isCategory ? "/_/GetBrandsExactlyByTag" : "/_/GetBrandsByNameOrTag";

    // cancel if bad input
    if (noInput || invalidInput)
    {
      return;
    }

    // if we arrived via a link to add a brand, put that value in the filter input
    if (filter.value != q && !isCategory)
    {
      filter.value = q;
    }

    // setup
    Account.hideEmptyAddNewBrandForm();
    Account.hideAddNewBrandForm();
    Account.hideAddLogoForm();
    Account.resetBrandAddForms();
    Account.setAddBrandName();
    Account.showGlasspane();
    Account.disableSearchInput();

    // execute search  
    Tools.post("post", postUrl, function(obj)
    {

      if (obj.responseXML === null)
      {
        return;
      }

      // error: probably got a bug page returned
      if (obj.responseXML.selectNodes("/brands") === null)
      {
        return;
      }

      var nodes = obj.responseXML.selectNodes("//record");
      var numberOfNodes = Account.justAddedBrand ? 1 : nodes.length;

      // empty results
      searchResults.innerHTML = "";

      // determine if any results match the search query exactly
      var hasExacts = Account.hasExacts(nodes, q);

      // if in Add mode and no (exact) results, show the "add new brand form"
      var noResultsOrExacts = (nodes.length === 0 || !hasExacts);
      if (noResultsOrExacts && mode == "modeAdd")
      {
        Account.showAddNewBrandForm();
        Account.hideGlasspane();
        Account.enableSearchInput();
        return;
      }

      // if in Search mode, determine whether to show "niet gevonden?"
      var noResultsOrSearchMode = mode == "modeSearch" || nodes.length === 0;
      if (!isCategory && q !== "" && noResultsOrSearchMode && !hasExacts)
      {
        innerHTML.push(
          '<div class="brandNotFound">Niet gevonden? ',
          '<a href="#" onclick="Account.showAddNewBrandForm(',
          Account.createJsStringLit(q),
          '); return false">Voeg ', q, ' toe!</a></div>'
        );
      }

      // create html for all the returned brands
      var brandsHtml;
      brandsHtml = Account.createHtmlFromResults(nodes, hasExacts ? 1 : numberOfNodes);

      innerHTML.push(brandsHtml);

      // if search returned results and we're in Add mode, show "Nee, dit merk bedoelde ik niet" option
      if (numberOfNodes > 0 && mode == "modeAdd" && !hasExacts)
      {
        innerHTML.push(
          '<div id="didntMeanThatBrand"><a href="#" onclick="Account.showAddNewBrandForm(); return false">',
          'Nee, dit merk bedoel ik niet</a></div>'
        );
      }

      // display results
      searchResults.innerHTML = innerHTML.join("");

      // scroll search results pane to top
      var bv = document.getElementById('brandViewer');
      bv.scrollTop = 0;

      // remove "loading" elements
      Account.hideGlasspane();
      Account.enableSearchInput();

      // clean up temporary values
      Account.justAddedBrand = false;

    }, { q: q });
  },

  createHtmlFromResults: function(nodes, total)
  {
    var innerHTML = [];
    for (var i = 0; i < total; i++)
    {
      var node = nodes[i];
      var assetId = node.getAttribute("asset_id");
      var name = node.getAttribute("name");
      var id = node.getAttribute("id");
      var assetExists = node.getAttribute("assetExists") && node.getAttribute("assetExists").toLowerCase() == "true";

      if (name === null || id === null)
      {
        continue;
      }

      innerHTML.push(Account.getBrandHtml(assetId, name, id, assetExists));
    }
    return innerHTML.join("");
  },

  hasExacts: function(nodes, q)
  {
    var hasExacts = false;
    for (var i = 0; i < nodes.length; i++)
    {
      var node = nodes[i];
      var name = node.getAttribute("name");
      if (name.toLowerCase() == q.toLowerCase())
      {
        hasExacts = true;
        break;
      }
    }
    return hasExacts;
  },

  startAddNewBrandProcedure: function()
  {
    if (!Spif.ClassNameAbstraction.contains(document.body, "startAddNewBrandProcedure"))
    {
      Spif.ClassNameAbstraction.add(document.body, "startAddNewBrandProcedure");
    }

    var filter = document.getElementById('filter');
    var filterSubmit = document.getElementById('filterSubmit');
    var startAddLink = document.getElementById('startAddLink');

    try { filter.focus(); } catch (e) { }
    filter.value = "Type hier je nieuwe merk";
    filter.select();

    if (Spif.isIE)
    {
      //filterSubmit.outerHTML = filterSubmit.outerHTML.replace(/type=button/, 'type=image');
      filterSubmit.value = "+";
      filterSubmit.style.fontSize = "16px";
    }
    else
    {
      filterSubmit.type = "image";
      filterSubmit.src = "/img/plus.png";
    }

    filterSubmit.name = "modeAdd";

    startAddLink.innerHTML = "Annuleren";

    Account.showEmptyAddNewBrandForm();
  },

  endAddNewBrandProcedure: function()
  {
    Spif.ClassNameAbstraction.remove(document.body, "startAddNewBrandProcedure");

    var filter = document.getElementById('filter');
    var filterSubmit = document.getElementById('filterSubmit');
    var startAddLink = document.getElementById('startAddLink');

    try { filter.focus(); } catch (e) { }
    filter.value = "Zoek hier je merken";

    filterSubmit.name = "modeSearch";

    if (Spif.isIE)
    {
      //filterSubmit.outerHTML = filterSubmit.outerHTML.replace(/type=image/, 'type=button');
      filterSubmit.style.fontSize = "";
    }
    else
    {
      filterSubmit.type = "button";
      filterSubmit.removeAttribute("src");
    }

    filterSubmit.value = "Zoeken";

    Account.resetBrandAddForms();

    startAddLink.innerHTML = "Merk toevoegen";

    Account.hideEmptyAddNewBrandForm();
  },

  toggleAddNewBrandProcedure: function()
  {
    if (Spif.ClassNameAbstraction.contains(document.body, "startAddNewBrandProcedure"))
      Account.endAddNewBrandProcedure();
    else
      Account.startAddNewBrandProcedure();
  },

  resetBrandAddForms: function(name)
  {
    var form = document.getElementById('brandAddForms');
    form.reset();
    this.hideErrorMessage('newBrandName');
    this.hideErrorMessage('newBrandTags');
    this.hideErrorMessage('newBrandUrl');
  },

  hideErrorMessage: function(id)
  {
    var errorEl = document.getElementById('error-' + id);
    if (!errorEl)
    {
      return;
    }
    if (!Spif.ClassNameAbstraction.contains(errorEl, "hide"))
    {
      Spif.ClassNameAbstraction.add(errorEl, "hide");
    }
  },

  // called from within the iframe upon successful brand creation
  addNewBrand: function(assetId, brandId)
  {
    var name = document.getElementById('newBrandName').value;

    Account.actionHasBeenTaken();

    Account.endAddNewBrandProcedure();
    Account.hideAddNewBrandForm();
    Account.resetBrandAddForms();

    // show the added brand in the search results
    document.getElementById('filter').value = name;
    Account.justAddedBrand = true;
    Account.filterBrands(name);
  },



  showGlasspane: function()
  {
    var brandlist = document.getElementById('brandList');
    if (!Spif.ClassNameAbstraction.contains(brandlist, 'showGlassPane'))
    {
      Spif.ClassNameAbstraction.add(brandlist, 'showGlassPane');
    }
  },
  hideGlasspane: function()
  {
    var brandlist = document.getElementById('brandList');
    Spif.ClassNameAbstraction.remove(brandlist, 'showGlassPane');
  },

  disableSearchInput: function()
  {
    var filter = document.getElementById('filter');
    filter.blur();
    filter.disabled = true;
  },
  enableSearchInput: function()
  {
    var filter = document.getElementById('filter');
    filter.blur();
    filter.disabled = false;
  },

  showEmptyAddNewBrandForm: function()
  {
    if (!Spif.ClassNameAbstraction.contains(document.body, "showEmptyAddNewBrandForm"))
    {
      Spif.ClassNameAbstraction.add(document.body, "showEmptyAddNewBrandForm");
    }
  },
  hideEmptyAddNewBrandForm: function()
  {
    Spif.ClassNameAbstraction.remove(document.body, "showEmptyAddNewBrandForm");
  },

  showAddNewBrandForm: function()
  {
    var didntMean = document.getElementById('didntMeanThatBrand');
    if (didntMean)
    {
      didntMean.parentNode.removeChild(didntMean);
    }

    if (!Spif.ClassNameAbstraction.contains(document.body, "showAddNewBrandForm"))
    {
      Spif.ClassNameAbstraction.add(document.body, "showAddNewBrandForm");
    }
  },
  hideAddNewBrandForm: function()
  {
    Spif.ClassNameAbstraction.remove(document.body, "showAddNewBrandForm");
  },

  showAddLogoForm: function()
  {
    if (!Spif.ClassNameAbstraction.contains(document.body, "showAddLogoForm"))
    {
      Spif.ClassNameAbstraction.add(document.body, "showAddLogoForm");
    }
  },
  hideAddLogoForm: function()
  {
    Spif.ClassNameAbstraction.remove(document.body, "showAddLogoForm");
  },

  setAddBrandName: function()
  {
    var filter = document.getElementById('filter');
    var newBrandName = document.getElementById('newBrandName');
    newBrandName.value = filter.value;
  },

  resizeThumbnail: function(el)
  {
    var img = el.getElementsByTagName('img')[0];
    if (img)
    {
      img.src = img.src.replace('brandselector', 'brandtiny');
    }
  },

  // called from within iframe if bad image upload
  throwError: function(id, error)
  {
    if (id == "default")
    {
      alert(error);
    }
    else
    {
      var el = document.getElementById('error-' + id);
      el.innerHTML = error;
      Spif.ClassNameAbstraction.remove(el, 'hide');
    }
  },

  cancel: function()
  {
    return confirm("Weet je zeker dat je je account wilt opzeggen?\nJe kunt niet meer terug nadat je hier op OK klikt.");
  },

  actionHasBeenTaken: function()
  {
    Account.pendingChanges = true;
    window.onbeforeunload = function()
    {
      if (Account.pendingChanges)
      {
        return "Je hebt nog onopgeslagen wijzigingen.\nWeet je zeker dat je weg wilt navigeren van deze pagina?";
      }
    };
  },

  // TODO: move to seperate file, this has nothing to do with the brand editor
  // used to remove an alert from user profile -> alerts management
  removeAlert: function(el)
  {
    var name = el.parentNode.getElementsByTagName('span')[0].innerHTML;

    if (!confirm("Wil je geen mailtjes meer ontvangen als iemand het merk '" + name + "' aan zijn of haar profiel toevoegt?"))
    {
      return false;
    }

    Tools.post("post", "/_/RemoveAlert", function()
    {
      var li = el.parentNode;
      var ul = li.parentNode;
      ul.removeChild(li);
    }, { name: name });

    return false;
  },


  setSlogan: function(slogan, merk)
  {
    //var slogan = (el.parentElement) ? el.parentElement.innerText : el.parentNode.textContent;
    document.getElementById('sloganText').value = slogan;
    document.getElementById('merk').value = merk;
  },

  nextThreeSlogans: function(el)
  {
    var nextThree = el.parentNode.nextSibling;
    if (nextThree == null)
      nextThree = el.parentNode.parentNode.firstChild;
    while (nextThree.nodeType != 1)
    {
      nextThree = nextThree.nextSibling
      if (nextThree == null)
        nextThree = el.parentNode.parentNode.firstChild;
    }
    Spif.ClassNameAbstraction.remove(el.parentNode, 'selected');
    Spif.ClassNameAbstraction.add(nextThree, 'selected');
  },

  removeSloganEditor: function()
  {
    var sloganContainer = document.getElementById('sloganInputFormContainer');
    Spif.ClassNameAbstraction.replace(sloganContainer, 'active', 'inactive');
    document.getElementById("sloganText").value = currentSlogan;
  },

  updateSlogan: function()
  {
    var slogan = document.getElementById('sloganText').value;
    var merk = document.getElementById('merk').value;
    currentSlogan = slogan;
    Tools.post("post", "/_/UpdateSlogan", function()
    {
      document.getElementById('sloganSubmit').style.display = 'block';
    }, { 'slogan': slogan, 'merk': merk });
    this.removeSloganEditor();
  },

  focusInput: function(id, str)
  {
    if (str == "Type hier je eigen omschrijving")
      document.getElementById(id.replace("_", "name_")).value = "";
  },

  overInput: function(id)
  {
    var el = document.getElementById(id);

    if (!el.className.match(/default/))
      el.className = el.className + " default";
  },

  blurInput: function(id, str)
  {
    var el = document.getElementById(id);

    if (str != "" && str != "Type hier je eigen omschrijving")
    {
      if (el.className.match(/default/))
        el.className = el.className.replace(" default", "");
    }
    else
      document.getElementById(id.replace("_", "name_")).value = "Type hier je eigen omschrijving";
  },

  outInput: function(id, str)
  {
    var el = document.getElementById(id);

    if (str != "" && str != "Type hier je eigen omschrijving")
    {
      if (el.className.match(/default/))
        el.className = el.className.replace(" default", "");
    }
  },
  
  showExamples : function()
  {
    var el = document.getElementById('membersExamples');
    el.style.display = 'block';
    return false;
  },
  
  hideExamples : function()
  {
    var el = document.getElementById('membersExamples');
    el.style.display = 'none';
    return false;
  }
};

// Hooks for Spiffy (class="draggable ondrop_handledrop" etc)
function handleDrop(el) { Account.handleDrop(el); }
function endDrag(el) { Account.endDrag(el); }