//
// imageview.js
// サムネイル画像やPOPUPによる表示などを行う  
//

//定数
FS_THUMBNAIL_SELECTED_CLASS = 'FS2_AdditionalImage_switcher_thumbnail_selected';
FS_ITEM_CLASS = 'gl_Item';
FS_ITEM_SELECTED_CLASS = 'FS2_AdditionalImage_Balloon_Tip_RollOver';
FS_POPUP_CLASS = 'FS2_AdditionalImage_Balloon_Tip';
FS_POPUP_LEFT_CLASS = "FS2_AdditionalImage_Balloon_Tip_left";
FS_POPUP_RIGHT_CLASS = "FS2_AdditionalImage_Balloon_Tip_right";

FS_IMG_FILENAME_SMALL = 'ss_';
FS_IMG_FILENAME_LARGE = 'l_';

FS_IMAGE_VIEW_CLASS = 'FS2_additional_image_detail_container';

var $fsJq = jQuery.noConflict();
//var fsVarImgCurrent = null; //現在表示している画像のsrc
//var fsVarImgList = new Array(); //imgリスト

//
// 初期処理
//
// @param container_sel 対象コンテナ(DOMオブジェクト)
// @param hover         true:初期でhoverとする
// @param close         true:拡大画像clickでwindow.close
// @param small         小画像接頭辞
// @param large         大画像接頭辞
//
function fsInitImageView (container_sel, hover, close, small, large) {
  if (container_sel == null) {
    container_sel = document;
  }
  $fsJq(container_sel).each(function(i){
    var imageview = new FSImageView($fsJq(this));
    if (small != null) {
      imageview.filename_small = small + ".";
    }
    if (large != null) {
      imageview.filename_large = large + ".";
    }
    
    if ($fsJq('.' + FS_IMAGE_VIEW_CLASS +' img', this).size() <= 0) {
      //コンテナにimgタグがない場合、作成する
      $fsJq('.' + FS_IMAGE_VIEW_CLASS, this).append("<img></img>");
    }
    
    imageview.add_thumbnail('FS2_additional_image_container_main', hover, false, close);
    imageview.add_thumbnail('FS2_additional_image_container_sub', hover, false, close);
    imageview.add_paging('FS2_additional_image_btn_prev', 'FS2_additional_image_btn_next');
  });

}

//
// FSThumbnailクラス
//
// @thumbnail サムネイルdomオブジェクト
// @img Imageオブジェクト(拡大画像)
//
var FSThumbnail = function (thumbnail, img, alt, title) {
  this.thumbnail = thumbnail;
  this.img = img;
  this.alt = alt;
  this.title = title;
};

