if (!album_initialized) {
  var nb_vignettes = 6;
  var step = 5;

  var current_album = null;
  var albums = new Array();
  var album_initialized = true;
}

var colorbg = "#CCCCCC"; //couleur de fond
var colorlien = "#000000"; //couleur du texte
var colorsel = "#0000CC"; //couleur selection
var taillebg = 150 //largeur du menu

if(navigator.appName.substring(0,3) == "Net")
    document.captureEvents(Event.MOUSEMOVE);

function position(p)
{
position_x = (navigator.appName.substring(0,3) == "Net") ? p.layerX : event.x+document.body.scrollLeft;
position_y = (navigator.appName.substring(0,3) == "Net") ? p.layerY : event.y+document.body.scrollTop;
}

function menu_sel(selec, lienmenu)
{
if(selec == 1)
{
lienmenu.style.background = colorsel;
lienmenu.style.color = colorbg;
}
else
{
lienmenu.style.background =colorbg;
lienmenu.style.color = colorlien;
}
}


function newAlbum() {
  current_album = new Album(albums.length);
  albums.push(current_album);
}

function Photo(id, src, width, height, vignette, legende) {
  this.id = id;
  this.src = src;
  this.width = width;
  this.height = height;
  this.vignette = vignette;
  this.legende = legende;
  this.img = null;
}

function clearVignettesTimer()
{
  if (vignettes_timer) {
    clearInterval(vignettes_timer);
    vignettes_timer = null;
  }
}

function show_vignettes()
{
  clearVignettesTimer();
  _showbutton.style.visibility = "hidden";
  if (vignettes_height < 100)
    vignettes_timer = setInterval("changeHeight(+10)", 60);
}

function hide_vignettes()
{
  clearVignettesTimer();
  if (vignettes_height > 0)
    vignettes_timer = setInterval("changeHeight(-10)", 60);
}

function changeHeight(value)
{
  vignettes_height += value;
  _vignettes.style.height = vignettes_height + "px";
  if (vignettes_height == 100 || vignettes_height == 0)
    clearInterval(vignettes_timer)
}

