var fotocount = 2;
var scrollerInterval = null;
var min_index = 1;
var max_index = 1;
var direction = 'left';
var speedstep = 1;

function addFoto() 
{
  var inp = document.createElement("input");
  inp.type = "file";
  inp.name = "foto[" + fotocount + "]";
  inp.size = 52;
  inp.onchange=addFoto;
  document.getElementById("fotos").appendChild(inp);
  fotocount++;
  
  if (fotocount > 2)
    document.getElementById("classicsubmit").style.display = "inline";
}

// javascript equivalent function for php in_array() (case insensitive)
function in_array(needle, haystack)
{
  var n = needle.toLowerCase();
  for(var i in haystack)
  {
    if (haystack[i].toLowerCase() == n)
      return true;
  }
  return false;
}

function changeCity()
{
  window.clearInterval(scrollerInterval);
  document.getElementById('changeregion').style.display='block';
  document.getElementById('picsregion').focus();
  document.getElementById('introtext').style.display='none';
  document.getElementById('randomalbums_content').style.display='none';
  document.getElementById('randomalbums_background').style.display='none';
  document.getElementById('searchBox').style.display = 'none';
  document.getElementById('bgpic').style.display = 'block';
}

function cityDeselect()
{
  scrollerInterval = window.setInterval(scrollThumbDivs,40);
  document.getElementById('changeregion').style.display='none';
  document.getElementById('introtext').style.display='block';
  document.getElementById('randomalbums_content').style.display='block';
  document.getElementById('randomalbums_background').style.display='block';
  document.getElementById('searchBox').style.display = 'block';
  document.getElementById('bgpic').style.display = 'none';
}

// this function creates the html elements for a new thumbnail in the scroller
function createThumb(thumbscontainer, elementKey, before)
{
  var thumb = document.createElement('div');
  if (before)
  {
    min_index--;
    if(min_index == 0)
      min_index = numthumbs;
    
    max_index--;
    if(max_index == 0)
      max_index = numthumbs;
    
    thumb.style.width = 0;
  }
  else
  {
    min_index++;
    if(min_index > numthumbs)
      min_index = 1;
    
    max_index++;
    if(max_index > numthumbs)
      max_index = 1;
    
    thumb.style.width = "63px";
  }
  
  var thumb_link = document.createElement('a');
  thumb_link.href = "./"+random_thumbs[elementKey].albumlink;
  thumb_link.title = random_thumbs[elementKey].title;
  var thumb_pic = document.createElement('img');
  thumb_pic.src = "./MiniFoto-"+random_thumbs[elementKey].photokey+".jpg";
  thumb_pic.alt = random_thumbs[elementKey].title;
  thumb_pic.onmouseover = function() { doScroll = false; }
  thumb_pic.onmouseout = function() { doScroll = true; }
  thumb_link.appendChild(thumb_pic);
  thumb.appendChild(thumb_link);
  if (before)
    thumbscontainer.insertBefore(thumb, thumbscontainer.firstChild);
  else
    thumbscontainer.appendChild(thumb);
}

function checkWoonplaatsScroll(e)
{
  var keycode;
  if (window.event)
    keycode = window.event.keyCode;
  else if (e)
    keycode = e.which;
  
  switch(keycode)
  {
    case 38:
      if(document.getElementById('autocomplete_optionscontainer').style.display != 'block')
        return;
    
      if(selected_place > 1)
        selected_place--;
      else
        selected_place = 1;
      
      setSelection(selected_place);
      checkSubmitButtonState();
      return;
    break;
    case 40:
      if(document.getElementById('autocomplete_optionscontainer').style.display != 'block')
        return;
      
      if(selected_place < places.length)
        selected_place++;
      else
        selected_place = places.length;
      
      setSelection(selected_place);
      checkSubmitButtonState();
      return;
    break;
  }
}

