// Show YouTube Video Clip Java Script
// 2011, WebProject, Poland, all rights reserved

function ytclip() {
  var _self=this
  this.arrClip=new Array()
  var arrAnch=document.getElementsByTagName('a')
  for(i=0; i<arrAnch.length; i++) {
    if(arrAnch[i].hasClassName("ytclip")) {
      this.arrClip.push(arrAnch[i])
      arrAnch[i].onclick=function() {
        _self.show(this)
        return false
      }
    }
  }
  
  this.Index=null
  this.enBoxId="ytclip-box"
  this.enTitleBarId="ytclip-titlebar"
  this.enContentId="ytclip-content"
  this.enLeftBtnId="ytclip-left-btn"
  this.enRightBtnId="ytclip-right-btn"
  this.enCaptionId="ytclip-caption"
  this.enBkgId="ytclip-bkg"
  this.enInterval=50
  this.enDegree=0
  
  //man data box
  this.enBoxObj=document.createElement('div')
  this.enBoxObj.setAttribute("id",this.enBoxId)
  this.enBoxObj.onmouseover=function() { _self.showBtns(); return false }
  this.enBoxObj.onmouseout=function()  { _self.hideBtns(); return false }

  // top title bar
  this.enTitleBarObj=document.createElement('div')
  this.enTitleBarObj.setAttribute("id",this.enTitleBarId)
  this.enTitleBarCloseObj=document.createElement('a')
  this.enTitleBarCloseObj.setAttribute("href","javascript:void(0)")
  this.enTitleBarCloseObj.onclick=function() { _self.close(); return false }
  this.enTitleBarObj.appendChild(this.enTitleBarCloseObj)
  this.enBoxObj.appendChild(this.enTitleBarObj)

  // main content
  this.enContentObj=document.createElement('div')
  this.enContentObj.setAttribute("id",this.enContentId)
  
  // left button    
  this.enLeftBtnObj=document.createElement('div')
  this.enLeftBtnObj.setAttribute("id",this.enLeftBtnId)
  this.enLeftBtnAnchorObj=document.createElement('a')
  this.enLeftBtnAnchorObj.setAttribute("href","javascript:void(0)")
  this.enLeftBtnAnchorObj.onclick=function() { _self.prev(); this.blur(); return false }
  this.enLeftBtnObj.appendChild(this.enLeftBtnAnchorObj)
  this.enBoxObj.appendChild(this.enLeftBtnObj)

  // right button    
  this.enRightBtnObj=document.createElement('div')
  this.enRightBtnObj.setAttribute("id",this.enRightBtnId)
  this.enRightBtnAnchorObj=document.createElement('a')
  this.enRightBtnAnchorObj.setAttribute("href","javascript:void(0)")  
  this.enRightBtnAnchorObj.onclick=function() { _self.next(); this.blur(); return false }
  this.enRightBtnObj.appendChild(this.enRightBtnAnchorObj)
  this.enBoxObj.appendChild(this.enRightBtnObj)

  // adding content
  this.enBoxObj.appendChild(this.enContentObj)

  // bottom caption
  this.enCaptionObj=document.createElement('div')
  this.enCaptionObj.setAttribute("id",this.enCaptionId)
  this.enBoxObj.appendChild(this.enCaptionObj)
  document.body.appendChild(this.enBoxObj)

  // shadow background
  this.enBkgObj=document.createElement('div')
  this.enBkgObj.setAttribute("id",this.enBkgId)
  document.body.appendChild(this.enBkgObj)

}

