function openToddDialog(container, canCloseWindow)
{
  var settings = { canclose: canCloseWindow };

  showElementAsDialog(container, settings);

  var closeButton = $("closedialogbutton");
  if (closeButton)
  {
    closeButton.setStyle("display", (canCloseWindow ? "block" : "none"));
  }
}

function setColor(colorValue)
{
  var colorChoice = $("color");
  colorChoice.value = colorValue;
  onColorSelect(colorChoice);
}

var selectedColor;
function onColorSelect(selectElement)
{
  var selected = selectElement.getSelected();

  if (selected.length == 1)
  {
    var sizechoice = $("sizechoice");
    sizechoice.options.length = 0; // reset size options

    selectedColor = selected[0];
    if (selectedColor.value == "")
    {
      sizechoice.options[0] = new Option("-- Kies eerst een kleur --", -1, false, false);
    }
    else
    {
      sizechoice.options[0] = new Option("-- Kies een maat --", 0, false, false);

      var sizes = selectedColor.getAttribute("data-sizes");
      var sizes_json = JSON.decode(sizes);

      for (i = 0; i < sizes_json.length; i++)
        sizechoice.options[i+1] = new Option(sizes_json[i].title, sizes_json[i].id, false, false);
    }
  }
}

var productsInBasket = false;
function onOrderSubmit(articleTitle)
{
  var errorMessage = "";

  var sizeChoice = $("sizechoice");
  var size = sizeChoice.value;
  if (size == -1)
  {
    errorMessage = "- Kiest u a.u.b. eerst een kleur voor het artikel\n";
  }
  else if (size == 0)
  {
    errorMessage = "- Kiest u a.u.b. een maat voor het artikel\n";
  }

  var nrArticles = $("nrarticles").value;
  var validNrArticles = nrArticles != "" && !isNaN(nrArticles) && Math.round(nrArticles) == nrArticles;
  if (!validNrArticles)
  {
    errorMessage = errorMessage + '- Vult u a.u.b. een geldig aantal artikelen in';
  }

  if (errorMessage != "")
  {
    alert(errorMessage);
  }
  else
  {
    // get selected size properties
    var selectedSize = sizeChoice.getSelected();
    var sizeProperties = { title: selectedSize[0].innerHTML
                         , value: size
                         };
    addOrderRow(articleTitle, selectedColor, sizeProperties, nrArticles);
    $("nextorder").innerHTML = "Volgende bestelling";
  }
}

function addOrderRow(articleTitle, color, size, nrArticles)
{
  $("orderedproducts").setStyle("display", "block");
  var productstabletbody = $("productstabletbody");
  var numRows = productstabletbody.getElements('tr').length;

  // add hidden inputs to the form
  var formElem = $("gotoorderpageform");

  //hidden color input
  var hiddenColor = new Element('input', { type: 'hidden'
                                         , name: 'color-' + numRows
                                         , value: color.value
                                         });
  formElem.appendChild(hiddenColor);

  //hidden size input
  var hiddenSize = new Element('input', { type: 'hidden'
                                        , name: 'size-' + numRows
                                        , value: size.value
                                        });
  formElem.appendChild(hiddenSize);

  // hidden num articles input
  var hiddenArticles = new Element('input', { type: 'hidden'
                                            , name: 'nrarticles-' + numRows
                                            , value: nrArticles
                                            });
  formElem.appendChild(hiddenArticles);

  // create a new row
  var row = new Element('tr', { html: '<td align="left" valign="middle" class="articlename">' + articleTitle + '</td>'
                                    + '<td align="left" valign="middle" class="color">' + color.innerHTML + '</td>'
                                    + '<td align="left" valign="middle" class="size">' + size.title + '</td>'
                                    + '<td align="left" valign="middle" class="nrarticles">' + nrArticles + '</td>'
                              });

  //last column: a 'delete' link
  var lastCol = new Element('td', { "class": "deletelink" });
  var deleteLink = new Element('a', { text: 'X'
                                    , href: '#'
                                    , events: { click: deleteOrderRow.bind(row, hiddenColor, hiddenSize, hiddenArticles) }
                                    });

  lastCol.appendChild(deleteLink); // add delete link to last column
  row.appendChild(lastCol); // add col to row

  productstabletbody.appendChild(row); // add the row to the table

  productsInBasket = true;
}

function deleteOrderRow(hiddenColor, hiddenSize, hiddenArticles)
{
  var msg = "Weet u zeker dat u het geselecteerde artikel uit de lijst wilt halen?";
  if (confirm(msg))
  {
    this.dispose();
    hiddenColor.dispose();
    hiddenSize.dispose();
    hiddenArticles.dispose();
  }
  checkHideOrderProducts();
  return false; // prevent page scrolling
}

function checkHideOrderProducts()
{
  var productstabletbody = $("productstabletbody");
  var numRows = productstabletbody.getElements('tr').length;

  //if 1 row remains (the <th>-row), hide the products
  if (numRows <= 1)
  {
    productsInBasket = false;
    $("orderedproducts").setStyle("display", "none");
  }
}

function checkArticlesInBasket()
{
  if (productsInBasket == false)
  {
    alert("U heeft nog geen bestellingen toegevoegd");
    return false;
  }

  return true;
}

function ondeliverysamechange()
{
  var checkbox = $("delivery_same_as_invoice");
  if (checkbox.checked)
  {
    $("deliveryaddress").disabled = true;
    $("deliveryzip").disabled = true;
    $("deliverycity").disabled = true;
  }
  else
  {
    $("deliveryaddress").disabled = false;
    $("deliveryzip").disabled = false;
    $("deliverycity").disabled = false;
  }
}

function updateOptionalQuestions()
{
  $('questions_if_print1').setStyle('display', $('print1_position').value ? 'block' : 'none');
  $('questions_if_print2').setStyle('display', $('print2_position').value ? 'block' : 'none');
  $('questions_if_print3').setStyle('display', $('print3_position').value ? 'block' : 'none');
}
function initializeOrderForm(form)
{
  //add a change handler to all selects, to make sure optional questions are shown/hidden when it is triggered
  form.getElements('select').addEvent('change', updateOptionalQuestions);
  //and directly invoke it on the form, to update it now
  updateOptionalQuestions();
}

function initializePage()
{
  var myMenu = new MenuMatic({ orientation:'vertical' });

  var rotater = new Rotater('.slideshow'
          ,{              //Class of elements that should rotate.
            slideInterval:4000,                                   //Length of showing each element, in milliseconds
            transitionDuration:2000                               //Length crossfading transition, in milliseconds
          });

  $$('form#orderform').each(initializeOrderForm);

  setDialogTemplate('\
      <a onclick="closeCurrentDialog();" id="closedialogbutton" class="dialog_close">X</a>\
      <div id="dialogbody"></div>\
  ', "dialogbody");
}

window.addEvent("domready", initializePage);