var CurrentFolder = "";

function PicInit()
{
  //document.getElementById('showit').innerHTML = document.myForm.selectfrom.value;

  if (document.getElementById('PicFolder') == null)
    return;

  ShowFolders();
  ShowSelected();
  PicFolder('PicFolder0');
}

function PicFolder(id)
{
  if (CurrentFolder != "") {
    document.getElementById(CurrentFolder).style.background  = '#404080';
    document.getElementById(CurrentFolder).style.fontWeight  = 'normal';
  }

  CurrentFolder = id;

  document.getElementById(CurrentFolder).style.background    = 'gray';
  document.getElementById(CurrentFolder).style.fontWeight    = 'bold';

  ShowImages(CurrentFolder);
}

function PicImages(id)
{
  selected = document.PicSelForm.PicSelectedValues.value;

  ElementId = 'PicImages' + id;

  selected += document.getElementById(ElementId).src + '\n';

  document.PicSelForm.PicSelectedValues.value = selected;

  ShowSelected();
}

function PicSelected(id)
{


  selected = document.PicSelForm.PicSelectedValues.value;

  images = selected.split('\n');

  selected = ""
  for (i=0; i<images.length; ++i)
    if ( (i != id) && (images[i] != "") )
      selected += images[i] + '\n';

  document.PicSelForm.PicSelectedValues.value = selected;

  ShowSelected();
}

function ShowFolders()
{
    html = "";

    value = document.PicSelForm.PicFolderValues.value;

    folders = value.split('\n');

    for (i=0; i<folders.length; ++i)
      if (folders[i] != '')
        html += DivFolder(i, folders[i].substr(0,folders[i].length-1));

    document.getElementById('PicFolder').innerHTML = html;
    
}

function DivFolder(Index,FolderName)
{    
    html  = "<div id='PicFolder" + Index + "' ";
    html += "onclick='PicFolder(\"PicFolder" + Index + "\")' ";
    html += "style='margin: 7px 5px 7px 5px; font-size: 12px; color:white; max-width: 190px;'>";
    html += FolderName;
    html += "</div>";
    return html;
}

function ShowImages(Folder)
{
    html = "";

    FolderUrl = "/albums/" + document.getElementById(Folder).innerText + "/";

    value = document.PicSelForm.PicImagesValues.value;

    images = value.split('\n');

    for (i=0; i<images.length; ++i) {
      if (images[i] != '')
        if (images[i].substr(0, FolderUrl.length) == FolderUrl)
            html += ImageTag(i, images[i]);
    }

    document.getElementById('PicImages').innerHTML = html;

}

function ImageTag(Index,ImageUrl)
{
    html  = "<img id='PicImages" + Index + "' ";
    html += "onclick='PicImages(" + Index + ")' ";
    html += "src='"+ImageUrl+"'"; 
    html += "width=192px ";
    html += "style='border:solid 1px gray;'";
    html += "/>";
    return html;
}   

function ShowSelected()
{
    html = "";

    value = document.PicSelForm.PicSelectedValues.value;

    images = value.split('\n');

    for (i=0; i<images.length; ++i) {
      if (images[i] != '')
        html += SelectedTag(i, images[i]);
    }

    document.getElementById('PicSelected').innerHTML = html;

}

function SelectedTag(Index,ImageUrl)
{
    html  = "<img id='PicSelected" + Index + "' ";
    html += "onclick='PicSelected(" + Index + ")' ";
    html += "src='"+ImageUrl+"'"; 
    html += "width=192px ";
    html += "style='border:solid 1px gray;'";
    html += "/>";
    return html;
}