/adei/trunk

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 <xsl:output method="html" encoding="utf-8"/>

 <xsl:template match="/">

    <!--page styles found in adei.css-->

    <!--jQuery libraries hosted by google-->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script type="text/javascript">

    <![CDATA[

    //standard way to initialize jQuery sliders

    //has some problems on initial load with Firefox, needs another click of the Apply button in source tab

    //Opera works fine

    $("#page_wrapper_div").ready(function()

    {

    

        $("#start_slider").slider(

        { 

            handle: $('.knob'),

            animate:'true',

            min:1,

            max:]]><xsl:value-of select="result/start_slider_max"/><![CDATA[,

            step:1,

            startValue:1,

            change: function(e,ui)

            {

                var s = ]]><xsl:value-of select="result/start"/><![CDATA[;

                

                if(s != ui.value)

                {

                    adei.SetCustomProperties("start=" + ui.value + "&pic_id=" + (Math.floor(]]><xsl:value-of select="result/data_amount"/><![CDATA[/]]><xsl:value-of select="result/start_slider_max"/><![CDATA[) * (ui.value - 1)) + "&window=" + 0);

                }

            }

        });

    

        $("#zoom_slider").slider(

        { 

            handle: $('.knob'),

            animate:'true',

            min:1,

            max:5,

            step:1,

            startValue:1,

            orientation:'vertical',

 

            change: function(e,ui)

            {

                var z = ]]><xsl:value-of select="result/zoom"/><![CDATA[;

                

                if(z != ui.value)

                {

                    adei.SetCustomProperties("zoom=" + ui.value + "&window=" + 0);

                }

            }

        });

    

    });

 

    //when the main image is clicked, we get the mouse X position

    //and use that and the amount of data in the graph to determine what to show on the 

    //secondary image, this function won't work correctly if the window property is used to select the shown data

    function GetMouseX(event)

    {

        var g_width = document.getElementById("image").width;//get the width of the whole image

        

        //get the X position of the mouse pointer in relation to the edge of the main sidebar

        var pos_x = event.pageX-document.getElementById("image").offsetLeft-document.getElementById("main_sidebar").offsetWidth;

        

        pos_x = pos_x - 50;//remove from the X position the width of the graph's left margin

        

        //get the amount of datapoints read by the service and the start_slider's maximum value

        var data_amount = ]]><xsl:value-of select="result/data_amount"/><![CDATA[;

        var start_slider_max = ]]><xsl:value-of select="result/start_slider_max"/><![CDATA[;

        

        //if the user clicks outside the bounds of the graph's background image set the position at the edge of the image

        if(pos_x < 0) pos_x = 0;

        if(pos_x > g_width - (50 + 20)) pos_x = (g_width - (50 + 20));

        

        var zoom = ]]><xsl:value-of select="result/zoom"/><![CDATA[;

        

        var slice_amount = (180 - (zoom * 30));//calculate the amount of slices

        var slice_width = (g_width - (50 + 20)) / slice_amount;//calculate the width of the slices

        

        var start = ]]><xsl:value-of select="result/start"/><![CDATA[;

        

        var id = Math.floor(pos_x / slice_width) + (Math.floor(data_amount/start_slider_max) * (start - 1));//determine the id of the clicked slice

        

        adei.SetCustomProperties("pic_id=" + id);

 

    }

 

    //when the secondary image has been loaded, we adjust the slider values based on what was returned by the service as XML

    $("#image2").ready(function ()

    {

        var startValue = ]]><xsl:value-of select="result/start"/><![CDATA[;

        var zoomValue = ]]><xsl:value-of select="result/zoom"/><![CDATA[;

        

        $("#start_slider").slider("option", "value", startValue);

        $("#zoom_slider").slider("option", "value", zoomValue);

    });

    

    

    //function to change the service based on the calling button's value

    

    function ChangeService(event)

    {

        var target = (event.currentTarget.value);

        adei.SetCustomProperties("image_target=" + target);

    }

    

    ]]>

    </script>

    <!--Module start-->

    <div id="page_wrapper_div">

        <div id="upper_wrapper_div">

            <div id="image_zoom_wrapper_div">

                <div id="image_div">

                    <!--main image-->

                    <img id="image" src="{result/image}" alt="Loading..." onmousedown="javascript:GetMouseX(event);"></img>

                </div>

                <div id="zoom_wrapper_div">

                    <div id="zoom_slider"></div>

                </div>

            </div>

            <div id="start_wrapper_div">

                <div id="start_slider"></div>

            </div>

        </div>

        <div id="lower_wrapper_div">

            <!--secondary image-->

            <img id="image2" src="{result/image2}" alt="Loading..."></img>

        </div>

        <button value="cloud" onclick="javascript:ChangeService(event);">Clouds</button>

        <button value="ceilo" onclick="javascript:ChangeService(event);">Ceilometer</button>

        <button value="temp" onclick="javascript:ChangeService(event);">Temperature</button>

    </div>

   <!--Module end-->

 </xsl:template>

</xsl:stylesheet>