/* Copyright (c) 2006 by Xprima.com Corporation, All Rights Reserved */
/* FC--2007.12.19--Wipes innerHTML of parent before appending children elements */

var ImageShifter_Count = 0;
var ImageShiter_Moving = false;

var ImageShifter = function(parentId, params) {
  this.parentContainer = $e(parentId);
  this.images = (params != null && params.images != null) ? params.images.split(",") : [];
  this.imagesInView = (params != null && params.imagesInView != null) ? params.imagesInView : 4;
  this.imageWidth = (params != null && params.imageWidth != null) ? params.imageWidth : 96;
  this.className = (params != null && params.className != null) ? params.className : "imageshifter";
  this.shiftBy = (params != null && params.shiftBy != null) ? params.shiftBy : 130;
  this.imageShift = (params != null && params.imageShift != null) ? params.imageShift : 1;
  this.counter = ImageShifter_Count++;
  this.maxShifts = parseInt(this.images.length / this.imageShift) + (this.images.length % this.imageShift == 0 ? 0 : 1);
  this.onclick = (params != null && params.onclick != null) ? params.onclick : null;

  if(this.parentContainer != null)
    this.init();
};

ImageShifter.prototype = {
  init: function() {
    this.slidePos = 1;
    this.doc_div = XLib.createEl("div", this.className + "doc", true);
    this.info_div = XLib.createEl("div", this.className + "info", true);
    this.moveleftid = this.className + "move-left";
    this.left_arr = XLib.createEl("a", this.moveleftid, true);
    this.moverightid = this.className + "move-right";
    this.right_arr = XLib.createEl("a", this.moverightid, true);
    this.mod_div = XLib.createEl("div");
    this.mod_div.className = this.className + "mod";
    this.themes_ul = XLib.createEl("ul", this.className + "themes", true);

    XLib.applyStyles(this.mod_div, {"vertical-align":"bottom"});

    for(var i = 0; i < this.images.length; i++) {
      var li = XLib.createEl("li");
      var img = XLib.createEl("img");
      img.src = this.images[i];
      //img.setAttribute("width", this.imageWidth);
      YAHOO.util.Dom.setStyle(img, "width", this.imageWidth);

      YAHOO.util.Dom.generateId(img, "shiftimg");
      if(this.onclick) {
        var _onclick = this.onclick;
        eval('var _f = (function(e) { _onclick(e, "' + img.src + '"); })');
        YAHOO.util.Event.addListener(img.id, "click", _f);
      }

      var _mov_str = "function() { var a = new YAHOO.util.Anim('" + img.id + "', {opacity:{from:1, to:0.8}}, 0.1, YAHOO.util.Easing.easeNone); a.animate(); }";
      var _mou_str = "function() { var a = new YAHOO.util.Anim('" + img.id + "', {opacity:{from:0.8, to:1}}, 0.1, YAHOO.util.Easing.easeNone); a.animate(); }";
      
      eval("var _mov = (" + _mov_str + ")");
      eval("var _mou = (" + _mou_str + ")");

      YAHOO.util.Event.addListener(img.id, "mouseover", _mov);
      YAHOO.util.Event.addListener(img.id, "mouseout", _mou);

      li.appendChild(img);
      this.themes_ul.appendChild(li);
    }

    this.left_arr.innerHTML = '&nbsp;';
    this.right_arr.innerHTML = '&nbsp;';
    this.parentContainer.innerHTML = "";
    this.parentContainer.appendChild(this.doc_div);
    this.doc_div.appendChild(this.info_div);
    this.info_div.appendChild(this.left_arr);
    this.info_div.appendChild(this.mod_div);
    this.info_div.appendChild(this.right_arr);
    this.mod_div.appendChild(this.themes_ul);
    
    YAHOO.util.Event.on([this.moveleftid, this.moverightid], 'click', this.move, this);
  },

  move: function(e, obj) {
    YAHOO.util.Event.stopEvent(e);
    
    if(!ImageShiter_Moving) {
      switch(this.id) {
        case obj.moveleftid:
          if(obj.slidePos === 1) {
            return;
          }
          var attributes = {
            points : {
              by : [obj.shiftBy, 0]
            }
          };
          obj.slidePos--;
        break;
        case obj.moverightid:
          if(obj.slidePos === obj.maxShifts) {
            return;
          }
          var attributes = {
            points : {
              by : [obj.shiftBy * -1, 0]
            }
          };
          obj.slidePos++;
        break;
      };

      ImageShiter_Moving = true;
      var anim = new YAHOO.util.Motion(obj.className + 'themes', attributes, 0.75, YAHOO.util.Easing.easeBoth);
      var onComplete = function() {
        ImageShiter_Moving = false;
      };
      anim.onComplete.subscribe(onComplete);
      anim.animate();
    }
  }
};