﻿<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="State Example" width="100%" height="1">
    <Require feature="wave"/>
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
      <style>
        a:link                { color:#666666; text-decoration:none;      }
        a:visited             { color:#666666; text-decoration:none;      }
        a:hover               { color:#666666; text-decoration:underline; }
        a:active              { color:#666666; text-decoration:none;      }
      </style>
      <script type="text/javascript">

        // http://soundcloud.com/upmyalley/shuanise-alailoye
        // http://soundcloud.com/upmyalley/sets/powell-beatnicks-tape-02
        // http://soundcloud.com/zodiac-cartel/kneel-before-zod-zodiac-cartel-mixtape-august-2009
        
        function setSize() {
          if (document.getElementById("player") != null) {
            if (document.getElementById("size").innerHTML == "-") {
              document.getElementById("size").innerHTML = "+";
              document.getElementById("player").height = "81px";
              document.getElementById("playerE").height = "81px";
              wave.getState().submitDelta({
                'visibility': 'collapsed'
              });
            }
            else {
              document.getElementById("size").innerHTML = "-";
              document.getElementById("player").height = "200px";
              document.getElementById("playerE").height = "200px";
              wave.getState().submitDelta({
                'visibility': 'expanded'
              });
            }
            gadgets.window.adjustHeight();
          }
        }
        
        function setUrl(url) {
          if (wave.getViewer() == wave.getHost()) {
            wave.getState().submitDelta({
              'url': url,
              'visibility': 'expanded'
            });
            loadPlayer(url, 'expanded');
          }
          else {
            alert("Sorry, you are not the owner of this gadget.\n\nOnly the participant who inserted this gadget in the wave (\"the owner\") can change the properties.");
          }
        }
        
        function loadPlayer(url, visibility) {
          
          if (document.getElementById("config").innerHTML != "")
            document.getElementById("url").value = url;
          
          var url_encoded = encodeURIComponent(url);
          var size = "";
          if (visibility == 'expanded') {
            size = "200";
            if (document.getElementById("config").innerHTML != "")
              document.getElementById("size").innerHTML = "-";
          }
          else {
            size = "81";
            if (document.getElementById("config").innerHTML != "")
              document.getElementById("size").innerHTML = "+";
          }
          document.getElementById("soundcloud").innerHTML = '<object id="player" width="100%" height="' + size + '"><param value="http://player.soundcloud.com/player.swf?url=' + url_encoded + '" name="player"/><param value="false" name="allowscriptaccess"/><embed id="playerE" name="playerE" width="100%" height="' + size + '" type="application/x-shockwave-flash" src="http://player.soundcloud.com/player.swf?url=' + url_encoded + '" allowscriptaccess="false"/></object>';
          gadgets.window.adjustHeight();
        }
        
        function waveStateUpdated() {
          
          if (wave.getViewer() == wave.getHost()) {
            var message = '';
            message += '<td style="width:100%;">';
            message += '  <input type="text" id="url" onchange="setUrl(document.getElementById(\'url\').value);"';
            message += '         style="font-family:Tahoma;font-size:11px;width:100%;background:#E8E8E8;color:#666666;border:1px solid #C4C4C4;padding:2px;"';
            message += '         value="http://soundcloud.com/[enter full path to track(s) or set]">';
            message += '</td>';
            message += '<td style="min-width:40px">';
            message += '  <div';
            message += '    onclick="setUrl(document.getElementById(\'url\').value);"';
            message += '    style="min-width:40px;text-align:center;font-family:Tahoma;font-size:11px;cursor:pointer;background:#E8E8E8;color:#666666;border:1px solid #C4C4C4;padding:2px;padding-left:3px;padding-right:3px;">set url</div>';
            message += '</td>';
            message += '<td style="min-width:12px">';
            message += '  <div id="size"';
            message += '    onclick="setSize();"';
            message += '    style="min-width:12px;text-align:center;font-family:Tahoma;font-size:11px;cursor:pointer;background:#E8E8E8;color:#666666;border:1px solid #C4C4C4;padding:2px;padding-left:3px;padding-right:3px;">-</div>';
            message += '</td>';
            document.getElementById("config").innerHTML = message;
            document.getElementById("config").style.display = "";
          }
          else {
            document.getElementById("config").innerHTML = "";
            document.getElementById("config").style.display = "none";
          }

          if(!wave.getState().get('url')) {
            var message = '';
            message += '<div style="padding-right:8px;">';
            message += ' <div style="padding:3px;width:100%;height:296px; border:1px solid #C4C4C4;background:#E8E8E8;font-family:Tahoma;font-size:11px;">';
            message += '   <center>';
            message += '        To begin, enter a complete SoundCloud url in the box above. <a target="_blank" href="http://soundcloud.com/">http://soundcloud.com/</a>';
            message += '        <br/>';
            message += '        Try http://soundcloud.com/upmyalley/sets/powell-beatnicks-tape-02';
            message += '        <hr noshade="yes" size="1" style="color:#C4C4C4;">';
            message += '      <object width="400" height="250"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=1857085&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=1857085&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="250"></embed></object>';
            message += '    </center>';
            message += '  </div>';
            message += '</div>';
            document.getElementById("soundcloud").innerHTML = message;
            gadgets.window.adjustHeight();
          }
          else {
            if(!wave.getState().get('visibility')) {
              loadPlayer(wave.getState().get('url'), 'expanded');
            }
            else {
              loadPlayer(wave.getState().get('url'), wave.getState().get('visibility'));
            }
          }
        }
        
        function waveParticipantUpdated() { }
        
        function waveInit() {
          if (wave && wave.isInWaveContainer()) {
            wave.setStateCallback(waveStateUpdated);
            wave.setParticipantCallback(waveParticipantUpdated);
            gadgets.window.adjustHeight();
          }
        }
        gadgets.util.registerOnLoadHandler(waveInit);
      </script>
      <table style="width:100%;">
        <tr id="config" style="display:none;"></tr>
        <tr><td colspan="3"><div id="soundcloud"></div></td></tr>
      </table>
    ]]>
  </Content>
</Module>
