function addEvent(obj,evtType,func,cap){
    cap=cap||false;
    if(obj.addEventListener){//ff
        obj.addEventListener(evtType,func,cap);
        return true;
    }else if(obj.attachEvent){//ie
        if(cap){
            obj.setCapture();
            return true;
        }else{
            return obj.attachEvent("on" + evtType,func);
        }
    }else{
        return false;
    }
}

function removeEvent(obj,evtType,func,cap){
    cap=cap||false;
    if(obj.addEventListener){
        obj.removeEventListener(evtType,func,cap);
        return true;
    }else if(obj.attachEvent){
        if(cap){
            obj.setCapture();
            return true;
        }else{
            return obj.detachEvent("on" + evtType,func);
        }
    }else{
        return false;
    }
}

/**
 * To use this js,there should be some element in the page:
 * 1. div id="pageMask" and position is absolute z-index is big enough.
 * 2. div id="maskFlashBox" position is absolute,z-index is larger the pageMask.
 * 3. jsp page that in path /pruductDemo/,page content will be called by ajax
 * 4. function get parameters by a hidden input id is hyperlink id + "Input".
 * 5. the div class="flashImgBox" that hyperlink inside it is clicked,
 *    the mask div is showen,
 *    and the id of the link is sent to iframe page as attribute "fid".
 */

$(document).ready(function() {
  // change mask div size to page size while window reszied.
  $(window).bind("resize",function(){
    if($("#pageMask").css("display") == "block") {
      getPageSize();
      $("#pageMask").css("height",pageHeight);
      $("#pageMask").css("width",pageWidth);
      setMaskFlashPosition();
    }
  });

  /**
   * get the hyperlink title as parameter split by "|",
   *  for object and panorama,
   *  first is the demo page name,second is the configpath
   *  first is the demo page name,second is the flash name,
   *   third is flash width , fourth is flash height.
   */
  $(".flashImgBox a").bind("click", bindMaskEvent);

  $("#productContainer .closeButton").live("click",closeMask);
  $("#pageMask").bind("click",closeMask);
  $(document).keypress(function(e){
      if(e.keyCode == 27){
          closeMask();
      }
  });

  //add drag effrect for flash demo div
  $("#productContainer .boxTitle").live("mousedown",function(mouse){
    oldMouse =  mouse;
    flashBox = $("#maskFlashBox");
    boxWidth = flashBox.width();
    boxHeight = flashBox.height();
    winWidth = $(window).width();
    winHeight = $(window).height();
    scrolLeft = getscrolX();
    scrolTop = getscrolY();
    getPageSize();
    $(window).bind("scroll", function(){
      scrolLeftDistance = getscrolX() - scrolLeft;
      scrolTopDistance = getscrolY() - scrolTop;
      scrolLeft = getscrolX();
      scrolTop = getscrolY();
      if(flashBox.position().top + scrolTopDistance <0){
        flashBox.css("top",0);
        return;
      }
      if(flashBox.position().top + boxHeight+ scrolTopDistance> pageHeight){
        //scroll Y may be change in one mouseover
        flashBox.css("top",pageHeight - boxHeight);
        return;
      }
      flashBox.css("top",flashBox.position().top + scrolTopDistance);

      if(flashBox.position().left + scrolLeftDistance <0){
        flashBox.css("left",0);
        return;
      }
      if(flashBox.position().left + boxWidth+ scrolLeftDistance> pageWidth){
        //scroll Y may be change in one mouseover
        flashBox.css("left",pageWidth - boxWidth);
        return;
      }
      flashBox.css("left",flashBox.position().left + scrolLeftDistance);
    });

    $(document).bind("mousemove",function(mouse2){
      xDistance = mouse2.clientX - oldMouse.clientX;
      yDistance = mouse2.clientY -  oldMouse.clientY;

      //box size less than windows, box can't drag out window.
      if(boxWidth < winWidth){
        if(flashBox.position().left + boxWidth+ xDistance + 2>
          scrolLeft + winWidth){
          flashBox.css("left",scrolLeft + winWidth - boxWidth - 2);
          oldMouse =  mouse2;
          return;
        }
        if(flashBox.position().left + xDistance < scrolLeft) {
          flashBox.css("left",scrolLeft);
          oldMouse =  mouse2;
          return;
        }
      }else { //box.width > winWidth,can drag page width larger.
        if(flashBox.position().left + boxWidth + xDistance> pageWidth){
          //scroll X may be change in one mouseover
          flashBox.css("left", pageWidth - boxWidth - 2);
          oldMouse =  mouse2;
          return;
        }
      }

      if(boxHeight < winHeight){
        if(flashBox.position().top + boxHeight+ yDistance>
          scrolTop + winHeight){
          flashBox.css("top",scrolTop +winHeight - boxHeight);
          oldMouse =  mouse2;
          return;
        }

        if(flashBox.position().top + yDistance < scrolTop){
          flashBox.css("top",scrolTop);
          oldMouse =  mouse2;
          return;
        }
      } else { //box.width > winWidth,can drag page width larger.
        if(flashBox.position().top + yDistance < 0 ){
          flashBox.css("top",0);
          oldMouse =  mouse2;
          return;
        }

        if(flashBox.position().top + boxHeight + yDistance> pageHeight){
          flashBox.css("top",pageHeight - boxHeight);
          oldMouse =  mouse2;
          return;
        }
      }

      flashBox.css("left",flashBox.position().left + xDistance);
      flashBox.css("top",flashBox.position().top + yDistance);
      oldMouse =  mouse2;
      $("#container").css("cursor","move");
    });
  });

  $(document).mouseup(function(){
    $(window).unbind("scroll");
    $(document).unbind("mousemove");
    $("#container").css("cursor","auto");
  });
});

