<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" itemscope itemtype="http://schema.org/Research">
<head>
        <title>da_sense</title>
	${js}
	${css}
        <!-- content for +1- / Like-Button -->
        <meta itemprop="name" content="da_sense">
        <meta itemprop="description" content="${likeButtonsContent}">
        <meta itemprop="image" content="${PATH_LOCAL_IMG}icon_small.png">
</head>
<body>

    
    ${introductionOverlay}
    
<!-- Top Bar ############################################################### -->
    <div id="main-navbar" class="navbar navbar-fixed-top">
        <div class="navbar-inner">
    <!-- Logo ############################################################## -->
            <a class="brand" ref="#">
                <img src="${PATH_LOCAL_IMG}logo.png" alt="da_sense" />
            </a>
    <!-- Filter Datatype ################################################### -->
            <div id="filter-type" class="filter-container">
                <label>${sp_type}</label>
                <div class="btn-group dasense-filter dasense-type">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="icon-filter"></i>
                        <span class="dropdown-text">${sp_noise_level}</span>
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" sensorType="1">${sp_noise_level}</a></li>
                        <li><a href="#" sensorType="4">${sp_temperature}</a></li>
                        <li><a href="#" sensorType="5">${sp_luminance}</a></li>
                        <li><a href="#" sensorType="6">${sp_humidity}</a></li>
                    </ul>

                </div>
            </div>
    <!-- Filter Time ####################################################### -->
            <div id="filter-time" class="filter-container">
                <label>${legend_timerange}</label>
                <div id="filter-time-from">
                    <form class="navbar-form pull-left">
                        <div class="filter-inner">
                            <div class="input-append input-prepend date filter-date" id="date_from" data-date="01.01.2012" data-date-format="dd.mm.yyyy">
                                <span style="width: 25px;" class="add-on">${tr_from}</span>
                                <input class="datepicker-input" size="10" type="text" value="01.01.2012">
                                <span class="add-on"><i class="icon-th"></i></span>
                            </div>
                            <div class="filter-time">
                                <div class="filter-add-time">
                                    <a class="btn" href="#">
                                        <i class="icon-time"></i>
                                    </a>
                                </div>
                                <div class="input-append bootstrap-timepicker-component">
                                    <input type="text" class="timepicker-default">
                                    <span class="add-on">
                                        <i class="icon-time"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="filter-time-to">
                    <form class="navbar-form pull-left">
                        <div class="filter-inner">
                            <div class="input-append input-prepend date filter-date" id="date_to" data-date="12.02.2012" data-date-format="dd.mm.yyyy">
                                <span style="width: 25px;" class="add-on">${tr_to}</span>
                                <input class="datepicker-input" size="10" type="text" value="12.02.2012">
                                <span class="add-on"><i class="icon-th"></i></span>
                            </div>
                            <div class="filter-time">
                                <div class="filter-add-time">
                                    <a class="btn" href="#">
                                        <i class="icon-time"></i>
                                    </a>
                                </div>
                                <div class="input-append bootstrap-timepicker-component">
                                    <input type="text" class="timepicker-default">
                                    <span class="add-on">
                                        <i class="icon-time"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
    <!-- Filter Visualtisation ############################################# -->
            <div id="filter-visualization" class="filter-container">
                <form class="navbar-form pull-left">
                    <label>${visualisation}</label>
                    <div class="filter-inner">
                        <div class="btn-group dasense-filter dasense-visualization">
                            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="icon-globe"></i>
                                <span class="dropdown-text">Visualisierung</span>
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" algo="heatmapRect">${heatmapRect}</a></li>
                                <li><a href="#" algo="differencemap">${differencemap}</a></li>
                                <!--<li><a href="#" algo="heatmapStd">${heatmapStd}</a></li>-->
                                <!--<li><a href="#" algo="tests">Tests...</a></li>-->
                            </ul>
                        </div>
                        <!--
                        <label class="checkbox">
                            <input type="checkbox"> Messpunkte anzeigen
                        </label>
                        -->
                    </div>
                </form>
            </div>
    <!-- Localization ######################################################## -->
            <div id="localization">
                <i class="icon-info-sign icon-white showInfoOverlay"></i>
                <a href="javascript:switchLocale('deDE');"><img src="${PATH_LOCAL_IMG}flag_germany.png" alt="Deutsch"></a>
                <a href="javascript:switchLocale('enUS');"><img src="${PATH_LOCAL_IMG}flag_usa.png" alt="English"></a>
    <!-- User Login ######################################################## -->
                ${login_form}
            </div>    
        </div>
        <!-- Top Bar Hide ###################################################### -->
        <div class="halfCircleBottom" id="toggle-mainbar">
            <i class="icon-chevron-up icon-white"></i>
        </div>
    </div>
    