function Album(id) {
  this.photos = new Array();
  this.id = id;
  this.rights = 0;
  this.current = null;
  this.zoomed = null;
  this.pos = 0;
  this.left = 0;
  this.scrolltimer = null;
  this.direction = 0;
  this.vignettes_height = 0;
  this.vignettes_timer = null;
  this.directory = null;

  this._showbutton = null;
  this._vignettes = null;
  this._scroll = null;
  this._scroll_tr = null;
  this._view = null;
  this._zoom = null;
  this._zoomimg = null;
  this._scroll_left = null;
  this._scroll_right = null;
  this._menu = null;
  
  function add(photo) {
    this.photos.push(photo);
  }

  function write(rights) {
    this.rights = rights;
    document.write(' \
<div class="album"> \
    <div id="photo' + this.id + '" class="photo" onmousemove="position(event)" oncontextmenu="return(albums[' + this.id + '].menu(1))" onclick="return(albums[' + this.id + '].menu(2))"> \
      <table><tr><td><img id="view' + this.id + '" src="" alt="" /></td></tr></table> \
    </div> \
    <div id="legende' + this.id + '" class="legende"> \
    </div> \
  <div id="vignettes' + this.id + '" class="vignettes"> \
    <table><tr> \
    <td class="scroll-left" id="scroll-left' + this.id + '">&lt;</td> \
    <td> \
      <div class="defilement"> \
      <table id="scroll' + this.id + '" style="border-collapse:collapse;border-spacing:0px;margin:0px;padding:0px;"><tr id="scroll_tr' + this.id + '"> \
      <td></td> \
      </tr></table> \
      </div> \
    </td> \
    <td class="scroll-right" id="scroll-right' + this.id + '">&gt;</td> \
    </tr></table> \
    <div class="zoom" id="zoom' + this.id + '"> \
      <a href="javascript:albums[' + this.id + '].display()" onmouseout="albums[' + this.id + '].unzoom()"><img id="zoomimg' + this.id + '" src="#" alt=""/></a> \
    </div> \
  </div>'
);
   if (rights > 0) {
     document.write('<div id="menu_context' + this.id + '" style="z-index:500;position:absolute;width:'+taillebg+'px; border:2px solid #9D9DA1; background-color:'+colorbg+'; font-family:Verdana; font-size:10px; cursor:default; visibility:hidden;padding:3">');
     if (rights & 1) {
       texte = "<img src='squelette/images/icon_download.png' style='padding:4px 2px 0px 2px;border:0px' width='12' height='12' /><span style='line-height:12px'>T&eacute;l&eacute;charger la photo</span>";
       lien = "javascript:albums[" + this.id + "].download()";
       document.write('<div onmouseover="menu_sel(1, this)" onmouseout="menu_sel(0, this)"><a href="'+lien+'" style="text-decoration:none;color:'+colorlien+'">'+texte+'</a></div>');
       if (rights & (2+4))
         document.write('<div onmouseover="menu_sel(1, this)" onMouseOut="menu_sel(0, this)"><hr width="'+(taillebg-5)+'" size="1" color="9D9DA1" /></div>');
     }
     if (rights & 2) {
       texte = "<img src='squelette/images/icon_add.gif' style='padding:4px 2px 0px 2px;border:0px' width='12' height='12' /><span style='line-height:12px'>Ajouter une photo</span>";
       lien = "javascript:albums[" + this.id + "].display_upload()";
       document.write('<div onmouseover="menu_sel(1, this)" onmouseout="menu_sel(0, this)"><a href="'+lien+'" style="text-decoration:none;color:'+colorlien+'">'+texte+'</a></div>');
     }
     if (rights & 4) {
       texte = "<img src='squelette/images/icon_remove.png' style='padding:4px 2px 0px 2px;border:0px' width='12' height='12' /><span style='line-height:12px'>Supprimer cette photo</span>";
       lien = "javascript:albums[" + this.id + "].display_remove()";
       document.write('<div onmouseover="menu_sel(1, this)" onmouseout="menu_sel(0, this)"><a href="'+lien+'" style="text-decoration:none;color:'+colorlien+'">'+texte+'</a></div>');
     }
     document.write('</div>');
   }
  document.write('</div>');
  }

  function menu(display) {
    if (this._menu) {
      if (display==0 || (display==2 && this._menu.style.visibility == "visible")) {
        this._menu.style.visibility = "hidden";
      }
      else {
        this._menu.style.top = position_y + "px";
        this._menu.style.left = position_x + "px";
        this._menu.style.visibility = "visible";
      }
    }
    return false;
  }

  function display_upload() {
    var html = "<form action='" + window.location.href  + "' enctype='multipart/form-data' method='post'> \
<p> \
<label for='photo'>T&eacute;l&eacute;charger une nouvelle photo&nbsp;:</label> \
<input name='photo_upload_" + this.directory + "' id='photo' type='file' size='15' /> \
<input type='submit' value='T&eacute;l&eacute;charger' /> \
</p></form>";
    this._legende.innerHTML = html;
    this.menu(0);
  }

  function display_remove() {
    var html = "<form action='" + window.location.href  + "' method='post'> \
<p> \
<label for='photo'>Supprimer cette photo</label> \
<input name='photo_remove_" + this.directory + "' type='hidden' value='" + this.current + "' /> \
<input type='submit' value='Confirmer' /> \
</p></form>";
    this._legende.innerHTML = html;
    this.menu(0);
  }

  function download() {
    var html = "<form id='download_" + this.directory + "_" + this.photos[this.current].id + "' action='" + window.location.href  + "' method='post' style='display:none'> \
<p> \
<input name='photo_download_" + this.directory + "' type='hidden' value='" + this.current + "' /> \
<input name='photo_download_id' type='hidden' value='" + this.photos[this.current].id + "' /> \
<input type='submit' value='Confirmer' /> \
</p></form>";
    this._legende.innerHTML = html;
    document.getElementById("download_" + this.directory + "_" + this.photos[this.current].id).submit()
    this.menu(0);
  }

  function load() {
    this._showbutton = document.getElementById("showbutton" + this.id);
    this._vignettes = document.getElementById("vignettes" + this.id);
    this._scroll = document.getElementById("scroll" + this.id);
    this._scroll_tr = document.getElementById("scroll_tr" + this.id);
    this._view = document.getElementById("view" + this.id);
    this._legende = document.getElementById("legende" + this.id);
    this._zoom = document.getElementById("zoom" + this.id);
    this._zoomimg = document.getElementById("zoomimg" + this.id);
    this._scroll_left = document.getElementById("scroll-left" + this.id);
    this._scroll_right = document.getElementById("scroll-right" + this.id);
    this._menu = document.getElementById("menu_context" + this.id)

    if (this._view.addEventListener)
      this._view.addEventListener('DOMMouseScroll', wheel, false);
    this._view.onmousewheel = wheel;
    this._view.album = this;

    var current = ' class="current"';
    this._scroll_tr.removeChild(this._scroll_tr.firstChild);
    for (var i=0; i<this.photos.length; i++) {
      var photo = this.photos[i];
      var td = document.createElement("td");
      td.innerHTML = '<img id="vign' + this.id + '-' + i + '"' + current + ' src="' + photo.vignette + '" onmouseover="albums[' +  this.id + '].zoom(' + i + ')" width="75" height="75" alt="" />';
      this._scroll_tr.appendChild(td);
      current = '';
    }
    if (this.photos.length > 0)
      this.display(0);
    else
      document.getElementById("photo" + this.id).style.border = "1px dotted black";
    if (this.photos.length > nb_vignettes)
      this._scroll_right.innerHTML = '<span onmouseover="javascript:albums[' + this.id + '].start_scroll(1)" onmouseout="javascript:albums[' + this.id + '].stop_scroll()" onmousedown="speed_faster()" onmouseup="speed_normal()">&gt;</span>';
  }

  function display(index) {
    if (index == null) index = this.zoomed;
    if (this.photos[index].img == null) {
      this.photos[index].img = new Image();
      this.photos[index].img.src = this.photos[index].src;
    }
    if (index+1 < this.photos.length && this.photos[index+1].img == null) {
      this.photos[index+1].img = new Image();
      this.photos[index+1].img.src = this.photos[index+1].src;
    }
    this._view.src = this.photos[index].src;
    this._view.width = this.photos[index].width;
    this._view.height = this.photos[index].height;
    this._legende.innerHTML = "<p>" + this.photos[index].legende + "</p>";
    document.getElementById("vign" + this.id + "-" + index).className = "current";
    if (this.current != null)
      document.getElementById("vign" + this.id + "-" + this.current).className = "";
    this.current = index;
  }

  function zoom(index) {
    this.zoomed = index;
    this._zoomimg.src = this.photos[index].vignette;
    this._zoom.style.left = (50 + (index-this.pos) * 75) + "px";
    this._zoom.style.visibility = "visible";
  }

  function unzoom() {
    this._zoom.style.visibility = "hidden";
  }

  function start_scroll(_direction) {
    this.unzoom();
    this.direction = _direction;
    step = 5;
    if (!this.scrolltimer) {
      this.do_scroll(this.direction);
      this.scrolltimer = setInterval("albums[" + this.id + "].move()", 50);
    }
  }

  function stop_scroll() {
    this.direction = 0;
  }

  function do_scroll(count) {
    this.pos += count;
    if (this.pos == 0) {
      this._scroll_left.innerHTML = '&lt;';
      this.direction = 0;
    }
    else if (this.pos == 1 && count > 0) {
      this._scroll_left.innerHTML = '<span onmouseover="javascript:albums[' + this.id + '].start_scroll(-1)" onmouseout="javascript:albums[' + this.id + '].stop_scroll()" onmousedown="speed_faster()" onmouseup="speed_normal()">&lt;</span>';
    }
    if (this.pos > this.photos.length - nb_vignettes - 1) {
      this._scroll_right.innerHTML = '&gt;';
      this.direction = 0;
    }
    else if (count < 0 && this.pos == this.photos.length - nb_vignettes - 1) {
      this._scroll_right.innerHTML = '<span onmouseover="javascript:albums[' + this.id + '].start_scroll(1)" onmouseout="javascript:albums[' + this.id + '].stop_scroll()" onmousedown="speed_faster()" onmouseup="speed_normal()">&gt;</span>';
    }
  }

  function move() {
    if (-this.pos * 75 > this.left) {
      this.left += step + (this.left % step);
      this._scroll.style.marginLeft = this.left+"px";
    }
    else if (-this.pos * 75 < this.left) {
      this.left -= step + (this.left % step);
      this._scroll.style.marginLeft = this.left+"px";
    }
    else if (this.direction == 0) {
      clearInterval(this.scrolltimer);
      this.scrolltimer = null;
    }
    else {
      this.do_scroll(this.direction);
    }
  }

  function do_wheel(delta) {
    this.unzoom();
    if (delta && this.current-delta >= 0 && this.current-delta < this.photos.length) {
      this.display(this.current-delta);
      if (this.pos > this.current || this.pos + nb_vignettes - 1 < this.current) {
	if (this.pos > this.current)
	  this.do_scroll(-this.pos+this.current);
	else
	  this.do_scroll(-this.pos+(this.current-nb_vignettes+1));
	step = 15;
	if (!this.scrolltimer) {
	  this.scrolltimer = setInterval("albums[" + this.id + "].move()", 50);
	}
      }
    }
  }

  this.add = add;
  this.write = write;
  this.load = load;
  this.menu = menu;
  this.display = display;
  this.zoom = zoom;
  this.unzoom = unzoom;
  this.start_scroll = start_scroll;
  this.stop_scroll = stop_scroll;
  this.do_scroll = do_scroll;
  this.move = move;
  this.do_wheel = do_wheel;
  this.display_upload = display_upload;
  this.display_remove = display_remove;
  this.download = download;
}

function speed_faster() {
  step = 15;
}

function speed_normal() {
  step = 5;
}

function wheel(event) {
  if (!event)
    event = window.event;
  if (event.wheelDelta) { /* IE/Opera */
    delta = event.wheelDelta/120;
    if (window.opera && window.opera.version() < 9.2)
      delta = -delta;
  }
  else if (event.detail) { /* Mozilla */
    delta = -event.detail/3;
  }
  this.album.do_wheel(delta);
  if (event.preventDefault)
    event.preventDefault();
  event.returnValue = false;
}