<% content_for :side_bar do %>
	<%= render :partial => 'layouts/side_bar', :locals => {:link_name => t('site.settings'), :link_url => admin_site_site_info_path(@site), :side_bar_content => 'admin/sites/side_bar'} %>
<% end %>

<head>
    <%= stylesheet_link_tag "lib/wrap-nav"%>
    <%= stylesheet_link_tag "lib/main-list"%>
    <%= stylesheet_link_tag "lib/mt-list"%>
    <%= stylesheet_link_tag "lib/filter"%>
    <%= stylesheet_link_tag "lib/togglebox"%>

    <%= javascript_include_tag 'lib/footable-0.1' %>
    <%= javascript_include_tag 'lib/all-list' %>  
    <%= javascript_include_tag 'lib/retina' %>   
     <style type="text/css">
      .container{
        /*max-width: 600px;*/
      }

      .panel{
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid #DFDFDF;
        background: #FFF;
        box-shadow: 0px 0px 10px #CCC;
      }

      .break{
        border-left: 1px solid #FCFCFC;
        border-right: 1px solid #DDD;
        padding: 10px 0;
        margin: 0 15px;
      }

      .panel-heading{
        font-size: 16px;
        color: #666;
        padding: 10px 20px;
        height: 20px;

        background-color: #fafafa;
        background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
        background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
        background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
        background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
        *zoom: 1;
        border-bottom:  1px solid #DDD;
      }

      .table{
        margin: 0;
        -webkit-border-radius: 5px;
        border-radius: 5px;
      }

  /*    .table td, .table th, .table .quick-edit{
        vertical-align: middle;
        text-align: center;
      }
*/
      /*.table td img{
        background: #666;
        border: 3px solid #AAA;
        padding: 2px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #000 inset;
      }
*/
      .pannel-body{
        min-height:  400px;
        overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 15px;
      }

      .pannel-footer{
        background: #f2f2f2; /* Old browsers */
        background: -moz-linear-gradient(top,  #f2f2f2 0%, #ffffff 76%, #ededed 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(76%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #f2f2f2 0%,#ffffff 76%,#ededed 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #f2f2f2 0%,#ffffff 76%,#ededed 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #f2f2f2 0%,#ffffff 76%,#ededed 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #f2f2f2 0%,#ffffff 76%,#ededed 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        
        border: 1px solid #EEE;
        border-top: 1px solid #CCC;
        padding: 10px;

        height: 30px;
      }

      #apply_change_btn{
        display: none;
      }

      #alert_wrap{
        display: none;
        position: absolute;
        width: 93%;
        top: 30%;
        z-index: 1045;
      }

      .alert{
        width: 400px;
        text-align: center;
        z-index: 1050;
        margin: 0 auto;
        padding: 10px 0;
      }

      .modal-backdrop{
        display: none;
      }

      .icons-faq:before{ content: "\e086"; }
      .icons-ask:before { content: "\e062"; }
    </style>
</head>


<%#= render 'filter' %>
<%#= flash[:notice] rescue nil%>
<div id="alert_wrap">
  <div class="alert alert-success">
    <h4><span id="module_msg_title">Please wait...</span></h4><br/>
    <span id="module_msg_content">Theme changes taking effect</span><br/>
    <img src="http://ridepal.com/images/homeimg/preloader_transparent.gif" width="50">
  </div>
</div>

 <div class="container row-fluid">

  <div class="span4">
    <div class="panel">
      <div class="panel-heading"><i class="icons-download"></i><span class="break"></span><%= t(:installed_templates) %></div>
      <div class="pannel-body">
        <table class="table table-striped">
          <tbody id="extensions_table">
              <%= render 'designs' %>
          </tbody>
      </table>
      </div>  
      <div class="pannel-footer">
        <button id="apply_change_btn" onclick="apply_change();" class="btn btn-primary btn-small pull-right">Appy Change</button>
      </div>
    </div>
   </div>

   <div class="span8 pull-right">
     <div class="panel">
        <div class="panel-heading"><i class="icon-shopping-cart"></i><span class="break"></span><%= t(:template_store) %></div>
        <div class="pannel-body">

          <table id="mt-list" class="table main-list">
            <tbody>
                <tr id="loading">
                    <td>
	                   <img src="http://ridepal.com/images/homeimg/preloader_transparent.gif" width="50">
                        <span>Loading template store...</span>
                    <td>
                </tr>
            </tbody>
         </table>

        </div>  
        <div class="pannel-footer">
        </div>
      </div>
   </div>
 </div>
 <div class="modal-backdrop"></div>
</table>

<div class="form-actions form-fixed pagination-right">
    <%= link_to content_tag(:i, nil, :class => 'icon-plus icon-white') + t(:upload), upload_package_admin_designs_path, :class => 'btn btn-primary pull-right' %>
</div>

<script type="text/javascript">
    $.ajax({
        url : "<%= admin_template_store_path %>",
        type : "get",
        datatType : "html"
    }).done(function(data){
        $("#loading").addClass('hide');
        $("#mt-list").html(data);
        bindHandlers();
    }).fail(function(){
        $("#loading").addClass('hide');
        $("#mt-list").html("<tr><td>Error loading template store</td></tr>");
    })
     $(document).on('change', '.design_default', function(){
        $("#alert_wrap").show();
        $(".modal-backdrop").show();
        $(this).attr('value');
        $.getScript($(this).attr('rel') + '/' + $(this).val() + '/change_design',function(){
            $("#alert_wrap").hide();
           $(".modal-backdrop").hide();
        });
    });

    var bindHandlers = function(){
        $("a.download-link").on(clickEvent,function(){
          if($(this).attr("disabled") == "disabled")return false;
          var el = $(this);
          el.removeClass("btn-primary").addClass("btn-info").text("Installing").attr('disabled',"disabled");
          $.ajax({
            url : "<%= admin_template_store_download_theme_path %>",
            data : el.data(),
            dataType : "json",
            type : "post"
          }).done(function(data){
             if(data.success){
                el.removeClass('btn-info').addClass('btn-success').text("Installed");
                $.ajax({
                    url: '<%= admin_design_list_path %>',
                    type: 'get',
                    dataType: 'html'
                })
                .done(function(data) {
                    $("#tbody_designs").html(data);
                    $(".toggle-check").togglebox();
                });
              }
          }).fail(function(){
              el.removeClass('btn-info').addClass('btn-danger').text("Error, please try again.").removeAttr('disabled');
          })
        })
    }
</script>