//
// FSImageViewクラス
//
var FSImageView = function (container) {
  this.container = container;
  this.img_current = null;
  this.img_list = new Array();
  this.filename_small = 'ss_';
  this.filename_large = 'l_';
  this.thumbnail_classes = new Array();
  this.hover = false;

  //
  // サムネイルの初期処理
  // マウスオーバーでメイン画像を入れ替える
  // メイン画像は id=fs_view のタグ内のimgタグ
  // サムネイル画像は 引数のthum_selのタグ内のimgタグ
  // 
  // @thum_class string サムネイル画像格納クラス
  // @hover boolean hoverで画像を切り替えるか
  // @lock boolean hoverとclickを切り替えない場合true
  // @close boolean 大画像クリックでwindow.closeする場合true
  //
  this.add_thumbnail = function (thum_class, hover, lock, close){
    var _this = this;
    this.thumbnail_classes.push(thum_class);
    this.hover = hover;

    $fsJq('.'+thum_class+' > .FS2_additional_image_thumbnail_container > img', this.container).each(function(i){
      var myhref = $fsJq(this).attr('src').replace(_this.filename_small, _this.filename_large);
      var alt = $fsJq(this).attr('alt');
      var title = $fsJq(this).attr('title');
      var img = new Image();
      img.src = myhref;
      var thumbnail = new FSThumbnail($fsJq(this), img, alt, title);
      _this.img_list.push(thumbnail);
      $fsJq(this).hover(function (){
        if (_this.hover == true) {
          _this.show_thumbnail_byobj(thumbnail);
        }
      },
      function () {
      });
      $fsJq(this).click(function() {
        if (_this.hover == true) {
          if (lock == true) {
          } else {
            _this.hover = false;    
          }
          _this.toggle_class_thumbnail('FS2_AdditionalImage_switcher_cursor_pointer', 'FS2_AdditionalImage_switcher_cursor_cross');
        } else {
          if (lock == true) {
          } else {
            _this.hover = true;   
          }
          _this.toggle_class_thumbnail('FS2_AdditionalImage_switcher_cursor_cross', 'FS2_AdditionalImage_switcher_cursor_pointer');
        }
        _this.show_thumbnail_byobj(thumbnail);
      });
      if (hover == true) {
        $fsJq(this).addClass('FS2_AdditionalImage_switcher_cursor_cross');
      } else {
        $fsJq(this).addClass('FS2_AdditionalImage_switcher_cursor_pointer');
      }
    });

    //初期表示された画像を特定
    var orgsrc = $fsJq('.' + FS_IMAGE_VIEW_CLASS +' > img', this.container).attr('src');
    for (var i=0; i<this.img_list.length; i++) {
      if (this.img_list[i].img.src == orgsrc) {
        this.img_current = this.img_list[i];
        this.show_thumbnail(i);
        break;
      }
    }
    if (this.img_current == null && this.img_list.length > 0) {
      this.img_current = this.img_list[0];
      this.show_thumbnail(0);
    }
  };

  this.toggle_class_thumbnail = function (add, remove) {
    for (i=0; i<this.thumbnail_classes.length; i++) {
      $fsJq('.'+this.thumbnail_classes[i]+' > img', this.container).each(function(i){
        $fsJq(this).removeClass(remove);
        $fsJq(this).addClass(add);
      });      
    }
  };

  //
  //ページング初期処理
  // 
  //@prev_class string 戻るボタンのクラス
  //@next_class string 次へボタンのクラス
  //
  this.add_paging = function (prev_class, next_class) {

    var _this = this;
    //前へボタンの設定
    var prev = function(){

    for (var i=0; i<_this.img_list.length; i++) {
      if (_this.img_list[i] == _this.img_current) {
        break;
      }
    }

    if (i == 0) {
      i = _this.img_list.length-1;
    } else {
      --i;
    }
      _this.show_thumbnail(i);
    };
    $fsJq('.'+prev_class, this.container).click(prev);

    //次へボタンの設定
    var next = function(){

      for (var i=0; i<_this.img_list.length; i++) {
        if (_this.img_list[i] == _this.img_current) {
          break;
        }
      }

      if (i == _this.img_list.length-1) {
        i = 0;
      } else {
        ++i;
      }
      _this.show_thumbnail(i);
    };
    $fsJq('.'+next_class, this.container).click(next);

    //カーソルキーでの動作の設定
    $fsJq(document).keyup(function(e){
      switch (e.keyCode) {
      case 39: //右→
        next();
        break;
      case 37: //左←
        prev();
        break;
      }
    });
  };

  //
  // 画像表示(サムネイルオブジェクトで検索)
  //
  this.show_thumbnail_byobj = function (obj) {
    for (var i=0; i<this.img_list.length; i++) {
      if (this.img_list[i] == obj) {
        this.show_thumbnail(i);
      }
    }
  };

  //
  // 画像表示(インデックスで検索)
  //
  this.show_thumbnail = function (index) {
    var _this = this;
    
    if (this.img_current == null) {
      return;
    }
    
    this.img_current.thumbnail.removeClass(FS_THUMBNAIL_SELECTED_CLASS);
    this.img_current = this.img_list[index];
    this.img_current.thumbnail.addClass(FS_THUMBNAIL_SELECTED_CLASS);
    
    $fsJq('.'+FS_IMAGE_VIEW_CLASS, this.container).each(function() {
      $fsJq('img', this).each(function() {
        this.src = _this.img_current.img.src;
        this.alt = _this.img_current.alt;
        this.title = _this.img_current.title;
      });
      $fsJq('.FS2_GoodsImageLabel', this).each(function() {
        $fsJq(this).text(_this.img_current.title);
      });
    });

  };

};


