function PopupMovie()
{
  this.browser = new Browser();
  this.lock = false;
  this.movie = new Array();
}

PopupMovie.prototype = {
  step: 30,
  timestep: 10,
  preload: function() {
    var o = new Array();
    for (var i = 0; i < arguments.length; i++) {
      o[i] = new Image();
      o[i].src = arguments[i];
      o[i].onload = function() {};
    }
  },
  addFlash: function(flash, id, width, height, xoffset, yoffset, bgcolor) {
    if (xoffset == undefined) {
      xoffset = 0;
    }
    if (yoffset == undefined) {
      yoffset = 0;
    }
    if (bgcolor == undefined) {
      bgcolor="#FFFFFF";
    }
    var obj = new SWFObject(flash, id, width, height, "6", bgcolor);
    obj.addParam("allowScriptAccess", "always");
    this.movie[id] = new FlashMovie(obj, xoffset, yoffset);
    // preload
    var _this = this;
    var o = this.browser.getXMLHttpRequest();
    o.open('GET', flash, true);
    o.onreadystatechange = function() {
      if (o.readyState == 4) {
        _this.movie[id].loaded = true;
        _this.showMovie(id);
      }
    };
    o.send('');
  },
  openScreen: function(parent, id) {
    if (this.lock || (this.movie[id].popup != null)) {
      return;
    }
    this.lock = true;
    var child = (parent.getElementsByTagName('img')[0] || parent);
    var imgpos = this.getPosition(child);
    imgpos.x -= 16;
    imgpos.y -= 16;
    this.movie[id].imgpos = imgpos;
    var xoffset = parseInt(this.movie[id].xoffset);
    var yoffset = parseInt(this.movie[id].yoffset);
    var flspos = {
      x: (this.browser.getWidth() - this.movie[id].obj.attributes.width - 20) / 2 + xoffset,
      y: imgpos.y + yoffset,
      w: parseInt(this.movie[id].obj.attributes.width),
      h: parseInt(this.movie[id].obj.attributes.height)
    };
    this.movie[id].flspos = flspos;
    this.movie[id].mouseout = false;
    this.movie[id].show = false;
    var o = document.createElement('div');
    o.id = 'popupmovie-' + id;
    o.className = 'popupmovie';
    this.browser.setOpacity(o, 0.85);
    o.innerHTML = '<div class="popupmovie-hd"><div class="popupmovie-co"></div></div><div class="popupmovie-bd"><div class="popupmovie-co"><div class="popupmovie-scr" id="popupmovie-screen-' + id + '"></div></div></div><div class="popupmovie-ft"><div class="popupmovie-co"></div></div>';
    this.setStyles(o, { position: 'absolute', left: imgpos.x + 'px', top: imgpos.y + 'px', zIndex: 100 });
    document.body.appendChild(o);
    this.movie[id].popup = o;
    o = document.getElementById('popupmovie-screen-' + id);
    this.movie[id].screen = o;
    var _this = this;
    o.onmouseout = function() { _this.closeScreen(id); };
    o.onmouseover = function(e) {
      try {	// for Firefox
        e.stopPropagation();
      } catch (ex) {}
      try {	// for IE
        event.cancelBubble = true;
      } catch (ex) {}
    };
    o = this.movie[id].popup;
    for (var i = 0; i < o.childNodes.length; i++) {
      o.childNodes[i].onmouseover = function(e) {
        _this.closeScreen(id);
      };
    }
    this.setStyles(o, { width: imgpos.w + 'px', height: imgpos.h + 'px' });
    this.resizeScreen(id, imgpos, flspos, true);
    return false;
  },
  closeScreen: function(id) {
    if (this.lock) {
      this.movie[id].mouseout = true;
      return;
    }
    this.lock = true;
    this.movie[id].show = false;
    if ((this.movie[id] == undefined) || (this.movie[id].popup == null)) {
      return;
    }
    var o = document.getElementById(id);
    if (o != null) {
      this.movie[id].screen.removeChild(o);
    }
    this.resizeScreen(id, this.movie[id].flspos, this.movie[id].imgpos, false);
  },
  resizeScreen: function(id, from, to, vis) {
    var lenw = Math.round(Math.abs(from.w - to.w) / this.step);
    var lenh = Math.round(Math.abs(from.h - to.h) / this.step);
    var len = (lenw > lenh) ? lenw : lenh;
    var step = {
      w: Math.round((to.w - from.w) / len),
      h: Math.round((to.h - from.h) / len),
      x: Math.round((to.x - from.x) / len),
      y: Math.round((to.y - from.y) / len)
    };
    var _this = this;
    for (var i = 1; i < len; i++) {
      (function() {
        var size = {
          w: parseInt(from.w) + step.w * i,
          h: parseInt(from.h) + step.h * i,
          x: parseInt(from.x) + step.x * i,
          y: parseInt(from.y) + step.y * i
        };
        setTimeout(function() {
          _this.setSize(id, size);
        }, _this.timestep * i);
      })();
    }
    setTimeout(function() {
      _this.setSize(id, to);
      if (vis) {
        _this.movie[id].show = true;
        _this.showMovie(id);
      } else {
        if (_this.movie[id].popup != null) {
          document.body.removeChild(_this.movie[id].popup);
          _this.movie[id].popup = null;
          _this.movie[id].screen = null;
        }
      }
      _this.lock = false;
    }, _this.timestep * len);
  },
  showMovie: function(id) {
    if (this.movie[id].mouseout) {
      this.movie[id].show = false;
      this.movie[id].mouseout = false;
      this.lock = false;
      this.closeScreen(id);
    }
    if (this.movie[id].loaded && this.movie[id].show) {
      if (this.movie[id].screen) {
        this.movie[id].screen.onmouseout = null;
        this.movie[id].screen.style['background'] = 'none';
        this.movie[id].obj.write('popupmovie-screen-' + id);
      }
      this.movie[id].show = false;
    }
    var _this = this;
    var o = document.getElementById(id);
    if (o == null) {
      return;
    }
    o.onmouseout = function(e) { _this.closeScreen(id); };
    o.onmouseover = function(e) {
      try {	// for Firefox
        e.stopPropagation();
      } catch (ex) {}
      try {	// for IE
        event.cancelBubble = true;
      } catch (ex) {}
    };
  },
  setSize: function(id, size) {
    if (this.movie[id].popup == null) {
      return;
    }
    this.movie[id].popup.style.visibility = 'hidden';
    var w = parseInt(size.w);
    var h = parseInt(size.h);
    var x = parseInt(size.x);
    var y = parseInt(size.y);
    var w2 = w + 16;
    var h2 = h + 16;
    this.setStyles(this.movie[id].popup, { left: x + 'px', top: y + 'px', width: w2 + 'px', height: h2 + 'px' });
    this.setStyles(this.movie[id].screen, { width: w + 'px', height: h + 'px'});
    this.movie[id].popup.style.visibility = 'visible';
  },
  setStyles: function(o, arrStyle) {
    for (var i in arrStyle) {
      if (typeof arrStyle[i] == 'function') {
        continue;
      }
      o.style[i] = arrStyle[i];
    }
  },
  getPosition: function(o) {
    var arr = {
      w: o.offsetWidth,
      h: o.offsetHeight,
      x: o.offsetLeft,
      y: o.offsetTop
    }
    var p = o;
    while (p.offsetParent) {
      p = p.offsetParent;
      arr.x += p.offsetLeft;
      arr.y += p.offsetTop;
      if ((p != document.body) && (p != document.documentElement)) {
        arr.x -= p.scrollLeft;
        arr.y -= p.scrollTop;
      }
    }
    return arr;
  }
};

