// JavaScript Document
var itemRules = {
  '.item-info':function(el){
    if (!Element.down(el,'.info-top')) {
      new Insertion.Top(el,'<div class="info-top"></div>')
      //new Insertion.Top(el,'<div class="info-arrow"></div>')
      new Insertion.Bottom(el,'<div class="info-bottom"></div>')
    }
  },
  '.item:mouseover':function(el,ev){
    ItemInfo.show(el,ev)
  },
  '.item:mouseout':function(el,ev){
    ItemInfo.hide(el,ev)
  }
}
//Object.extend(pageRules,itemRules)

// Tests whether the mouse event happened on a element or its children
function vpWidth() {
	ret = 1024
	if (self.innerWidth) {
//		alert('self.innerWidth')
		ret = self.innerWidth
	} else if (document.documentElement) {
//		alert('documentElement')
		ret = document.documentElement.clientWidth
	} else {
//		alert('document.body')
		ret = document.body.clientWidth
	}
//	alert('width = ' + ret)
	return ret
}
function vpHeight() {
	ret = 1024
	if (self.innerHeight) {
//		alert('self.innerHeight')
		ret = self.innerHeight
	} else if (document.body) {
//		alert('document.body')
		ret = document.body.clientHeight
	} else {
//		alert('documentElement')
		ret = document.documentElement.clientHeight
	}
//	alert('height = ' + ret)
	return ret
}
var Viewport = {
	width: vpWidth(),
	height: vpHeight(),
//  width: self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth),
//  height: self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight),
  dimensions: function() {
    return { width: this.width, height: this.height }
  }
}
//alert('did you get this far7');
var MouseEvents = {
  // These are necessary to stop child elements
  // from firing certain parent events
  didMouseEnter: function(element,evt) {
    if (element.contains && evt.fromElement) {
      return !element.contains(evt.fromElement)
  	} else if (evt.relatedTarget) {
  		return !this.containsElement(element,evt.relatedTarget)
  	}
  },
  didMouseLeave: function(element,evt) {
  	if (element.contains && evt.toElement) {
  		return !element.contains(evt.toElement)
  	} else if (evt.relatedTarget) {
  		return !this.containsElement(element,evt.relatedTarget)
  	}
  },
  containsElement: function(container,containee) {
  	var isParent = false
  	do {
  		if ((isParent = container == containee)) { break }
  		containee = containee.parentNode
  	} while (containee != null)
  	return isParent
  }
}


var ItemInfo = new Object

Object.extend(ItemInfo,{
  // These are storing references to things to speed up the calls
  _currentItem: null,
  _itemInfoReferences: [],
  // This is storing a reference to the timer so it can be cleared if need be
  _itemInfoTimeout: [],

  show: function(el,ev) {
    if (!this._currentItem) {
      this._currentItem = this._getItem(el)
    }
    if (MouseEvents.didMouseEnter(this._currentItem,ev)) {
      if (!this._itemInfoReferences[this._currentItem.id]) {
        this._itemInfoReferences[this._currentItem.id] = this._getItemInfo(this._currentItem)
      }
      this._itemInfoTimeout[this._currentItem.id] = setTimeout("ItemInfo._show('"+this._currentItem.id+"')",1000)
    }
  },
  hide: function(el,ev) {
    if (MouseEvents.didMouseLeave(this._currentItem,ev)) {
      if ($('current-item-info')) {
        Element.hide('current-item-info')
      }
      this._clearCurrent()
    }
  },
  hideNow: function() {
    if ($('current-item-info')) {
      Element.hide('current-item-info')
    }
    this._clearCurrent()
  },
  
  _show: function(el) {
    this._setCurrent(this._itemInfoReferences[el])
    Element.show('current-item-info')
    // Need to re-set the position after the infobox is visible because
    // Safari and IE don't let us calculate the width until it's visible.
    this._setPosition(this._currentItemInfo)    
  },
  _getItem: function(el) {
    return ((Element.hasClassName(el,'item'))?el:Element.up(el,'.item'))
  },
  _getItemInfo: function(el) {
    return ((Element.hasClassName(el,'item-info'))?el:Element.down(this._getItem(el),'.item-info'))
  },
  _setCurrent: function(el) {
    currentItemInfo = this._getItemInfo(el).cloneNode(true)
    currentItemInfo.id = "current-item-info"
    this._setPosition(currentItemInfo)
    document.getElementsByTagName('body')[0].appendChild(currentItemInfo)
    $('current-item-info').onmouseover = function(){ItemInfo.hideNow()}
    this._currentItemInfo = $('current-item-info')
  },
  _clearCurrent: function() {
    clearTimeout(this._itemInfoTimeout[this._currentItem.id])
    if ($('current-item-info')) { Element.remove('current-item-info') }
    this._currentItem = null
  },
  _setPosition: function(el) {
    infoWidth = parseInt(Element.getStyle(el,'width'))
    itemWidth = Element.getDimensions(this._currentItem).width
    currentOffset = { left: Position.cumulativeOffset(this._currentItem)[0], top: Position.cumulativeOffset(this._currentItem)[1] }

    rightPosition = currentOffset.left+itemWidth
    leftPosition = currentOffset.left-infoWidth
    topPosition = currentOffset.top-3
	
    if (rightPosition+infoWidth+10 > Viewport.width) {
      Element.setStyle(el,{left:leftPosition+'px',top:topPosition+'px'})
    } else {
      Element.setStyle(el,{left:rightPosition+'px',top:topPosition+'px'})
    }
  }
})