function bindMaskEvent(){
  var params = ($("#" + $(this).attr("id") + "Input").val()).split("|");
  var iframeSrc = "productDemo/" + params[0] +  ".jsp";
  if(params[0] == "panoramaDemo"){
    iframeSrc += "?config=" + params[1]+"&width=" + params[2] + "&height="
    + params[3] +"&cpath=" + params[4];
    $("#maskFlashBox").css("width",params[2]*1 + 226).css("height",params[3]*1 + 88);
  }else if(params[0] == "flashAlbum") {
    iframeSrc += "?flash=" + params[1] +"&width=" + params[2] + "&height=" + params[3];
    $("#maskFlashBox").css("width",params[2]*1 + 16).css("height",params[3]*1 + 48);
  }else if(params[0] == "obj3dDisplay"){
    iframeSrc += "?cpath=" + params[1] + "&config=" + params[2] + "&width=" + params[3] + "&height="
    + params[4];
    $("#maskFlashBox").css("width",params[3]*1 + 226).css("height",params[4]*1 + 88);
  }else{
    iframeSrc += "?cpath=" + params[1];
  }
  showMask(iframeSrc);
}

function closeMask() {
  if($("#maskFlashBox").attr("class").indexOf("notAjaxBox") == -1){
    $("#maskFlashBox").html("");
  };
  $("#maskFlashBox").removeAttr("style");
  $("#maskFlashBox").css("display","none");
  $("#pageMask").css("display","none");
}

/**
 * change the flash position,X direction in the middle of borwser window
 * Y direction is 200px from the browser window top 200px can be changed.
 * make sure the document's height and width is larger than flash height and width.
 */
function setMaskFlashPosition() {
  getPageSize();
  winWidth = $(window).width();
  winHeight = $(window).height();
  if(winHeight > $("#maskFlashBox").height()) {
    $("#maskFlashBox").css("top",getscrolY() + (winHeight - $("#maskFlashBox").height())/2);
  }else if($("#maskFlashBox").height() + getscrolY() > pageHeight){
    $("#maskFlashBox").css("top",pageHeight - $("#maskFlashBox").height());
  }else {
    $("#maskFlashBox").css("top",getscrolY());
  }

  //set x position
  if(winWidth > $("#maskFlashBox").width()) {
    $("#maskFlashBox").css("left",getscrolX() + (winWidth - $("#maskFlashBox").width())/2);
  }else if($("#maskFlashBox").width() + getscrolX() > pageWidth){
    $("#maskFlashBox").css("left", pageWidth - $("#maskFlashBox").width());
  }else{
    $("#maskFlashBox").css("left",getscrolX());
  }
}

/**
 * show the mask div
 */
function showMask(iframeSrc) {
  showBottomMask();
  xht = $.get(iframeSrc,function(data){
    $("#maskFlashBox").html(data);
    setMaskFlashPosition();
    $("#maskFlashBox").css("display","block");
  });
}

function showBottomMask(){
  getPageSize();
  $("#pageMask").css("height",pageHeight);
  $("#pageMask").css("width",pageWidth);
  $("#pageMask").css("display","block");
}

function getPageSize(){
  pageHeight = $("#background1").height();
  if ($(document).height() > pageHeight){
    pageHeight = $(document).height();
  }
  pageWidth = $("#background1").width();
  if ($(document).width() > pageWidth){
    pageWidth = $(document).width();
  }
}

/**
 * get scrollbar top
 */
function getscrolY() {
  var y;
  if(document.body.scrollTop) {
    y = document.body.scrollTop;
  }else {
    y = document.documentElement.scrollTop;
  }
  return y;
}

/**
 * get scrollbar left
 */
function getscrolX() {
  var x;
  if(document.body.scrollLeft) {
    x = document.body.scrollLeft;
  }else {
    x = document.documentElement.scrollLeft;
  }
  return x;
}

function startVsp() {
    $(".module-vsp .vsp-container").css("z-index", 1000);
}

function closeVsp() {
    $(".module-vsp .vsp-container").css("z-index", -1000);
    $(".module-vsp .vsp-restarter").removeClass("playing");
    /*
    if($.browser.msie && $.browser.version == 6.0){
        fixVspPosition();
    }
    */
}

$(".module-vsp").ready(function() {
    $(".module-vsp .vsp-container").css("z-index", -1000);

    $(".module-vsp .vsp-restarter a").click(function() {
        $(".module-vsp .vsp-restarter").addClass("playing");
        $(".module-vsp .vsp-container object")[0].restart();
    });

    if($.browser.msie && $.browser.version == 6.0){
        $(".module-vsp .vsp-container").css("z-index", 1000);
        /*
        fixVspPosition();
        addEvent(window,"scroll",fixVspPosition);
        addEvent(window,"resize",fixVspPosition);
        */
    }
});

function fixVspPosition(){
    if($(".module-vsp .vsp-restarter").attr("class").indexOf("playing") != -1){
        //vspBox = $(".module-vsp .vsp-container");
        return;
    }else{
        vspBox = $(".module-vsp .vsp-restarter");
    }
    vspBox.css("top",getscrolY() + $(window).height() - vspBox.height());
    vspBox.css("left",$(window).width() + getscrolX() - vspBox.width());
}