//popup用グローバル変数
var fsVarPopup = null;

//
// popup初期処理
//
function fsInitPopup(){

  $fsJq('.' + FS_ITEM_CLASS).each(function(i){
    $fsJq(this).hover(function (e){
      $fsJq(this).addClass(FS_ITEM_SELECTED_CLASS);
      fsOpenPopup($fsJq(this));
    },
    function(e){
      $fsJq(this).removeClass(FS_ITEM_SELECTED_CLASS);
      fsClosePopup();
    });
  });
}

//
// POPUPを表示する座標を計算します 
// @arg object 表示する元になるjqueryオブジェクト
// @return {x,y} 座標
//
function fsCalcPos (obj) {
  var border_top = $fsJq(window).scrollTop();
  var border_bottom = $fsJq(window).height() + $fsJq(window).scrollTop();
  var border_left = $fsJq(window).scrollLeft();
  var border_right = $fsJq(window).scrollLeft() + $fsJq(window).width();
  var offsetX = -20;
  var offsetY = 2;
  var pos = obj.position();
  var obj_width = obj.width();
  var popup_width = fsVarPopup.width();
  var popup_height = fsVarPopup.height();

  //表示位置の決定
  //真ん中より左の場合右上に、右の場合は左上に表示する
  var mid = (border_right - border_left) / 2;
  var ul_x = 0;
  var ul_y = pos.top + offsetY;
  var dr_x = 0;
  var dr_y = ul_y + fsVarPopup.height();
  var position = 0;
  if (pos.left + obj_width/2 > mid) {
    //左上
    ul_x = pos.left - popup_width - offsetX;
    dr_x = ul_x + popup_width;
    position = 0;
  } else {
    //右上
    ul_x = pos.left + obj_width + offsetX;
    dr_x = ul_x + popup_width;
    position = 1;
  }

  if (ul_x <= border_left) {
    //左が出ている場合
    x = border_left + offsetX;
  } else if (dr_x >= border_right) {
    //右が出ている場合
    x = border_right - popup_width - offsetX;
  } else {
    x = ul_x;
  }

  if (dr_y >= border_bottom) {
    //下が出ている場合
    y = border_bottom - popup_height - offsetY;
  } else if (ul_y < border_top) {
    //上が出ている場合
    y = border_top + offsetY;
  } else {
    y = ul_y;
  }

  return {
    x: x,
    y: y,
    position: position
  };
}

//
// popupを開きます
// @obj object POPUPのベースになるjqueryオブジェクト
//
function fsOpenPopup(obj){
  if (fsVarPopup != null) {
    return;
  }
  var popupList = $fsJq(obj).children('.' + FS_POPUP_CLASS);
  if (popupList.length <= 0) {
    return;
  }
  fsVarPopup = popupList;
  
  var pos = fsCalcPos(obj);
  
  //fsVarPopup.css({opacity:0.8, display:"none",left:x, top:y});
  fsVarPopup.css({
    opacity: 0.9,
    left: pos.x,
    top: pos.y
  });
  fsVarPopup.fadeIn(200);
  //fsVarPopup.slideDown(200);
  if (pos.position == 0) {
    fsVarPopup.removeClass(FS_POPUP_RIGHT_CLASS);
    fsVarPopup.addClass(FS_POPUP_LEFT_CLASS);
  } else {
    fsVarPopup.removeClass(FS_POPUP_LEFT_CLASS);
    fsVarPopup.addClass(FS_POPUP_RIGHT_CLASS);
  }
  
}

//
// popupを閉じます
//
function fsClosePopup () {
  if (fsVarPopup == null) {
    return;
  }

  fsVarPopup.fadeOut(100);
  fsVarPopup = null;
}