## The contents of this file are subject to the Common Public Attribution
## License Version 1.0. (the "License"); you may not use this file except in
## compliance with the License. You may obtain a copy of the License at
## http://code.reddit.com/LICENSE. The License is based on the Mozilla Public
## License Version 1.1, but Sections 14 and 15 have been added to cover use of
## software over a computer network and provide for limited attribution for the
## Original Developer. In addition, Exhibit A has been modified to be
## consistent with Exhibit B.
##
## Software distributed under the License is distributed on an "AS IS" basis,
## WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for
## the specific language governing rights and limitations under the License.
##
## The Original Code is reddit.
##
## The Original Developer is the Initial Developer.  The Initial Developer of
## the Original Code is reddit Inc.
##
## All portions of the code written by reddit are Copyright (c) 2006-2012
## reddit Inc. All Rights Reserved.
###############################################################################

<%!
   from r2.lib.template_helpers import get_domain
 %>

<% domain = get_domain(False) %>

<div class="instructions">
  <h1>You need to upgrade your buttons</h1>
    <p>
      You were redirected here because the site you came from has out of date buttons and were linking directly to our iframe contents rather than our JS (tsk tsk).  If you are the site administrator, use the code snippets below to fix it. 
    </p>

    <h2>${_('simple interactive button')}</h2>
    <p>${_('put this code on your page:')}</p>
    <code>
      ${capture(draw_interactive,False)}
    </code>
      <p>${_("and you'll get something like this:")}</p>
        <span style="margin-left: 10px;">
          ${draw_interactive(False)}
        </span>

    <h2>${_("more interactive buttons")}</h2>
    <ul class="buttons">
      %for x in xrange(1,4):
        ${demo(capture(draw_interactive, x))}
      %endfor
    </ul>

    <h2>${_('interactive button advanced settings')}</h2>
    <div class="box buttonsettings">
      <ul>
        <li>
          <p><strong>${_("specify a url")}</strong><br />
            ${_("useful in places like blogs, where you want to link to the post's permalink")}</p>
          <code>${drawoption('url','[URL]')}</code>
        </li>
        <li>
          <p><strong>${_("specify a community to target")}</strong></p>
          <code>${drawoption('target','[COMMUNITY]')}</code>
        </li>
        <li>
          <p><strong>${_("specify a title")}</strong></p>
          <code>${drawoption('title','[TITLE]')}</code>
        </li>
        <li>
          <p><strong>${_("open links in a new window")}</strong></p>
          <code>${drawoption('newwindow','1')}</code>
        </li>
        <li>
          <p><strong>${_("specify the color")}</strong></p>
          <code>${drawoption('bgcolor','[COLOR]')}</code>
        </li>
        <li>
          <p><strong>${_("specify a border color")}</strong></p>
          <code>${drawoption('bordercolor','[COLOR]')}</code>
        </li>
      </ul>
      <p style="font-weight: bold">${_('Example:')}</p>
      <p>${_('to make this button:')}</p>
      <span style="margin-left: 10px;">${draw_interactive_example()}</span>
      <p>${_('use this code:')}</p>
      <code>
        <%
           ex = websafe(capture(draw_interactive_example))
           ex = ex.replace("\n", "<br/>").replace(" ", "&nbsp;")
         %>
      ${unsafe(ex)}
      </code>
    </div>

</div>

<script type="text/javascript">
$(function() {
 $(".view-code").click(function(evt) { 
    $(this).parent().addClass("show-demo"); 
 });
 $(".hide-code").click(function(evt) { 
    $(this).parent().removeClass("show-demo"); 
 });
});
</script>

<%def name="demo(content)">
<li class="button-demo">
  <a class="view-code" href="javascript:void(0)">${_("view code")}</a>
  <a class="hide-code" href="javascript:void(0)">${_("hide code")}</a>
  ${unsafe(content)}
  <br />
  <code>
    ${content}
  </code>
</li>
</%def>

<%def name="draw_point_button(image)">
  <script type="text/javascript" 
          src="http://${domain}/buttonlite.js?i=${image}"></script>
</%def>

<%def name="point_option_example()" buffered="True">
   <script type="text/javascript" 
        src="http://${domain}/buttonlite.js?i=1&styled=off&url=foo.com&newwindow=1"></script>
</%def>

<%def name="draw_interactive(type)">
%if type:
  <script type="text/javascript" 
          src="http://${domain}/static/button/button${type}.js"></script>
%else:
  <script type="text/javascript" src="http://${domain}/static/button/button1.js"></script>
%endif
</%def>

<%def name="drawoption(option, val)" buffered="True">
  <script type="text/javascript">reddit_${option}='${val}'</script>
</%def>

<%def name="draw_interactive_example()"><script type="text/javascript">
  reddit_url = "http://${domain}/buttons";
  reddit_title = "Buttons!";
  reddit_bgcolor = "FF3";
  reddit_bordercolor = "00F";
</script>
<script type="text/javascript" src="http://${domain}/static/button/button3.js"></script>
</%def>