ytclip.prototype={
  enBoxObjOnKeyUp:function(e) {
    var e=(e) ? e : ((window.event) ? event : null);
    if(e) {
      if(e.keyCode == 27)              { this.close() } // <Esc>
      if(e.keyCode == 88 && e.ctrlKey) { this.close() } // <Ctrl-X>
      if(e.keyCode == 37)              { this.prev() } // <Left Arrow>
      if(e.keyCode == 39)              { this.next() } // <Right Arrow>
    }
  },

  prev:function() {
    if(this.Index>0) {
      this.Index--
      this.embed()
    }
  },

  next:function() {
    if(this.Index<(this.arrClip.length-1)) {
      this.Index++
      this.embed()
    }
  },

  showBtns:function() {
    if(this.Index>0)
      this.enLeftBtnObj.style.display="block"
    if(this.Index<(this.arrClip.length-1))
      this.enRightBtnObj.style.display="block"
  },
  
  hideBtns:function() {
    this.enLeftBtnObj.style.display="none"
    this.enRightBtnObj.style.display="none"
  },
  
  close:function() {
    document.onkeyup=null
    this.enContentObj.innerHTML=""
    this.enBoxObj.style.display="none"
    this.enBkgObj.style.display="none"
  },
  
  embed:function() {
    this.enCaptionObj.innerHTML="<p>"+this.arrClip[this.Index].getAttribute('rev')+"</p>"
    this.enContentObj.innerHTML="<div style='position: relative; top: 45px; left: 45px; width:640px; height:390px'><iframe width='640' height='390' src='http://www.youtube.com/embed/" +this.arrClip[this.Index].getAttribute('rel')+ "?autoplay=1&version=3&enablejsapi=1' frameborder='0' allowfullscreen></iframe></div>"
  },
  
  fade:function() {
    var _self = this;
    this.enDegree+=10
    with(this.enBkgObj.style) {
      opacity=(this.enDegree/100.0)
      MozOpacity=(this.enDegree/100.0)
      KhtmlOpacity=(this.enDegree/100.0)
      filter="alpha(opacity="+this.enDegree+")"
    }
    if(this.enDegree >= 70) {
      clearTimeout(this.enTimerId)

      var wt=737; var ht=517
      var ScreenSize=getScreenSize()
          
      // calculating top left corner position
      var arrayPageScroll = document.viewport.getScrollOffsets();
      var boxTop = arrayPageScroll[1]
      var boxLeft = arrayPageScroll[0]
    
      with(this.enBoxObj.style) {
        top=(document.viewport.getHeight()/2)-(ht/2)+boxTop+'px'
        left=(document.viewport.getWidth()/2)-(wt/2)+boxLeft+'px'
        width=wt+'px'
        height=ht+'px'
        zIndex=2
        display="block"
      }
      with(this.enTitleBarObj.style) {
        top=3+'px'
        left=(wt-24)+'px'
      }    
      with(this.enContentObj.style) {
        height=(ht-44)+'px'
      }
      with(this.enLeftBtnObj.style) {
        top=(ht/2-25)+'px'
        left=2+'px'
      }
      with(this.enRightBtnObj.style) {
        top=(ht/2-25)+'px'
        left=(wt-33)+'px'
      }
      document.onkeyup=function(e) {
        _self.enBoxObjOnKeyUp(e)
      }
      this.embed()
    }
    else {
      this.enTimerId = setTimeout(function() { _self.fade() }, this.enInterval)
    }
  },

  show: function(anch) {
    for(i=0; i<this.arrClip.length; i++) {
      if(this.arrClip[i]==anch)
        this.Index=i
    }
    var wt=0; var ht=1
    var ScreenSize=getScreenSize()
    var arrayPageScroll = document.viewport.getScrollOffsets();
    var boxTop = arrayPageScroll[1]
    var boxLeft = arrayPageScroll[0]
    with(this.enBkgObj.style) {
      position="absolute"
      top=boxTop+'px'
      left=boxLeft+'px'
      width=ScreenSize[wt]+'px'
      height=ScreenSize[ht]+'px'
      zIndex=1
      opacity=0
      MozOpacity=0
      KhtmlOpacity=0
      filter="alpha(opacity=0)"
      display="block"
    }
    var _self = this;
    this.enBkgObj.onclick=function() { _self.close() }
    this.enDegree=0
    this.enTimerId = setTimeout(function() { _self.fade() }, this.enInterval)
  }
}