<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Chapter_3._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .highLightElement
        {
            background-color: Yellow;
            color: Green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager ID="SM1" runat="server" />
    <div id="myDiv" style="position: absolute; top: 10px; left: 10px; width: 250px; height: 175px;
        border: solid 1px black">
        <span id="mySpan">This is the text!</span>
        <input type="button" id="removeHighlight" value="Usuń wyróżnienie" onclick="removeHighlightFn();" />
    </div>
    </form>

    <script type="text/javascript">

    function removeHighlightFn() {
      var spanElm = $get("mySpan");
      if (spanElm !== null && 
        Sys.UI.DomElement.containsCssClass
         (spanElm, 'highLightElement'))
      {
        Sys.UI.DomElement.removeCssClass(spanElm, 'highLightElement');  
      }
    }

    // getElementById
    var divElm = Sys.UI.DomElement.getElementById("myDiv");
    
    // uzyskuje element zawarty w innym elemencie
    var spanElm = $get("mySpan", divElm);

    // getLocation
    var spanLocation = Sys.UI.DomElement.getLocation(spanElm);
    spanElm.innerHTML = "Początkowa, wewnętrzna współrzędna pozioma elementu SPAN: " + spanLocation.x + "<br/>Początkowa, wewnętrzna współrzędna pionowa elementu SPAN: "+ spanLocation.y + "<br />";
    
  
    // setLocation  
    var divLocation = Sys.UI.DomElement.getLocation(divElm);
    Sys.UI.DomElement.setLocation (divElm, divLocation.x + 100, divLocation.y + 100);
    var spanLocation = Sys.UI.DomElement.getLocation(spanElm);
    spanElm.innerHTML += "<br/>Końcowa, wewnętrzna współrzędna pozioma elementu SPAN : " + spanLocation.x + "<br/>Końcowa, wewnętrzna współrzędna pionowa elementu: "+ spanLocation.y + "<br />";
    
    // containsCssClass i addCssClass
    if (!Sys.UI.DomElement.containsCssClass (spanElm, 'highLightElement')) {
        Sys.UI.DomElement.addCssClass(spanElm, 'highLightElement');
    }

    // getBounds
    var divBounds = Sys.UI.DomElement.getBounds(divElm);
    spanElm.innerHTML += "<br/>Szerokość elementu DIV: " + divBounds.width + "<br/>Wysokość elementu DIV: " + divBounds.height;
    </script>

</body>
</html>
