/*
 Copyright(c) Plink Limited 2008. All rights reserved.

 $Header: /home/rcsroot/plink/web/plink_imgs.js,v 1.3 2008/07/21 03:41:49 banks Exp banks $

 $Log: plink_imgs.js,v $
 Revision 1.3  2008/07/21 03:41:49  banks
 An action can be given instead of the default click and open a new window action

 Revision 1.2  2008/07/21 02:29:29  banks
 Wait for images to all load before making html output

 Revision 1.1  2008/06/02 04:37:37  banks
 Initial revision

 
 Author:      Jeremy Banks

 Description: Javascript Image Manipulation
*/

var moving = 0;
var img_height = 100;
var buffer = 10;
var right = document.body.clientWidth;

var image_objects = new Array();
var images = new Array();
var image_width = new Array();
var waiting = 0;

function debug(msg)
{
   document.getElementById("debug").innerHTML = msg;
}

function defaults(height, offset)
{
   img_height = height;
   right = document.body.clientWidth - offset;
}

function add_image(idx, img, action)
{
   if (!images[idx])
      images[idx] = new Array();
   images[idx].push(new Array(img, action));
}

function go(idx, direction)
{
   if (direction)
      moving = direction == "left" ? -5 : 5;

   if (moving)
   {
      if (moving > 0 && document.getElementById("i0_" + idx).style.left.replace(/px/, "") >= (image_width[idx][0] + buffer))
         document.getElementById("left_arrow_" + idx).className = "arrow_off";
      else if (moving < 0 &&
               (document.getElementById("i" + (images[idx].length/1 - 1) + "_" + idx).style.visibility || "visible") != "hidden" &&
               document.getElementById("i" + (images[idx].length/1 - 1) + "_" + idx).style.left.replace(/px/, "") <=
               (right - 2 * (image_width[idx][images[idx].length/1 - 1] + buffer)))
         document.getElementById("right_arrow_" + idx).className = "arrow_off";
      else
      {
         document.getElementById("right_arrow_" + idx).className = "arrow";
         document.getElementById("left_arrow_" + idx).className = "arrow";
         for (var i in images[idx])
         {
            var s = document.getElementById("i" + i + "_" + idx).style;

            if (s.visibility != "hidden")
            {
               var l = s.left;
               l = l.replace(/px/, "");

               l = l/1 + moving;
               s.left = l + 'px';

               if (l <= buffer && moving < 0 || (l + image_width[idx][i] + buffer) >= right && moving > 0)
                  s.visibility = "hidden";

               if (i && l >= buffer + image_width[idx][i - 1] && document.getElementById("i" + (i - 1) + "_" + idx).style.visibility == "hidden")
               {
                  var prevs = document.getElementById("i" + (i - 1) + "_" + idx).style;
                  prevs.left = "0px";
                  prevs.visibility = "visible";
               }
               else if (i < (images[idx].length - 1) && l <= (right/1 - buffer - image_width[idx][i] - image_width[idx][i/1 + 1]) &&
                        document.getElementById("i" + (i/1 + 1) + "_" + idx).style.visibility == "hidden")
               {
                  var prevs = document.getElementById("i" + (i/1 + 1) + "_" + idx).style;
                  prevs.left = (right/1 - image_width[idx][i/1 + 1]) + "px";
                  prevs.visibility = "visible";
               }
            }
         }
         setTimeout('go(' + idx + ')', 2);
      }
   }
}

function stop(direction)
{
   moving = 0;
}

function check_images(idx, div)
{
   var ready = 1;
   for (i in images[idx])
      if (!image_objects[idx + '_' + i].width)
         ready = 0;

   if (ready)
      real_output(idx, div);
   else
      setTimeout('check_images("' + idx + '", "' + div + '")', 1000);
}

function output(idx, div)
{
   for (var i in images[idx])
   {
      var id = idx + '_' + i;
      image_objects[id] = new Image();
      image_objects[id].id = idx + '_' + i;
      image_objects[id].src = images[idx][i][0];
   }

   check_images(idx, div);
}

