/*!
 * Copyright 2010, Root-Sea
 */

////// クロスフェードのスライドショークラス //////

function RSCrossFade(id, w, h, interval, fade) {

  //現在のページ番号
  this.current = 1;

  this.startflg = 0;

  //ID
  this.id = id;

  //スライドショーを表示するdiv
  this.area = document.all && document.all(id) || document.getElementById && document.getElementById(id);
  if(this.area){
    with(this.area){
      style.width  = w + "px";
      style.height = h + "px";
      style.position = "relative";
    }
  }

  //setTimeout管理変数
  this.timerID;

  //ロードした画像の総数
  this.loaded = 0;

  //サムネールのサイズおよび余白
  this.th_w = 0;
  this.th_h = 0;


  //// HTMLからの入力必須項目 ////

  //表示時間とフェード時間
  this.objTime = {sleep:interval, fade:fade};

  //ファイル名、サムネール、リンク先、ターゲット
  this.aInfo = new Array();


  //// カスタム設定情報 ////

  //サムネール間のマージン
  this.margin = 4;

  //サムネール位置("left", "center", "right")
  this.align = "left";

  //サムネールの下地のカラー
  this.bgColor = "#FFFFFF";

  //サムネールの下地の不透明度(0～100)
  this.bgAlpha = 50;


  //静止画ファイルおよびリンク先を追加する。
  this.addInfo = function(file, thumb, thumb_on, url, target) {
    var tgt;
    if (target != undefined) {
      tgt = target;
    } else {
      tgt = "_self";
    }
    this.aInfo.push({ src:file, thumb:thumb, thumb_on:thumb_on, href:url, target:tgt });
  }

  this.changeParameter = function(paramName, value) {
    this[paramName] = value;
  }

  //実行
  this.start = function() {
    $('#' + id).empty().css({
      overflow: 'hidden',
      padding: 0,
      zIndex: 1
    });

    var i;
    for(i = 0; i < this.aInfo.length; i++) {
      var img = new Image();
      img.style.position = "relative";
      img.onload = loadedImage;
      img.src = this.aInfo[i]["src"];

      var img_div = makeRectangle(this.id + "_img" + (i + 1), 0, 0, this.area.offsetWidth, this.area.offsetHeight, this.bgColor, 99);
      img_div.style.position = "absolute";
      img_div.style.overflow = "hidden";
      img_div.style.visibility = "hidden";
      img_div.appendChild(img);
      if(this.aInfo[i]["href"] != ""){
        img_div.onmouseover = handCursor;
        img_div.onclick = jump;
      }
      this.area.appendChild(img_div);
    }

    for(i = 0; i < this.aInfo.length; i++) {
      var thmb = new Image();
      thmb.onload = loadedThumbnail;
      thmb.src = this.aInfo[i]["thumb"];

      var thmb_o = new Image();
      thmb_o.onload = loadedThumbnail;
      thmb_o.src = this.aInfo[i]["thumb_on"];
    }

  }

  var _this = this;

  //画像のonLoadイベントハンドラ
  loadedImage = function() {
    _this.loadCheck();
  }

  //サムネイルのonLoadイベントハンドラ
  loadedThumbnail = function () {
    _this.th_w = this.width;
    _this.th_h = this.height;
    _this.loadCheck();
  }

  //ロード数のチェック
  this.loadCheck = function() {
    this.loaded++;
    if (this.loaded == this.aInfo.length * 3) {
      /*this.makeUI();*/
      this.switchSlide(1);
    }
  }

  //ユーザインターフェースを作る
  this.makeUI = function() {
    //半透明の背景を追加
    var w = this.area.offsetWidth;
    var h = this.th_h + this.margin * 2;
    var x = 0;
    var y = this.area.offsetHeight - h;
    var bg = makeRectangle(this.id + "_bg", x, y, w, h, this.bgColor, this.bgAlpha, "absolute");
    bg.style.overflow = "hidden";
    this.area.appendChild(bg);
    bg.style.zIndex = this.aInfo.length + 1;

    //サムネールの配置
    var total_w = (this.th_w +this.margin) * this.aInfo.length;

    switch(this.align) {
      case "right":
        x = x + (w - total_w);
        break;
      case "center":
        x = x + (Math.floor((w - total_w) / 2));
        break;
      default:
        x = x;
        break;
    }

    for(i = 0; i < this.aInfo.length; i++) {
      var thumb = makeRectangle(this.id + "_thumb" + (i + 1), x + this.margin + (this.th_w + this.margin) * i, y + this.margin, this.th_w, this.th_h, "#FFFFFF", 100, "absolute");
      thumb.style.overflow = "hidden";
      thumb.style.background      = "url(" + this.aInfo[i]["thumb"] + ")";
      this.area.appendChild(thumb);
      thumb.style.zIndex = this.aInfo.length + 1 + (i + 1);

      //クリックイベント設定
      thumb.onmouseover = handCursor;
      thumb.onclick = function () {
        _this.switchSlide(this.id.substr(_this.id.length + 6));
      }
    }
  }

  //スライドの切り替え
  this.switchSlide = function(n) {
    if (this.timerID != undefined) clearTimeout(this.timerID);
    this.current = n;
    this.timerID = setTimeout(this.timeoutHandler, this.objTime.sleep * 1000);

    for(var i = 1; i <= this.aInfo.length; i++) {
      var img = $('#' + _this.id + '_img' + i);
      var thumb = $('#' + _this.id + '_thumb' + i);
      if (i == n) {
        img.css('visibility', 'visible');
        img.css('z-index', 1);
        if(this.startflg == 0){
          img.fadeOut(0);
          img.fadeIn(this.objTime.fade * 1000 * 0.94);    // 1枚目は設定より少し早く表示
          //img.fadeIn(this.objTime.fade * 1000 / 2);
        }else{
          img.fadeIn(this.objTime.fade * 1000);
        }
        thumb.css('background', "url(" + this.aInfo[i - 1]["thumb_on"] + ")");
      } else {
        img.fadeOut(this.objTime.fade * 1000);
        thumb.css('background', "url(" + this.aInfo[i - 1]["thumb"] + ")");
      }
    }
    this.startflg = this.startflg + 1;
  }

  //スライド切り替え用のタイムアウトハンドラ
  this.timeoutHandler = function () {
    var n = _this.current % _this.aInfo.length + 1;
    _this.switchSlide(n);
  }

  //カーソルを指マークに
  function handCursor() {
    this.style.cursor = "pointer";
  }

  //リンク
  function jump() {
    var info = _this.aInfo[this.id.substr(_this.id.length + 4) - 1];
    if (info.target == "_self") {
      //自分のウィンドウで遷移
      location.href = info.href;
    } else {
      //別窓を開く
      window.open(info.href, info.target);
    }
  }
}