var elImageViewer = document.getElementById("imageViewer")
var elImagePicker = document.getElementById("imagePicker")

elImagePicker.innerHTML = ''
for(var i=0;i<Turner_FeaturedPanelList.length;i++){

  var el = document.createElement("img")
  el.src = Turner_FeaturedPanelList[i].thumbImageLocation
  elImagePicker.appendChild(el)
  el.name = i;

  var Event = YAHOO.util.Event;
  var Dom = YAHOO.util.Dom
  var Selector = YAHOO.util.Selector
  Event.addListener(el, 'mouseover', function(){
    
    var fp = Turner_FeaturedPanelList[this.name]
    Selector.query('#imageViewerBubble div.content')[0].innerHTML ="<b>" + fp.title +"</b><br/>" +  fp.logLine;
    Dom.setStyle('imageViewerBubble', 'visibility', "visible")
    Dom.setX('imageViewerBubble', Dom.getX(this) -10)

    // make sure it is not cliped
    var regionBubble = Dom.getRegion('imageViewerBubble')
    var regionDisplay = Dom.getRegion('imageViewerDisplay')

    if(regionBubble.left < regionDisplay.left){
      Dom.setX('imageViewerBubble', regionDisplay.left + 5)
    }
    if(regionBubble.right > regionDisplay.right){
      Dom.setX('imageViewerBubble', regionDisplay.right - regionBubble.width - 5)
    }

    log(regionBubble  + " " + regionDisplay)
  })

  Event.addListener(el, 'click', function() {
    // find the FeaturedPanel

    var fp = Turner_FeaturedPanelList[this.name];

    if(fp.episodeId){
      location.href='/viewepisode/' + fp.episodeId;
    }else {
      location.href = '/viewprogram/' + fp.programId;
    }
  })
}

var log = function(str){
  //return
  //document.getElementById('debug').innerHTML = str
}



var randomFeaturedPanel = function(){
  var Dom = YAHOO.util.Dom
  var Sel = YAHOO.util.Selector
  var Evt = YAHOO.util.Event
  var rand = Math.random() * Turner_FeaturedPanelList.length

  var fp = Turner_FeaturedPanelList[Math.floor(rand)]


  document.getElementById("imageViewerDisplay").src = fp.bigImageLocation

  
  Sel.query('#imageViewerBubble2 div.content')[0].innerHTML ="<b>" + fp.title + "</b><br/>" + fp.logLine;

  Evt.removeListener('imageViewerBubble2', 'click')
  Evt.addListener('imageViewerBubble2', 'click', function(){
    window.location.href = (fp.programId)? '/viewprogram/' + fp.programId : '/viewepisode/'+fp.episodeId
  })
  
  Evt.removeListener('imageViewerDisplay', 'click')
  YAHOO.util.Event.addListener('imageViewerDisplay', 'click', function(e){
    //top half
    YAHOO.util.Dom.setStyle('imageViewerBubble2', 'visibility', YAHOO.util.Event.getXY(e)[1] > 440? 'hidden': 'visible')
    YAHOO.util.Dom.setXY('imageViewerBubble2', YAHOO.util.Event.getXY(e))

    // 10 sec to hide the popup

    setTimeout(function(){ 
      YAHOO.util.Dom.setStyle('imageViewerBubble2', 'visibility', 'hidden')
    }, 10000)
  })

  // 15 sec to call this again

  setTimeout(randomFeaturedPanel, 10000)
}
YAHOO.util.Event.onDOMReady(randomFeaturedPanel)


var Turner_scrollStep = 10;
var Turner_scrolling = false


var Turner_scroll = function() {
  var Dom = YAHOO.util.Dom
  Dom.setStyle('imageViewerBubble', 'visibility', "hidden")

  
  if(!Turner_scrolling) return;

  var regionOutter = Dom.getRegion(elImageViewer)
  var regionInner = Dom.getRegion(elImagePicker)
  var nextLeft = regionInner.left + Turner_scrollStep
  var nextRight = regionInner.right + Turner_scrollStep

  if(nextLeft > regionOutter.left || nextRight < regionOutter.right){
    Turner_scrolling = false; 
    log("nextLeft="+ nextLeft + ", regionOutter.left="+regionOutter.left +", nextRight=" + nextRight +  ", regionOutter.right=" + regionOutter.right)
    return
  }


  Dom.setX(elImagePicker, nextLeft)

  window.setTimeout("Turner_scroll()", 66)
}

var Turner_scrollLeft = function() {
  Turner_scrolling = true;
  Turner_scrollStep = -10;
  Turner_scroll()
  
}

var Turner_scrollRight = function() {
  Turner_scrolling = true;
  Turner_scrollStep = 10;
  Turner_scroll()
}


var setupControlPanel = function() {
  var el = document.getElementById("imageViewerControlPanel")
  var Dom = YAHOO.util.Dom
  var Event = YAHOO.util.Event

  //var elDebug = Dom.get('debug')
  Dom.setStyle(el, 'visibility', 'hidden')

  Event.addListener('imageViewer', 'mousemove', function(e){
    //elDebug.innerHTML = "" + e +", clientX = " + e.clientX + ", clientY = " + e.clientY + ", " + Event.getXY(e)[1]

    if(Event.getXY(e)[1] > 530){
      Dom.setStyle("imageViewerControlPanel", 'visibility', 'visible')
    }


    if(Event.getXY(e)[1] < 480){
      // hide
      Dom.setStyle("imageViewerControlPanel", 'visibility', 'hidden')
      Dom.setStyle('imageViewerBubble', 'visibility', 'hidden')

    
    }
  })
}

// run once
setupControlPanel();