function real_output(idx, div)
{
   var html = '';
   var x = 0;
   image_width[idx] = new Array();

   for (var i in images[idx])
   {
      image_width[idx][i] = Math.round(image_objects[idx + '_' + i].width * img_height / image_objects[idx + '_' + i].height)
      if (!x)
         x = buffer + image_width[idx][0];

      var action = images[idx][i][1] ? images[idx][i][1] : (images[idx][i][0] + "' target='img_win");
//      var action = images[idx][i][0] + "' target='img_win";
      if (x + image_width[idx][i] < right)
         html += "<span id='i" + i + "_" + idx + "' style='position:absolute; left:" + x +
            "px;'><a href='" + action + "'><img height='" + img_height + "px' src='" +
            images[idx][i][0] + "' /></a></span>";
      else
         html += "<span id='i" + i + "_" + idx + "' style='position:absolute; visibility:hidden;'><a href='" +
            action + "'><img height='" +
            img_height + "px' src='" + images[idx][i][0] + "' /></a></span>";

      x += buffer + image_width[idx][i];
   }

   html = "<span id='obsc_l_" + idx + "' class='arrow' style='width: " + image_width[idx][0] +
      "px; height: " + (img_height * 1.1) + "px; position:absolute; left:0px;z-index: 10;'>&nbsp;</span><span id='obsc_r_" + idx + "' class='arrow' style='width: " +
      image_width[idx][image_width[idx].length - 1] + "px; height: " + (img_height * 1.1) +
      "px; position:absolute; left:" +
      (right/1 - image_width[idx][image_width[idx].length - 1]) +
      "px;z-index: 10;'>&nbsp;</span><span id='l_" + idx + "' style='position:absolute; left:" +
      (image_width[idx][0] / 2) +
      "px; z-index: 20;'><a id='left_arrow_" + idx +
      "' class='arrow_off' href='' onClick='return false;' onMouseOver='go(" + idx + ", \"right\");' onMouseOut='stop(\"left\");'><</a></span>" +
      html + 
      "<span id='r_" + idx + "' style='position:absolute; left:" + (right/1 - image_width[idx][image_width[idx].length - 1] / 2) +
      "px; z-index: 20;'><a id='right_arrow_" + idx + "' class='arrow" +
      (x < right ? "_off" : "") + "' href='' onClick='return false;' onMouseOver='go(" +
      idx + ", \"left\");' onMouseOut='stop(\"right\");'>></a></span>";
   document.getElementById(div).innerHTML = html;
}

// Fading

var opacity = [];
var increment = 20;

function fade(img, src, direction)
{
   var inc;
   var op_obj = {img: img,
                 src: src};
   if (src || (direction && "out" == direction))
   {
      op_obj.level = 100;
      inc = -1 * increment;
   }
   else
   {
      op_obj.level = 0;
      inc = increment;
   }
   opacity.push(op_obj);
   setTimeout("increment_opacity(" + inc + ", " + (opacity.length - 1) + ")", 1);
}

function increment_opacity(incr, idx)
{
   var opa = opacity[idx];

   set_opacity(opa.img, opa.level);
   opa.level = opa.level + incr;
   if (100 < opa.level)
      opa.level = 100;
   if (0 > opa.level)
      opa.level = 0;

   if (opa.level > 0 && opa.level < 100)
      setTimeout("increment_opacity(" + incr + ", " + idx + ")", 1);
   else if (0 == opa.level && opa.src)
   {
      opa.img.src = opa.src;
      setTimeout("increment_opacity(" + increment + ", " + idx + ")", 1);
   }
   else
      set_opacity(opa.img, opa.level);
}

function set_opacity(img, level)
{
   img.style.opacity = level / 100;
   img.style.filter = "alpha(opacity=" + level + ")";
}