
/*
 * weinre is available under *either* the terms of the modified BSD license *or* the
 * MIT License (2008). See http://opensource.org/licenses/alphabetical for full text.
 * 
 * Copyright (c) 2011 IBM Corporation
 */

requireClass ../common/Binding
requireClass ../common/Weinre

//-----------------------------------------------------------------------------
class ElementHighlighter
    this.boxMargin  = document.createElement("div")
    this.boxBorder  = document.createElement("div")
    this.boxPadding = document.createElement("div")
    this.boxContent = document.createElement("div")
    
    this.boxMargin.appendChild(this.boxBorder)
    this.boxBorder.appendChild(this.boxPadding)
    this.boxPadding.appendChild(this.boxContent)
    
    this.boxMargin.style.backgroundColor  = "#FCC"
    this.boxBorder.style.backgroundColor  = "#000"
    this.boxPadding.style.backgroundColor = "#CFC"
    this.boxContent.style.backgroundColor = "#CCF"
    
    this.boxMargin.style.opacity =
    this.boxBorder.style.opacity =
    this.boxPadding.style.opacity =
    this.boxContent.style.opacity = 0.6
    
    this.boxMargin.style.position =
    this.boxBorder.style.position =
    this.boxPadding.style.position =
    this.boxContent.style.position = "absolute"
    
    this.boxMargin.style.borderWidth =
    this.boxBorder.style.borderWidth =
    this.boxPadding.style.borderWidth =
    this.boxContent.style.borderWidth = "thin"
        
    this.boxMargin.style.borderStyle =
    this.boxBorder.style.borderStyle =
    this.boxPadding.style.borderStyle =
    this.boxContent.style.borderStyle = "solid"
                
    this.boxMargin.__weinreHighlighter =
    this.boxBorder.__weinreHighlighter =
    this.boxPadding.__weinreHighlighter =
    this.boxContent.__weinreHighlighter = true
                        
    this.boxMargin.style.display = "none"
        
    document.body.appendChild(this.boxMargin)
    
//-----------------------------------------------------------------------------
method on(element)
    if (null == element) return
    if (element.nodeType != Node.ELEMENT_NODE) return
    
    this.calculateMetrics(element)
    this.boxMargin.style.display = "block"

//-----------------------------------------------------------------------------
method off
    this.boxMargin.style.display = "none"

//-----------------------------------------------------------------------------
getter element
    return this.boxMargin

//-----------------------------------------------------------------------------
method calculateMetrics(element)

    var metrics = getMetrics(element)
    
    this.boxMargin.style.top     = metrics.y      + "px"
    this.boxMargin.style.left    = metrics.x      + "px"
    this.boxMargin.style.height  = metrics.height + "px"
    this.boxMargin.style.width   = metrics.width  + "px"

    this.boxBorder.style.top     = metrics.marginTop    + "px"
    this.boxBorder.style.left    = metrics.marginLeft   + "px"
    this.boxBorder.style.bottom  = metrics.marginBottom + "px"
    this.boxBorder.style.right   = metrics.marginRight  + "px"

    this.boxPadding.style.top    = metrics.borderTop    + "px"
    this.boxPadding.style.left   = metrics.borderLeft   + "px"
    this.boxPadding.style.bottom = metrics.borderBottom + "px"
    this.boxPadding.style.right  = metrics.borderRight  + "px"
    
    this.boxContent.style.top    = metrics.paddingTop    + "px"
    this.boxContent.style.left   = metrics.paddingLeft   + "px"
    this.boxContent.style.bottom = metrics.paddingBottom + "px"
    this.boxContent.style.right  = metrics.paddingRight  + "px"
    
//-----------------------------------------------------------------------------
function getMetrics(element)
    var result = {}
    
    // get the x,y position
    var left = 0
    var top  = 0
        
    var el = element
    do {
        left += el.offsetLeft
        top  += el.offsetTop
    } while (el = el.offsetParent)
    
    result.x = left
    result.y = top

    // get the computed style
    var cStyle = document.defaultView.getComputedStyle(element)
    
    result.width  = fromPx(cStyle["width"])
    result.height = fromPx(cStyle["height"])
    
    result.marginLeft    = fromPx(cStyle["margin-left"])
    result.marginRight   = fromPx(cStyle["margin-right"])
    result.marginTop     = fromPx(cStyle["margin-top"])
    result.marginBottom  = fromPx(cStyle["margin-bottom"])
    
    result.borderLeft    = fromPx(cStyle["border-left-width"])
    result.borderRight   = fromPx(cStyle["border-right-width"])
    result.borderTop     = fromPx(cStyle["border-top-width"])
    result.borderBottom  = fromPx(cStyle["border-bottom-width"])
    
    result.paddingLeft   = fromPx(cStyle["padding-left"])
    result.paddingRight  = fromPx(cStyle["padding-right"])
    result.paddingTop    = fromPx(cStyle["padding-top"])
    result.paddingBottom = fromPx(cStyle["padding-bottom"])

    result.width += 
        result.marginLeft  + result.marginRight +
        result.borderRight  +
        result.paddingLeft + result.paddingRight
        
    result.height += 
        result.marginTop  + result.marginBottom +
        result.borderBottom  +
        result.paddingTop + result.paddingBottom
        
    result.x -= 
        result.marginLeft
        
    result.y -= 
        result.marginTop

    return result
    
//-----------------------------------------------------------------------------
function fromPx(string) 
    return parseInt(string.replace(/px$/,""))