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

<%@ Register Assembly="WebEdition" Namespace="MapSuite.WebEdition" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>ThinkGeo - Custom Zoom Bar Sample</title>
    <!--
        ALL RIGHTS RESERVED:
        ====================
        The contents of this file, and associated files in this directory, are 
        Copyright (C) ThinkGeo,LLC , all rights reserved, 2003-2008.

        All software Source Code, Images, Database-Design and code, Graphics Design 
        and source files, and related content (collectively referred to as SOURCE) 
        are Copyright (c) ThinkGeo,LLC, 2003-2008, All Rights Reserved.
        ThinkGeo,LLC is a USA corporation at 1617 St. Andrews Dr.Suite 201,Lawrence, 
        KS 66047.
        http://ThinkGeo.com
          
        MapSuite is a Registered Trademark of ThinkGeo,LLC.
        -->
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" />
    <meta name="description" content="How to build custom zoom bar" />
    <meta name="keywords" content="ThinkGeo, map, zoom, zoomlevel, demo, demonstration, sample" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Refresh" content="600" />
    <link href="Styles.css" type="text/css" rel="stylesheet" />
    <!--[if lt IE 7.]>
	<script defer type="text/javascript" src="pngfix.js"></script>
	<![endif]-->
	
    <!--Get value from server and set the status of zoom button-->
    <script type="text/javascript">
        function CustomCallback(ajaxReturnArgs)
        {
            if(ajaxReturnArgs != '')
            {
                var ImageButton;
                ImageButton = document.getElementById('Level1');
                ImageButton.src='./images/zoombar_off.png';

                ImageButton = document.getElementById('Level2');
                ImageButton.src='./images/zoombar_off.png';

                ImageButton = document.getElementById('Level3');
                ImageButton.src='./images/zoombar_off.png';

                ImageButton = document.getElementById('Level4');
                ImageButton.src='./images/zoombar_off.png';

                ImageButton = document.getElementById('Level5');
                ImageButton.src='./images/zoombar_off.png';

                ImageButton = document.getElementById('Level6');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level7');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level8');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level9');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level10');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level11');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level12');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level13');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level14');
                ImageButton.src='./images/zoombar_off.png';
               
                ImageButton = document.getElementById('Level15');
                ImageButton.src='./images/zoombar_off.png';           
                
                ImageButton = document.getElementById('Level16');
                ImageButton.src='./images/zoombar_off.png';   
                
                ImageButton = document.getElementById('Level17');
                ImageButton.src='./images/zoombar_off.png';   
                
                ImageButton = document.getElementById('Level18');
                ImageButton.src='./images/zoombar_off.png';      
               
                ImageButton = document.getElementById(ajaxReturnArgs);
                ImageButton.src='./images/zoombar_on.png';                             
            }
        }
    </script>

