<% content_for :side_bar do %>
  <%= render :partial => 'layouts/side_bar', :locals => {:link_name => t('site.settings'), :link_url => admin_site_site_info_path(@site), :icon => 'icons-cog', :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{
        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: 20px 0;
      }

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

      #delete_confirm_wrap .alert{
        width: 260px;
        text-align: left;
        padding: 20px;
        font-size: 14px;
        line-height: 32px;
      }

      .modal-backdrop{
        display: none;
      }

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

<%= flash[:notice] rescue nil%>
<div id="alert_wrap">
  <div class="alert alert-success">
    <h4><span id="module_msg_title"></span></h4><br/>
    <span id="module_msg_content"></span><br/>
    <img src="http://ridepal.com/images/homeimg/preloader_transparent.gif" width="50">
  </div>
</div>

<div id="delete_confirm_wrap">
  <div class="alert alert-error row-fluid">
    <div id="module_icon" class="span3"></div>
    <div class="span9">
      <h4>Are you sure?</h4>
      Delete module <b><span id="module_title"></span></b>
    </div>
    <div class="span12">
      <button id="delete_module_btn" class="btn btn-danger"><i class="icon-check"></i> <%= t(:yes_) %></button>
      <button id="cancel_btn" class="btn pull-right"><%= t(:cancel) %></button>
    </div>
  </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_modules) %></div>
      <div class="pannel-body">
        <table class="table table-striped">
          <tbody id="extensions_table">
          </tbody>
      </table>
      </div>  
      <div class="pannel-footer">
        <button id="apply_change_btn" onclick="apply_change();" class="btn btn-primary btn-small pull-right"><%= t(:apply_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(:module_store) %></div>
        <div class="pannel-body">
        <% if @extensions.empty? %>
          <% if @store_confirmation %>
           <%= render :partial => "admin/site_registration/site_registration" %>
          <% else %>
            <%= render :partial => "admin/site_registration/not_confirmed_store" %>
          <% end %>
        <% else %>
          <table id="mt-list" class="table main-list">
            <thead>
              <tr class="sort-header">
                <th class="first"><a href="#">Module Title</a></th>
                <th data-hide="all" class="active"><a href="#">Description</a></th>
                <th class="span2">Active</th>
              </tr>
            </thead>
            <tbody>
              <% @extensions.each do |extension|%>
              <tr>
                <td class="detail-row">
                  <div class="module_icon pull-left">
                    <i class='icons-<%= extension["key"] %> icon-3x'></i>
                  </div>
                  <h5 class="mt_title"><span><%=link_to extension["title"], admin_module_store_show_path(:id => extension["_slugs"][0])%></span></h5>
                  <p class="mt_dev muted"><%=extension["author"]%></p>
                </td>
                <td>
                  <%= extension["description"].html_safe%> <%=link_to extension["title"], admin_module_store_show_path(:id => extension["_slugs"][0])%>
                </td>
                <% @module_installed = File.read("downloaded_extensions.rb").include?(extension["key"])%>
                <% if @module_installed.eql?(true)%>
                  <td class="active">Installed</td>
                <% else %>
                  <td class="active"><%= link_to t(:install), admin_module_store_download_path(:id => extension["_slugs"][0]), :class=>"act btn btn-success" %></td>
                <% end %>
              </tr>
              <% end %>
            </tbody>
          </table>
          <% end %>
        </div>  
        <div class="pannel-footer">
        </div>
      </div>
   </div>
 </div>
 <div class="modal-backdrop"></div>

<script type="text/javascript">
  var toggle_modules = new Array();
  var extensions = <%= @extensions.to_json.to_s.html_safe %>;
  var module_to_delete;

  $.each(extensions,function(){
    var module_key = this['key'];
    var module_title = this['title'];
    if(typeof this['installed']=='undefined') return;
    if(this['updated']==false) console.log(this['key']);

    var checked = "";
    if(this['enabled']==true) checked="checked='checked'";

    $("#extensions_table").append("<tr><td width='15%'><i class='icons-"+this['key']+" icon-3x'></i><br/>"+this['title']+"</td><td width='40%'>Version<br/>v"+this['installed_version']+"</td><td><%= t(:active) %><br/><input type='checkbox' class='toggle-check set-sidebar-state' data-disabled='true' "+checked+" onclick='toggle_module(\""+this['key']+"\");'></td><td>"+
          "<button id='delete_"+this['key']+"' class='btn btn-small btn-danger'><i class='icon-trash'></i>  <%= t(:delete_) %></button></td></tr>");

    $("#delete_"+this['key']).click(function(){
      module_to_delete = module_key;
      $("#module_icon").html("<i class='icons-"+module_key+" icon-3x'></i>");
      $("#module_title").html(module_title);
      $(".modal-backdrop").fadeIn(300,function(){
        $("#delete_confirm_wrap").fadeIn(300);
      });
    });
  });

  $("#cancel_btn").click(function(){
    $("#delete_confirm_wrap").fadeOut(200,function(){
      $(".modal-backdrop").fadeOut(100);
    });
  });

  $("#delete_module_btn").click(function(){
    $("#delete_confirm_wrap").fadeOut();
    remove_module(module_to_delete);
  });

  function toggle_module(module){
    if((idx = $.inArray(module, toggle_modules))>=0){
      toggle_modules.splice(idx, 1);
    }else{
      toggle_modules.push(module);
    }

    if(toggle_modules.length>0){
      $("#apply_change_btn").show();
    }else{
      $("#apply_change_btn").hide();
    }
  }

  function apply_change(){
    $(document).scrollTop(0);

    $("#module_msg_title").html("<%= t(:applying_change) %>");
    $("#module_msg_content").html("<%= t(:please_wait) %>");
    
    $(".modal-backdrop").fadeIn(300,function(){
      $("#alert_wrap").fadeIn(300);
      $.get("<%= admin_module_store_toggle_module_path%>?"+$.param({'module':toggle_modules}),function(data){
        
        toggle_modules = new Array();
        $("#apply_change_btn").hide();

        $("#module_msg_title").html("<%= t(:change_applied) %>");
        $("#module_msg_content").html("<%= t("update_manager_.restart_server") %>");

        $.get("<%= admin_module_store_restart_server_path%>",function(){
          $("#alert_wrap").delay(2000).fadeOut(300,function(){
            $(".modal-backdrop").fadeOut();
          });
        });
      });
    });
  }

  function remove_module(mod_key){
    $(document).scrollTop(0);

    $("#module_msg_title").html("<%= t(:applying_change) %>");
    $("#module_msg_content").html("<%= t(:please_wait) %>");
    
    $(".modal-backdrop").fadeIn(300,function(){
      $("#alert_wrap").fadeIn(300);
      $.get("<%= admin_module_store_remove_module_path%>?module="+mod_key,function(data){
        
        toggle_modules = new Array();
        $("#apply_change_btn").hide();

        $("#module_msg_title").html("<%= t(:change_applied) %>");
        $("#module_msg_content").html("<%= t("update_manager_.restart_server") %>");

        $.get("<%= admin_module_store_restart_server_path%>",function(){
          $("#alert_wrap").delay(2000).fadeOut(300,function(){
            $(".modal-backdrop").fadeOut();
            location.reload();
          });
        });
      });
    });
  }  
</script>
