<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Explore Oregon" width="300" height="300" description="We encourage you to approach Oregon the way Oregonians do, with a sense of humor and adventure. So giddy-up! You've got some exploring to do... Find your next adventure by choosing a point of interest within a specific region of Oregon." author="Wieden+Kennedy | Instrum3nt" title_url="http://www.traveloregon.com" author_email="Wkfeedback+ortgadget@gmail.com" author_affiliation="Wieden+Kennedy | Instrum3nt" author_location="Oregon" screenshot="http://traveloregongadget.instrum3nt.com/images/ort_scrnsht.png" thumbnail="http://traveloregongadget.instrum3nt.com/images/ort_thmb.png">
    <Locale lang="en" country="us"/>
    <Require feature="setprefs"/>
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref name="last_location_type" datatype="hidden"/>
  <UserPref name="last_region" datatype="hidden"/>
  <Content type="html"><![CDATA[
    <!-- Styles -->
    <style type="text/css">
      a img {
        border: 0;
      }
      #wrapper {
        position: relative;
      }
      #header {
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/header-tile7.gif) repeat-x top center;
        height: 61px;
        position: relative;
      }
      #header_left {
        width: 56px;
        height: 61px;
        position: absolute;
        top: 1px;
        left: 0;
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/header-left8.gif) no-repeat top left;
      }
      #header_logo {
        position: absolute;
        top: 0;
        text-align: center;
        display: block;
        width: 100%;
        height: 61px;
      }
      #header_right {
        width: 56px;
        height: 61px;
        position: absolute;
        top: 1px;
        right: 0;
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/header-right9.gif) no-repeat top right;
      }
      #bg_wrapper_left {
        background: #f7f2e7 url(http://traveloregongadget.instrum3nt.com/images/gadget-bg-left2.gif) repeat-y top left;
        padding-left: 7px;
      }
      #bg_wrapper_right {
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/gadget-bg-right2.gif) repeat-y top right;
        padding-top: 7px;
        padding-right: 7px;
      }
      #footer {
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/footer-tile3.gif) repeat-x top left;
        width: 100%;
        height: 42px;
        position: relative;
      }
      #footer_left {
        width: 38px;
        height: 36px;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/footer-left7.gif) no-repeat top left;
      }
      #footer_logo {
        position: absolute;
        top: 0;
        text-align: center;
        display: block;
        width: 100%;
        height: 36px;
      }
      #footer_right {
        width: 38px;
        height: 36px;
        position: absolute;
        top: 0;
        right: 0;
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/footer-right7.gif) no-repeat top right;
      }
      #description {
        margin: 10px 0 0 0;
        height: 100px;
        overflow: auto;
        font-size: 11px;
        padding: 0 3%;
        color: #606060;
        border-top: 1px #d9d9d9 solid;
        border-bottom: 1px #d9d9d9 solid;
      }
      #description h4 {
        margin: 5px 0;
        padding: 0;
        font-size: 14px;
        color: #762a02;
        font-family: Georgia, Times, serif;
        font-weight: normal;
      }
      #map_border {
        background-color: #fff;
        padding: 1%;
        width: 92%;
        margin: 0 3%;
      }
      #MAP___MODULE_ID___map {
        width: 100%;
        height: 300px;
        margin: 0;
        font-size: 11px;
      }
      #MAP___MODULE_ID___map h5 {
        font-size: 12px;
        margin: 0 0 3px 0;
        padding: 0;
      }
      #MAP___MODULE_ID___map p {
        margin: 1px 0;
        padding: 0;
      }
      #location_select {
        width: 94%;
        margin: 0 3%;
        background: #F7F1E7;
        padding: 0 0 10px 0;
        z-index: 10;
        text-align: center;
      }
      #location_select select {
        font-size: 11px;
        width: 170px;
      }
      #location_select input {
        font-size: 11px;
      }
      #location_select p {
        margin: 0;
        padding: 4px 0;
      }
      #location_select img {
        padding-bottom: 4px;
      }
      #location_select p#region_wrapper {
        margin-top: 0px;
      }
      #location_type, #region {
        margin-top: 3px;
      }
      #filter_locations_button {
        display: block;
        text-align: center;
        padding-top: 10px;
      }
      #filter_status {
        font-size: 11px;
        margin: 0 3%;
        width: 94%;
        color: #606060;
        padding-bottom: 10px;
      }
      #filter_status strong {
        color: #000;
      }
      img.selector {
        position: relative;
        top: 2px;
      }
      #change {
        position: absolute;
        top: 70px;
        right: 20px;
      }
      #hr {
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/dots.gif) repeat-x center center;
        height: 14px;
        width: 80%;
        text-align: center;
        margin: 0 10%;
      }
      #hr-left {
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/dots-left.gif) no-repeat center left;
        height: 14px;
        float: left;
        width: 20px;
      }
      #hr-right {
        background: transparent url(http://traveloregongadget.instrum3nt.com/images/dots-right.gif) no-repeat center right;
        height: 14px;
        float: right;
        width: 20px;
      }
      span.powered a {
        color: #7a3008;
        font-size: 9px;
        text-decoration: none;
        position: relative;
        top: -23px;
        left: 8px;
      }
    </style>
    <!--[if IE 6]>
    <style type="text/css">
      #screen_bg {
        background: transparent;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://traveloregongadget.instrum3nt.com/images/screen-bg.png',sizingMethod='scale');
      }
      #location_select {
        width: 95%;
        padding: 0 0 15px 0;
        margin-top: -20px;
      }
      #location_select img {
        padding-bottom: 5px;
      }
      #map_border {
        background-color: #fff;
        padding: 1%;
        width: 100%;
        margin: 0 3%;
        position: relative;
        top: -32px;
      }
      #MAP___MODULE_ID___map {
        width: 100%;
      }
      #footer_right {
        right: -1px;
      }
      #header_right {
        right: -1px;
      }
    </style>
    <![endif]-->
    <!--[if IE 7]>
    <style type="text/css">
      #screen_bg {
        background: transparent;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://traveloregongadget.instrum3nt.com/images/screen-bg.png',sizingMethod='scale');
      }
      #location_select {
        width: 96%;
        padding: 0 0 15px 0;
        margin-top: -20px;
      }
      #location_select img {
        padding-bottom: 5px;
      }
      #MAP___MODULE_ID___map {
        width: 100%;
      }
      #map_border {
        background-color: #fff;
        padding: 1%;
        width: 100%;
        margin: 0 3%;
        position: relative;
        top: -32px;
      }
      #footer_right {
        right: -1px;
      }
      #header_right {
        right: -1px;
      }
    </style>

    <![endif]-->

    <!-- Javascript Includes -->
    <script src="http://traveloregongadget.instrum3nt.com/javascripts/prototype.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>
    <!--<script src="http://traveloregongadget.instrum3nt.com/javascripts/pdmarker.js" type="text/javascript"></script>-->
    <!-- Start HTML -->
    <div id="wrapper">
    <div id="header"><span id="header_left"></span><span id="header_logo"><img src="http://traveloregongadget.instrum3nt.com/images/header-oregon-experiences8.gif" /></span><span id="header_right"></span></div>
    <div id="bg_wrapper_left"><div id="bg_wrapper_right">
    <div id="filter_status"></div>
    <div id="location_select">
      <p>
      <img src="http://traveloregongadget.instrum3nt.com/images/i-want-to3.gif" alt="I'm Want To" /><br />
      <select id="location_type">
        <option value="">Select an activity</option>
        <option value="Museums and Galleries">Museums &amp; Galleries</option>
        <option value="Native American Attraction">Indian Artifacts &amp; Info</option>
        <option value="Interpretive Center">Interpretive Centers</option>
        <option value="Lighthouses">Lighthouses</option>
        <option value="Theatre and Performing Arts">Drama</option>
        <option value="Wineries">Wineries</option>
        <option value="Outdoors and Nature">Outdoorsy Experiences</option>
        <option value="Shopping">Good Shopping</option>
        <option value="Casinos">Gambling Emporiums</option>
        <option value="Covered Bridges">Covered Bridges</option>
        <option value="Antiques">Antiques</option>
        <option value="Breweries">Breweries</option>
        <option value="Ghost Towns">Ghost Towns</option>
        <option value="History and Heritage">Historical Highlights</option>
        <option value="Educational">Classes &amp; Workshops</option>
        <option value="Family Fun">Family Fun</option>
      </select>
      </p>
      <div id="hr"><div id="hr-left">&nbsp;</div><div id="hr-right">&nbsp;</div></div>
      <p id="region_wrapper">
        <img src="http://traveloregongadget.instrum3nt.com/images/located-in2.gif" alt="Located In" /><br />
        <select name="region" id="region">
        <option value="">Select a region</option>
        <option value="42.25291778330197,-122.662353515625,7">Southern Oregon</option>
        <option value="44.22158376545796,-121.201171875,8">Central Oregon</option>
        <option value="45.48516915340121,-122.728271484375,9">Portland Metro</option>
        <option value="45.52751668442124,-121.74224853515625,9">Hood/Gorge</option>
        <option value="44.91035917458495,-118.212890625,7">Northeastern Oregon</option>
        <option value="42.99661231842139,-118.4765625,7">Southeastern Oregon</option>
        <option value="44.750634493861064,-123.0743408203125,8">N. Willamette Valley</option>
        <option value="43.937461690316646,-123.079833984375,8">S. Willamette Valley</option>
        <option value="44.12702800650004,-124.0631103515625,8">Central Coast</option>
        <option value="43.028745251348795,-124.1455078125,7">Southern Coast</option>
        <option value="45.63708709571876,-123.5797119140625,8">Northern Coast</option>
      </select>
      <a href="javascript:void(0)" id="filter_locations_button"><img src="http://traveloregongadget.instrum3nt.com/images/find.gif" alt="Find" /></a></p>
    </div>
      <div id="MAP___MODULE_ID___map"></div>
      <div id="description" style="display: none;"></div>
    </div>
    </div>
    <div id="footer"><span id="footer_left"></span><span id="footer_logo"><img src="http://traveloregongadget.instrum3nt.com/images/footer-text5.gif" /></span><span id="footer_right"></span></div>
    <p><span class="powered"><a href="http://www.traveloregon.com" onclick="window.open(this.href); return false;" >Powered by TravelOregon.com</a></span></p>
    </div>
    <script type="text/javascript">
      
      function travel_oregon_gadget___MODULE_ID__() {
        
        this.map = '';
        this.map_element = 'MAP___MODULE_ID___map';
        this.active_marker = '';
        this.prefs = new _IG_Prefs(__MODULE_ID__);
        this.last_location_type = this.prefs.getString('last_location_type');
        this.last_region = this.prefs.getString('last_region');

        this.pref = function(pref) {
          return this.prefs.getString(pref);
        }
        
        this.fetch_locations = function() {
          this.active_marker = '';
          this.map.closeInfoWindow();
          this.map.clearOverlays();
          this.center = this.map.getCenter();
          var bounds = this.map.getBounds();
          var location_type = $('location_type').value;
          var querystring = $H({location_type: location_type, north: bounds.getNorthEast().lat(), east: bounds.getNorthEast().lng(), south: bounds.getSouthWest().lat(), west: bounds.getSouthWest().lng(), center_latitude: this.center.lat(), center_longitude: this.center.lng(), zoom: this.map.getZoom()}).toQueryString();
          _IG_FetchContent('http://traveloregongadget.instrum3nt.com/locations/?'+querystring, function (data) {
            this.add_markers(eval(data));
          }.bind(this));
        }.bind(this),
        
        this.add_markers = function(data) {
          if (data.length == 0) {
            this.set_filter_status('Nothing found in this area. Try <a href="javascript:void(0);" onclick="MAP___MODULE_ID___handle.show_change_screen();">changing your settings</a>')
            return;
          }
          for (var i = 0; i < data.length; i++) {
            var location = data[i].attributes;
            var point = new GLatLng(location.latitude, location.longitude);
            var desc = '<div style="padding: 2px 0 0 0; height: 80px; width: 200px; background-color: #FFF;">';
            desc += '<h5>' + location.title + '</h5><p>';
            if (location.address_1 > '') {
              desc += location.address_1;
            }
            if (location.city > '' || location.zip > '') {
              desc += "<br />\n" + location.city + " " + location.zip;
            }
            if (location.phone_1 > '') {
              desc += "<br />\n" + location.phone_1;
            }
            if (location.address_1 > '' && location.city > '') {
              desc += '<br /><a href="http://maps.google.com/maps?f=d&hl=en&saddr=&daddr=' + escape(location.address_1 + ", " + location.city + ", OR") + '" onclick="window.open(this.href); return false;">Directions</a>';
              if (location.siteurl > '') {
                desc += ' | ';
              }
            }
            if (location.siteurl > '') {
              if (location.address_1 == '' || location.city == '') {
                desc += '<br />';
              }
              desc += '<a href="' + location.siteurl + '" onclick="window.open(this.href); return false;">Read More</a>';
            }
            desc += '</p></div>';
            var marker = this.create_marker(point,desc,'<h4>' + location.title + '</h4>' + location.description);
            this.map.addOverlay(marker);
            if (this.active_marker == '') {
              this.active_marker = marker;
              marker.setImage('http://traveloregongadget.instrum3nt.com/images/markeryellow.png');
              marker.openInfoWindow(desc);
              $('description').innerHTML = '<h4>' + location.title + '</h4>' + location.description;
              $('description').scrollTop = 0;
            }
          }
          this.prefs.set('last_location_type',$('location_type').value);
          this.prefs.set('last_region',$('region').value);
          this.last_location_type = $('location_type').value;
          this.last_region = $('region').value;
        }.bind(this),
        
        this.create_marker = function(point,info,desc) {
          var marker = new GMarker(point);
          GEvent.addListener(marker, "click", function() {
            if (this.active_marker > '') {
              this.active_marker.setImage('http://www.google.com/mapfiles/marker.png');
            }
            marker.openInfoWindow(info);
            $('description').innerHTML = desc;
            $('description').scrollTop = 0;
            marker.setImage('http://traveloregongadget.instrum3nt.com/images/markeryellow.png');
            this.active_marker = marker;
          }.bind(this).bind(marker));
          return marker;
        }.bind(this),

        this.items_selected = function() {
          if ($('location_type').value == '' || $('region').value == '') {
            return false;
          }
          return true;
        },
        
        this.set_filter_status = function(info) {
          if (info) {
            $('filter_status').innerHTML = info;
          } else {
            var location_type = $('location_type').options[$('location_type').selectedIndex].text;
            var region = $('region').options[$('region').selectedIndex].text;
            $('filter_status').innerHTML = '<img class="selector" src="http://traveloregongadget.instrum3nt.com/images/showing.gif" alt="Showing" /> <strong>' + location_type + '</strong><br /><img class="selector" src="http://traveloregongadget.instrum3nt.com/images/locatedin.gif" alt="Located In" /> <strong>' + region + '</strong> <a href="javascript:void(0);" onclick="MAP___MODULE_ID___handle.show_change_screen();"><img src="http://traveloregongadget.instrum3nt.com/images/new-search2.gif" alt="New Search" id="change"/></a>';
          }
          _IG_AdjustIFrameHeight();
        },

        this.show_change_screen = function() {
          $('filter_status').innerHTML = '';
          $('description').innerHTML = '';
          $('location_select').show();
          //this.add_screen_bg();
          $('MAP___MODULE_ID___map').hide();
          $('description').hide();
        },
        
        this.set_and_fetch = function() {
          this.init_map();
          if (this.items_selected()) {
            $('MAP___MODULE_ID___map').show();
            $('location_select').hide();
            $('description').show();
            this.set_filter_status();
            var region = $('region').value.split(',');
            var coords = new GLatLng(region[0],region[1]);
            this.map.setCenter(new GLatLng(region[0],region[1]),parseInt(region[2]));
            this.fetch_locations();
            //this.remove_screen_bg();
          }
        },
        
        /* INIT MAP */
        this.init_map = function() {
          if (this.map == '') {
            this.map = new GMap2($(this.map_element));
            this.map.addControl(new GSmallMapControl());
            this.map.setCenter(new GLatLng(45.51181,-122.67568),6);
            $('MAP___MODULE_ID___map').hide();
          }
        }

        Event.observe($('filter_locations_button'),'click',function() {
          if (!this.items_selected()) {
            alert('Please select both an Activity and a Region to continue.');
            return false;
          }
          this.set_and_fetch();
        }.bind(this));
        
        if (this.last_location_type > '' && this.last_region > '') {
          $A($('location_type').options).each(function(option) {
            if (this.pref('last_location_type') == option.value) {
              option.selected = true;
              option.defaultSelected = true;
              return;
            }
          }.bind(this));
          $A($('region').options).each(function(option) {
            if (this.pref('last_region') == option.value) {
              option.selected = true;
              option.defaultSelected = true;
              return;
            }
          }.bind(this));
          this.set_and_fetch();
        }
        
        _IG_AdjustIFrameHeight();
        
      }
      
      var MAP___MODULE_ID___handle;
      _IG_RegisterOnloadHandler(function() {
          MAP___MODULE_ID___handle = new travel_oregon_gadget___MODULE_ID__();
      });
      
    </script>
    ]]>
  </Content>
</Module>