</head>
<body class="GrayStriped">
    <div id="TopBar">
        &nbsp;</div>
    <div id="TopShelf">
        <div style="float: right;">
            <a href="http://thinkgeo.com" target="_blank">
                <img src="images/by_thinkgeo.png" width="138" height="26" alt="By ThinkGeo" class="Logo-ByThinkGeo"
                    style="margin-top: 4px;" /></a></div>
        <div class="PageTitle">
            <img src="images/logo_Zoomsample.png" width="417" height="30" alt="Custom Zoom Bar Sample" /></div>
    </div>
    <div id="TopShelfShadow">
        <img src="images/topshelf_shadow.png" width="100%" height="15" alt="" /></div>
    <form id="Form1" runat="server" method="post" class="PageContent">
        <table border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto;">
            <tr>
                <!-- COLUMN 1 -->
                <td valign="top" style="padding-right: 10px;">
                    <!-- Zoom Bar -->
                    <table border="0" cellpadding="0" cellspacing="0" class="TG2Box" style="margin-top: 0px;
                        width: 109px; height: 186px;">
                        <tr>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_tl.gif" width="4" height="4" alt="" /></td>
                            <td class="TG2Box-Top" style="width: 100%;">
                                &nbsp;</td>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_tr.gif" width="4" height="4" alt="" /></td>
                        </tr>
                        <tr>
                            <td style="width: 4px;" class="TG2Box-GutterLeft">
                                &nbsp;</td>
                            <td style="width: 100%;" class="TG2Box-Title">
                                Zoom</td>
                            <td style="width: 4px;" class="TG2Box-GutterRight">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td style="width: 4px;" class="TG2Box-GutterLeft">
                                &nbsp;</td>
                            <td style="width: 100%;" valign="top" class="TG2Box-Content">
                                <p class="ZoomButton">
                                    <img id='Level1' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel1','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                    Local
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level2' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel2','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level3' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel3','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level4' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel4','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level5' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel5','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level6' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel6','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                    City
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level7' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel7','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level8' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel8','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level9' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel9','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level10' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel10','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                    Area
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level11' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel11','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level12' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel12','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level13' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel13','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level14' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel14','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                    Country
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level15' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel15','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level16' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel16','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level17' src='./images/zoom.gif' width="25px" height="12px" alt="" onclick="javascript:AjaxEvent('ClickLevel17','Map1');"
                                        class="imgbtn" style="cursor: hand" />
                                </p>
                                <p class="ZoomButton">
                                    <img id='Level18' src='./images/zoombar_on.gif' width="25px" height="12px" alt=""
                                        onclick="javascript:AjaxEvent('ClickLevel18','Map1');" class="imgbtn" style="cursor: hand" />
                                    World
                                </p>
                            </td>
                            <td style="width: 4px;" class="TG2Box-GutterRight">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_bl.png" width="4" height="12" alt="" /></td>
                            <td style="width: 100%;" class="TG2Box-Bottom">
                                <img src="images/box_btm.png" width="100%" height="12" alt="" /></td>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_br.png" width="4" height="12" alt="" /></td>
                        </tr>
                    </table>
                </td>
                <!-- COLUMN 2 -->
                <td valign="top" style="padding-right: 10px;">
                    <!-- Map -->
                    <table border="0" cellpadding="0" cellspacing="0" class="TG2Box" style="width: 81px">
                        <tr>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_tl.gif" width="4" height="4" alt="" /></td>
                            <td class="TG2Box-Top" style="width: 100%;">
                                &nbsp;
                            </td>
                            <td style="height: 4px; width: 5px;">
                                <img src="images/box_tr.gif" width="4" height="4" alt="" /></td>
                        </tr>
                        <tr>
                            <td style="width: 4px;" class="TG2Box-GutterLeft">
                                &nbsp;
                            </td>
                            <td style="width: 100%;" class="TG2Box-Title">
                            </td>
                            <td class="TG2Box-GutterRight" style="width: 5px">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 4px; height: 415px;" class="TG2Box-GutterLeft">
                                &nbsp;
                            </td>
                            <td style="width: 100%; background-image: none; padding: 0px; height: 415px;" valign="top"
                                class="TG2Box-Content">
                                <cc1:Map ID="Map1" runat="server" BackColor="WhiteSmoke" BorderColor="Black" Height="415px"
                                    Width="510px" OnAjaxPostback="Map1_AjaxPostback">
                                </cc1:Map>
                            </td>
                            <td style="height: 415px; width: 5px;" class="TG2Box-GutterRight">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 4px; height: 12px;">
                                <img src="images/box_bl.png" width="4" height="12" alt="" /></td>
                            <td style="width: 100%; height: 12px;" class="TG2Box-Bottom">
                                <img src="images/box_btm.png" width="100%" height="10" alt="" /></td>
                            <td style="height: 12px; width: 5px;">
                                <img src="images/box_br.png" width="4" height="12" alt="" /></td>
                        </tr>
                    </table>
                </td>
                <!-- COLUMN 3 -->
                <!-- Map Tools -->
                <td valign="top" style="padding-right: 10px;">
                    <table border="0" cellpadding="0" cellspacing="0" class="TG2Box" style="width: 106px">
                        <tr>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_tl.gif" width="4" height="4" alt="" /></td>
                            <td class="TG2Box-Top" style="width: 100%;">
                                &nbsp;</td>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_tr.gif" width="4" height="4" alt="" /></td>
                        </tr>
                        <tr>
                            <td style="width: 4px;" class="TG2Box-GutterLeft">
                                &nbsp;</td>
                            <td style="width: 100%;" class="TG2Box-Title">
                                Tools</td>
                            <td style="width: 4px;" class="TG2Box-GutterRight">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td style="width: 4px;" class="TG2Box-GutterLeft">
                                &nbsp;</td>
                            <td style="width: 100%;" valign="top" class="TG2Box-Content">
                                <!-- Map Tool Buttons -->
                                <p class="ToolButton">
                                    <img src='./images/zoomin.gif' width="16px" height="16px" alt="Zoom In" onclick="javascript:AjaxEvent('ZoomIn','Map1');"
                                        class="imgbtn" style="cursor: pointer" id="IMG3" />
                                    <a href="javascript:AjaxEvent('ZoomIn','Map1');">Zoom In</a>
                                </p>
                                <p class="ToolButton">
                                    <img src='./images/zoomout.gif' width="16px" height="16px" alt="Zoom Out" onclick="javascript:AjaxEvent('ZoomOut','Map1');"
                                        class="imgbtn" style="cursor: pointer" />
                                    <a href="javascript:AjaxEvent('ZoomOut','Map1')">Zoom Out</a>
                                </p>
                                <p class="ToolButton">
                                    <img src='./images/trackzoom.gif' width="16px" height="16px" alt="Zoom To Area - Allows you to draw a rectangle over the map where you want to zoom into"
                                        onclick="javascript:SetTrackZoom('Map1');" class="imgbtn" style="cursor: pointer"
                                        id="IMG2" />
                                    <a href="javascript:SetTrackZoom('Map1');" style="cursor: pointer">Zoom to Area</a>
                                </p>
                                <p class="ToolButton">
                                    <img src='./images/fullextent.png' width="16px" height="16px" alt="Full Extent" onclick="javascript:AjaxEvent('FullExtent','Map1');"
                                        class="imgbtn" style="cursor: pointer" />
                                    <a href="javascript:AjaxEvent('FullExtent','Map1');">Full Extent</a>
                                </p>
                                <p class="ToolButton">
                                    <img src='./images/Pan.gif' width="16px" height="16px" alt="Pan Map" onclick="javascript:SetPan('Map1');"
                                        class="imgbtn" style="cursor: pointer" />
                                    <a href="javascript:SetPan('Map1');">Pan Map</a>
                                </p>
                            </td>
                            <td style="width: 4px;" class="TG2Box-GutterRight">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_bl.png" width="4" height="12" alt="" /></td>
                            <td style="width: 100%;" class="TG2Box-Bottom">
                                <img src="images/box_btm.png" width="100%" height="12" alt="" /></td>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_br.png" width="4" height="12" alt="" /></td>
                        </tr>
                    </table>
                    <!-- Panning Controls -->
                    <table border="0" cellpadding="0" cellspacing="0" class="TG2Box" style="margin-top: 7px;
                        height: 94px; width: 107px;">
                        <tr>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_tl.gif" width="4" height="4" alt="" /></td>
                            <td class="TG2Box-Top" style="width: 100%;">
                                &nbsp;</td>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_tr.gif" width="4" height="4" alt="" /></td>
                        </tr>
                        <tr>
                            <td style="width: 4px;" class="TG2Box-GutterLeft">
                                &nbsp;</td>
                            <td style="width: 100%;" class="TG2Box-Title">
                                Pan</td>
                            <td style="width: 4px;" class="TG2Box-GutterRight">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td style="width: 4px;" class="TG2Box-GutterLeft">
                                &nbsp;</td>
                            <td style="width: 100%;" valign="top" class="TG2Box-Content">
                                <!-- Map Panning Control Widget -->
                                <table border="0" cellpadding="0" cellspacing="0" width="65" id="PanControls" style="margin: 0 auto;">
                                    <tr>
                                        <td>
                                            <img src='./images/pan_nw.gif' width="26px" height="20px" alt="Pan Northwest" onclick="javascript:AjaxEvent('PanNorthWest','Map1');"
                                                class="imgbtn" style="cursor: pointer" /></td>
                                        <td>
                                            <img src='./images/pan_n.gif' width="13px" height="20px" alt="Pan North" onclick="javascript:AjaxEvent('PanUp','Map1');"
                                                class="imgbtn" style="cursor: pointer" /></td>
                                        <td>
                                            <img src='./images/pan_ne.gif' width="26px" height="20px" alt="Pan Northeast" onclick="javascript:AjaxEvent('PanNorthEast','Map1');"
                                                class="imgbtn" style="cursor: pointer" /></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <img src='./images/pan_w.gif' width="26px" height="13px" alt="Pan West" onclick="javascript:AjaxEvent('PanLeft','Map1');"
                                                class="imgbtn" style="cursor: pointer" /></td>
                                        <td>
                                            <img src='./images/pan_center.gif' width="13" height="13" alt="" /></td>
                                        <td>
                                            <img src='./images/pan_e.gif' width="26px" height="13px" alt="Pan East" onclick="javascript:AjaxEvent('PanRight','Map1');"
                                                class="imgbtn" style="cursor: pointer" /></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <img src='./images/pan_sw.gif' width="26px" height="20px" alt="Pan Southwest" onclick="javascript:AjaxEvent('PanSouthWest','Map1');"
                                                class="imgbtn" style="cursor: pointer" /></td>
                                        <td>
                                            <img src='./images/pan_s.gif' width="13px" height="20px" alt="Pan South" onclick="javascript:AjaxEvent('PanDown','Map1');"
                                                class="imgbtn" style="cursor: pointer" /></td>
                                        <td>
                                            <img src='./images/pan_se.gif' width="26px" height="20px" alt="Pan Southeast" onclick="javascript:AjaxEvent('PanSouthEast','Map1');"
                                                class="imgbtn" style="cursor: pointer" /></td>
                                    </tr>
                                </table>
                            </td>
                            <td style="width: 4px;" class="TG2Box-GutterRight">
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_bl.png" width="4" height="12" alt="" /></td>
                            <td style="width: 100%;" class="TG2Box-Bottom">
                                <img src="images/box_btm.png" width="100%" height="12" alt="" /></td>
                            <td style="width: 4px; height: 4px;">
                                <img src="images/box_br.png" width="4" height="12" alt="" /></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <p class="Footer">
            Copyright 2003-2008 ThinkGeo LLC</p>
    </form>
</body>
</html>