function setSelection(index)
{
  var curid = 'place' + index;
  document.getElementById('picsregion').value = document.getElementById(curid).innerHTML;
  
  updateColor(curid);
}

function updateColor(curid)
{
  var options = document.getElementById('autocomplete_optionscontainer').getElementsByTagName('a');
  for(var i = 0; i < options.length; i++)
  {
    if(options[i].id == curid)
    {
      options[i].style.backgroundColor = '#000066';
      options[i].style.color = '#ffffff';
    }
    else
    {
      options[i].style.backgroundColor = '#ffffff';
      options[i].style.color = '#000000';
    }
  }
}

// this function requests the ajax data
var places;
function checkWoonplaatsInput(inputValue, e)
{
  var keycode;
  if (window.event)
    keycode = window.event.keyCode;
  else if (e)
    keycode = e.which;
  
  switch(keycode)
  {
    case 38:
    case 40:
      return;
    break;
    default:
    if(inputValue.length > 1)
      HTTP.get('index.php?m=front&a=3&input=' + inputValue, woonplaatsResponse, new Array());
    else
      document.getElementById('autocomplete_optionscontainer').style.display = 'none';
  }
  checkSubmitButtonState();
}

var selected_place = 0;
function woonplaatsResponse(html)
{
  if (html != null && document.getElementById('autocomplete_optionscontainer').value != '')
  {
    places = eval('(' + html + ')');
    if(places.length > 0)
    {
      var optionsOld = document.getElementById('autocomplete_optionscontainer');
      var optionsContainer = optionsOld.cloneNode(false);
      optionsOld.parentNode.replaceChild(optionsContainer, optionsOld);
      optionsContainer.id = 'autocomplete_optionscontainer';
      optionsContainer.style.display = 'block';
      
      selected_place = 0;
      var j = 1;
      for(var i in places)
      {
        var option = document.createElement('a');
        option.id = 'place' + j;
        option.href = 'javascript:void(null)';
        option.onmousedown = function()
        {
          document.getElementById('picsregion').value = this.firstChild.nodeValue;
          window.setTimeout('document.getElementById(\'region_form\').submit();', 250);
        }
        option.onmouseover = function()
        {
          selected_place = this.id.substr(5);
          updateColor(this.id);
        }
        
        option.appendChild(document.createTextNode(places[i]));
        optionsContainer.appendChild(option);
        j++;
      }
      var location = document.getElementById('changeregion');
      location.appendChild(optionsContainer);
    }
    else
    {
      document.getElementById('autocomplete_optionscontainer').style.display = 'none';
    }
  }
  else
  {
    document.getElementById('autocomplete_optionscontainer').style.display = 'none';
  }
  checkSubmitButtonState();
}

// this blurs hides the ajax optionslist when the input is not focused
var messageTimeout;
function blurAjaxWoonplaatsField()
{
  document.getElementById('autocomplete_optionscontainer').style.display='none';
  var picsregion = document.getElementById('picsregion');
  var pvalue = picsregion.value;
  if(pvalue.replace(/^\s+|\s+$/,'') == '')
  {
    picsregion.value = '';
    picsregion.className = 'passive';
  }
  else
  {
    if(!in_array(picsregion.value,places))
    {
      picsregion.value = '';
      picsregion.className = 'passive';
    }
  }
  checkSubmitButtonState();
}

// this function clears the input if it's the instruction text
function checkFocus()
{
  window.clearTimeout(messageTimeout);
  var picsregion = document.getElementById('picsregion');
  if(picsregion.className == 'passive') picsregion.value = '';
  picsregion.className = '';
  checkSubmitButtonState();
}

// check submit button state
function checkSubmitButtonState()
{
  pvalue = document.getElementById('picsregion').value;
  if(in_array(pvalue, places) && pvalue != '')
  {
    document.getElementById('citySubmitButton').disabled = false;
  }
  else
  {
    document.getElementById('citySubmitButton').disabled = true;
  }
}