<!-- Left Bar ############################################################## -->

    <div id="navigation-left-wrapper">
    <!-- Navigation ######################################################## -->
        <div id="navigation-left">
            <div id="navigation-left-logo" style="height: 100px;">
                <img src="${PATH_LOCAL_IMG}logo.png" alt="da_sense" style="width: 175px; padding-top:30px;"/>
            </div>
            <ul class="nav nav-list">                
                <li class="active"><a class="blank filter" id="map-link" href="#"><i class="android-ic_action_map"></i> ${map}</a></li>
                <li><a href="#" class="filter" url="?action=project"><i class="android-ic_action_book"></i> ${info}</a></li>
                ${user_leftmenu}
                <li class="nav-header">${community}</li>
                <li class="divider" id="divGreen"></li>
                <li class=""><a class="filter" id="highscore" url="?module=default&action=highscore" href="#"><i class="android-ic_action_list"></i> ${highscore}</a></li>
                <!--<li class=""><a class="filter" id="achievement" url="?module=user&action=area" href="#"><i class="android-ic_action_achievement"></i> ${awards}</a></li>-->
                <li class="nav-header">${other}</li>
                <li class="divider" id="divGreen"></li>
                <li class=""><a class="filter" id="press" href="#" url="?action=press"><i class="android-ic_action_edit"></i> ${press}</a></li>
                <li class=""><a class="filter" id="devs" href="#" url="?action=devs"><i class="android-ic_action_users"></i>  ${devs}</a></li>
                <li><a href="#" class="disableKeyEvents filter" url="?action=contact" id="bugreport"><i class="android-ic_action_mail"></i> ${feedback}</a></li>
                <li class=""><a class="filter" id="impressum" href="#" url="?action=impressum"><i class="android-ic_action_business"></i> ${imprint}</a></li>
                <li class="divider" id="divGreen" style="margin-top: 25px"></li>
                <!-- Like-Buttons / Twitter -->
                <li class="" ><g:plusone size="medium" count="true" href="${PATH_ROOT}"></g:plusone></li>
                <li class="" style="padding-top: 6px"><div class="fb-like" data-href="http://www.da-sense.de" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="tahoma"></div></li>
                <li class="" style="padding-top: 6px"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="http://www.da-sense.de" data-lang="de">Twittern</a></li>
                <div style="padding-top: 25px">
                    <div>
                        <a href="http://play.google.com/store/apps/details?id=de.tudarmstadt.tk.noisemap" class="appstore filter" target="_blank">
                            <img alt="Android app on Google Play" src="${PATH_LOCAL_IMG}playstore.png" width="120" height="42">
                        </a>
                    </div>
                    <div style="margin-top: 15px">
                        <a href="https://itunes.apple.com/de/app/noisemap/id630756037?mt=8&uo=4" class="itunes_store" target="_blank">
                            <img alt="Android app on Google Play" src="${PATH_LOCAL_IMG}appstore.png" width="135" height="40">
                        </a>
                    </div>
                </div>
            </ul>
        </div>
    </div>
    <!-- Left Bar Hide Button ############################################## -->
    <div class="halfCircleRight" id="toggle-sidebar">
        <i class="icon-chevron-right icon-white" style="margin-top: 50%; color: #d6d6d6"></i>
    </div>
<!-- Content ############################################################### -->

    <div id="wrapper">
    <!-- Map ############################################################### -->
        <!-- will be filled on buttom js load -->
        <div id="map"></div>
    <!-- Content ########################################################### -->
        <!-- will be filled by javascript -->
        <div id="site-content-wrapper">
            <div id="site-content"></div>
        </div>
    </div>

    

<!-- Bottom JS ############################################################# -->
    ${js_bottom}
    <script>$DS.init();</script>
</body>
</html>