function FlashMovie(obj, xoffset, yoffset)
{
  this.obj = obj;
  this.xoffset = xoffset;
  this.yoffset = yoffset;
  this.loaded = false;
  this.mouseout = false;
  this.show = false;
  this.popup = null;
  this.screen = null;
  this.imgpos = null;
  this.flspos = null;
}

function Browser()
{
  // check browser
  if (window.opera) {
    this.Browser = "Opera";
  } else if (document.all) {
    this.Browser = "IE";
  } else if (navigator.userAgent.indexOf('AppleWebKit/') > 0) {
    this.Browser = "Safari";
  } else {
    this.Browser = "Other";
  }
  // override functions
  if (this.arrBrowserFunc[this.Browser] != undefined) {
    var f = this.arrBrowserFunc[this.Browser];
    for (var i in f) {
      this[i] = f[i];
    }
  }
}

Browser.prototype = {
  setOpacity: function(o, value) {
    o.style.MozOpacity = value;
  },
  getXMLHttpRequest: function() {
    return new XMLHttpRequest();
  },
  getWidth: function() {
    return window.innerWidth;
  },
  arrBrowserFunc: {
    IE: {
      setOpacity: function(o, value) {
        o.style.filter = 'alpha(opacity=' + value * 100 + ')';
      },
      getWidth: function() {
        return document.documentElement.clientWidth;
      },
      getXMLHttpRequest: function() {
        try {
          return new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (e) {
          return new ActiveXObject('Microsoft.XMLHTTP');
        }
      }
    },
    Opera: {
      setOpacity: function(o, value) {
        o.style.opacity = value;
      }
    },
    Safari: {
      setOpacity: function(o, value) {
        o.style.opacity = value;
      }
    }
  }
}