// check submit permissions
function checkSubmitPermissions(formElement)
{
  pvalue = document.getElementById('picsregion').value;
  return ((pvalue != '') && in_array(pvalue, places));
}

var count = 0;

function initScrollThumbs()
{
  document.getElementById('picsregion').value = '';
  document.getElementById('picsregion').className = 'passive';

  var randomalbums_contentdiv = document.getElementById('randomalbums_content');
  if (numthumbs >= 7)
  {
    var leftButton = document.createElement('img');
    leftButton.src = scroller_back;
    leftButton.className = 'scroller_button scroller_left';
    leftButton.onmousedown = function()
    {
      direction = 'right';
      speedstep = 3;
    }
    
    leftButton.onmouseup = function()
    {
      direction = 'right';
      speedstep = 2;
    }
    
    leftButton.onmouseover = function()
    {
      direction = 'right';
      speedstep = 2;
    }

    leftButton.onmouseout = function()
    {
      direction = 'right';
      speedstep = 1;
    }
    
    var rightButton = document.createElement('img');
    rightButton.src = scroller_forward;
    rightButton.className = 'scroller_button scroller_right';
    rightButton.onmousedown = function()
    {
      direction = 'left';
      speedstep = 3;
    }
    
    rightButton.onmouseup = function()
    {
      direction = 'left';
      speedstep = 2;
    }
    
    rightButton.onmouseover = function()
    {
      direction = 'left';
      speedstep = 2;
    }

    rightButton.onmouseout = function()
    {
      direction = 'left';
      speedstep = 1;
    }

    var outerthumb = document.createElement('div');
    outerthumb.id = "outerthumbcontainer";
    var thumbcontainer = document.createElement('div');
    thumbcontainer.id = "thumbcontainer";
    thumbcontainer.onmouseover = function() {
      window.clearInterval(scrollerInterval);
    }
    thumbcontainer.onmouseout = function() {
      scrollerInterval = window.setInterval(scrollThumbDivs,40);
    }

    outerthumb.appendChild(thumbcontainer);
    randomalbums_contentdiv.appendChild(leftButton);
    randomalbums_contentdiv.appendChild(outerthumb);
    randomalbums_contentdiv.appendChild(rightButton);

    for (var i=1; i<=7; i++)
      createThumb(thumbcontainer, i, false)

    scrollerInterval = window.setInterval(scrollThumbDivs,40);
  }
  else if (numthumbs > 0)
  {
    var thumbcontainer = document.createElement('div');
    thumbcontainer.id = "smallthumbcontainer";
    
    if (numthumbs >= 5)
      numthumbs = 5;
    
    for (var i=1; i<=numthumbs; i++)
      createThumb(thumbcontainer, i, false);

    randomalbums_contentdiv.appendChild(thumbcontainer);
  }
  else
    randomalbums_contentdiv.style.display = 'none';
  
  min_index = numthumbs;
}

function scrollThumbDivs()
{
  var thumbcontainer = document.getElementById("thumbcontainer")
  
  if(!thumbcontainer)
    return;
  
  var thumb = thumbcontainer.firstChild;
  
  var width = parseInt(thumb.style.width);
  if (direction == "left")
  {
    if (width > 1)
    {
      var new_width = width - speedstep;
      if(new_width < 0)
        new_width = 0;
      thumb.style.width = new_width + 'px';
    }
    else
    {
      var par = thumb.parentNode;
      par.removeChild(thumb);
      window.setTimeout(function() {
          createThumb(par, max_index, false);
          }, 15);
    }
  }
  else
  {
    if (width+speedstep >= 63)
    {
      thumb.style.width = "63px";
      var par = thumb.parentNode;
      par.removeChild(par.lastChild);
      createThumb(thumb.parentNode, min_index, true);
    }
    else
    {
      var new_width = width + speedstep;
      if(new_width < 0)
        new_width = 0;
      thumb.style.width = new_width + 'px';
    }
  }
}