Merge pull request #447 from warpc/443-tour

[refs #443] Tour about the system

app/assets/javascripts/tour.js

@@ -0,0 +1,3 @@
+//= require jquery
+//= require jquery-ui
+//= require pirobox_extended_min

app/assets/stylesheets/tour.scss

@@ -0,0 +1,455 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: Tahoma, Geneva, Helvetica, sans-serif;
+  color: #292929;
+  background: #1f60a1 image-url("bg.png") repeat-x; 
+  min-width: 940px;
+  min-height: 600px;
+  text-align: center;
+  height: 100%;
+}
+
+header, section, footer, aside, nav, article, menu {
+  display: block;
+}
+
+input[type="text"]:focus { outline: none; }
+   
+input[type="password"]:focus { outline: none; }
+   
+input:focus { outline: none; }
+   
+select:focus { outline: none; }
+
+a img { border: none; }
+  
+.wrap {
+  width: 940px;
+  margin: 0 auto;
+  text-align: center;
+  border: 1px solid #3f668c;
+  -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5); 
+  background: #FFF;
+  min-height: 92%;
+}
+
+
+
+.both {
+  clear: both;
+}
+
+/* Top menu */
+
+header {
+  -webkit-box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.4);
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.4); 
+  position: relative;
+  z-index: 1000;
+}
+
+header div.left {
+  background: image-url("top-left-tour.png");
+  height: 46px;
+  width: 14px;
+  float: left;
+}
+
+header div.middle {
+  background: image-url("top-middle.png");
+  float: left;
+  height: 46px;
+  width: 912px;
+}
+
+header div.right {
+  background: image-url("top-right-tour.png");
+  height: 46px;
+  width: 14px;
+  float: right;
+}
+
+/* Left part of top menu*/
+
+header menu {
+  float: left;
+  margin: 0;
+  padding: 0;
+}
+
+header menu ul {
+  list-style: none;
+  margin: 0;
+  padding-top: 10px;
+}
+
+header menu ul li {
+  display: inline;
+}
+
+header menu ul li a {
+  font-size: 12px;
+  color: #FFF;
+  text-decoration: none;
+  height: 43px;
+  padding: 15px 10px 15px 10px;
+}
+
+header menu ul li a:hover {
+  color: #cee7ff;
+}
+
+header menu ul li a.first {
+  
+}
+
+header menu ul li a.active {
+  background: image-url("menu-hover.png") repeat-x;
+}
+
+
+
+header div.logo {
+  float: left;
+  margin-top: 5px;
+  padding-left: 0px;
+  padding-right: 0px;
+  
+}
+
+/* Right part of top menu */
+
+header div.information {
+  float: right;
+}
+
+header div.search {
+  float: left;
+  margin: 10px 0px 0px 0px;
+  -moz-border-radius-topleft: 3px;
+  -moz-border-radius-topright: 3px;
+  -moz-border-radius-bottomright: 3px;
+  -moz-border-radius-bottomleft: 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  background: #FFF;
+  border: 1px solid #7691aa;
+}
+
+header div.search div.pic {
+  background: image-url("search-button.png");
+  height: 22px;
+  width: 24px;
+  float: left;
+}
+
+header div.search div.field {
+  float: left;
+  margin: -1px 0px 0px 0px;
+}
+
+header div.search div.field input {
+  border: none;
+  height: 18px;
+  background: none;
+  width: 132px;
+  font-size: 12px;
+  font-family: Arial;
+  padding: 2px 0px 0px 0px;
+}
+
+header div.search div.field input.gray {
+  color: #cfcfcf;
+}
+
+header div.search div.field input.black {
+  color: #333333;
+}
+
+header div.avatar {
+  float:left;
+  padding: 6px 10px 10px 10px;
+  
+}
+
+header div.information div.active {
+  background: image-url("menu-hover.png") repeat-x;
+}
+
+header div.information div.user {
+  float: left;
+  margin-left: 14px;
+}
+
+header div.profile {
+  float: left;
+  text-align: right;
+  color: #FFF;
+  font-size: 12px;
+  padding-top: 12px;
+}
+
+header div.profile a {
+  color: #FFF;
+  text-decoration: none;
+  padding-right: 10px;
+}
+
+header div.profile a:hover {
+  text-decoration: underline;
+}
+
+
+header div.droplist-wrap {
+  margin: -4px 0px 0px 0px;
+  width: 151px;
+  float: right;
+}
+
+header div.droplist {
+  background: image-url("bg-droplist.png") repeat-x;
+  height: 91px;
+  width: 151px;
+  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+  position: absolute;
+  margin-top: 0px;
+  border-radius: 0px 0px 4px 4px;
+  display: none;
+  text-align: right;
+  z-index: 9999;
+}
+
+header div.droplist-wrap div.a {
+  margin-top: 5px;
+}
+
+header div.droplist a{
+  position: relative;
+  padding-left: 15px;
+  font-size: 12px;
+  color: #447cae;
+  text-decoration: none;
+  padding-right: 15px;
+  margin-top: 10px;
+}
+
+header div.droplist a:hover{
+  text-decoration: underline;
+}
+
+
+/* Submenu */
+
+.sub-menu {
+  height: 38px;
+  margin: -7px 0px 0px 0px;
+  padding: 0px 0px 0px 15px;
+  background: #ededed;
+  position: relative;
+  z-index: 100;
+  border-bottom: 1px solid #FFF;
+  -webkit-box-shadow: 0px 5px 3px -3px rgba(18, 86, 135, 0.2);
+  -moz-box-shadow: 0px 5px 3px -3px rgba(18, 86, 135, 0.2);
+  box-shadow: 0px 5px 3px -3px rgba(18, 86, 135, 0.2);
+}
+
+.sub-menu div.left {
+  float: left;
+  width: 200px;
+  border-right: 1px solid #dcdcdc;
+  font-size: 12px;
+  text-align: left;
+  font-weight: 700;
+  padding: 10px 0px 0px 0px;
+  height: 21px;
+}
+
+.sub-menu div.right {
+  float: left;
+}
+
+
+.sub-menu nav { 
+  float: left;
+  margin: 0px 0px 0px 0px;
+}
+
+.sub-menu nav ul {
+  list-style: none;
+  text-align: left;
+  padding: 0;
+  margin: 0;
+  padding-top: 4px;
+}
+
+.sub-menu nav ul li {
+  display: inline;
+}
+
+.sub-menu nav ul li a {
+  font-size: 12px;
+  color: #292929;
+  text-decoration: none;
+  height: 34px;
+  padding: 0px 20px 9px 20px;
+}
+
+.sub-menu nav ul li a.active {
+  background: image-url("submenu-hover.png") repeat-x scroll 0 100% transparent;
+}
+
+.sub-menu nav ul li a:hover {
+  color: #2b6daf;
+}
+
+/* Page markup */
+
+article {
+  font-size: 12px;
+}
+
+article a{
+  color: #447cae;
+  font-size: 12px;
+  text-decoration: none;
+  padding: 0px 0px;
+}
+
+article a:hover{
+  text-decoration: underline;
+}
+
+
+
+/* Footer */
+
+footer {
+  height: 32px;
+  padding-left: 15px;
+  width: 900px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+footer ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+  color: #FFF;
+  padding-top: 10px;
+  text-align: left;
+}
+
+footer ul li {
+  display: inline;
+}
+
+footer ul li a {
+  font-size: 12px;
+  color: #FFF;
+  text-decoration: none;
+}
+
+footer ul li a:hover {
+  text-decoration: underline;
+}
+
+
+
+/*TOUR*/
+
+header.top {
+  position: relative;
+  z-index: 3;
+  background: none;
+  background: image-url("tour-top.png") no-repeat 0 0;
+}
+
+header.tour {
+  height: 194px;
+  position: relative;
+  z-index: 2;
+}
+
+div.sub-menu.tour {
+  padding: 10px 0 0 0;
+  height: 35px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+
+div.sub-menu.tour nav {
+  float: none;
+}
+
+div.sub-menu.tour nav ul {
+  text-align: center;
+}
+
+div.sub-menu.tour nav li a {
+  font-size: 18px;
+  color: #575756;
+}
+
+article div.feature-wrap {
+  background: image-url("tour-bg.png") repeat-x 0 100%;
+  text-align: center;
+  margin-top: 20px;
+}
+
+article div.feature {
+  width: 744px;
+  text-align: center;
+  margin: 0 auto;
+}
+
+article div.feature div {
+  width: 362px;
+  text-align: left;
+}
+
+article div.feature div img{
+  padding-bottom: 50px;
+}
+
+article div.feature div h1 {
+  font-size: 24px;
+  color: #7eb7ed;
+  margin: -4px 0 10px 0;
+  padding: 0;
+}
+
+article div.feature div p {
+  font-size: 12px;
+  color: #58595b;
+  padding-bottom: 50px;
+}
+
+article div.feature div.left {
+  float: left;
+}
+
+article div.feature div.right {
+  float: right;
+  padding: 0;
+}
+
+article div.tour-gap {
+  height: 330px;
+  width: 10px;
+}
+
+@import "pirobox";
+
+/* Custom */
+header menu ul li a {
+    padding: 15px 8px 15px 8px;
+}

app/controllers/pages_controller.rb

@@ -4,6 +4,11 @@ class PagesController < ApplicationController
   # load_and_authorize_resource
 
   def root
+    render 'pages/tour/abf-tour-project-description-1', :layout => 'tour'
+  end
+
+  def tour_inside
+    render "pages/tour/tour-inside-#{params[:id]}", :layout => 'tour'
   end
 
   def forbidden

app/views/layouts/tour.html.haml

@@ -0,0 +1,58 @@
+!!!
+%html
+  %head
+    %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
+    %title Сборочная среда
+    = stylesheet_link_tag "tour"
+    /[if lt IE 9]
+      = javascript_include_tag 'https://html5shiv.googlecode.com/svn/trunk/html5.js'
+    = javascript_include_tag "tour"
+    = csrf_meta_tag
+  %body
+    .wrap
+      %header.top
+        .left
+        .middle
+          %menu
+            .logo= link_to image_tag('logo-mini.png', :alt => 'logo'), root_path
+            = render 'layouts/menu/top', :which_menu => 'top_menu'
+          .information
+            = render 'search/form'
+            - if current_user
+              .user
+                .avatar= image_tag avatar_url(current_user), :alt => 'avatar', :height => "30"
+                .profile
+                  %a{:href => "#"}
+                    = current_user.uname
+                    = image_tag 'expand-white.png', :alt => 'ex'
+                .both
+              .both
+              .droplist-wrap
+                #droplist.droplist
+                  .a= link_to current_user.uname, current_user
+                  .a= link_to t('layout.settings.label'), profile_settings_path
+                  .a= link_to t('layout.logout'), destroy_user_session_path, :method => :delete
+            - else
+              .user
+                .profile= link_to t("layout.devise.shared_links.sign_in"), new_user_session_path
+        .right
+        .both
+      / Page
+      .tour
+        =image_tag 'tour-top.png', :alt => 'ABF'
+      .both
+      %article
+        = yield
+        .both
+        -# No idea why here was this div...
+        -#.tour-gap
+    %footer= render "layouts/menu/bottom"
+    = render 'layouts/counters' unless current_user.try(:admin?)
+    :javascript
+      $(document).ready(function() {
+          $().piroBox_ext({
+              piro_speed : 700,
+              bg_alpha : 0.5,
+              piro_scroll : true //pirobox always positioned at the center of the page
+          });
+      });

app/views/pages/tour/abf-tour-project-description-1.html.haml

@@ -0,0 +1,43 @@
+.feature-wrap
+  .feature
+    .left
+      %a.pirobox{:href => image_path('tour/big/control.png'), :rel => "single", :title => "Управление проектами"}
+        =image_tag 'tour/1/control.png'
+    .right
+      %a{:href => tour_inside_path('projects')}
+        %h1 Управление проектами
+      %p
+        Каждый git-репозиторий на ABF поставляется с инструментами,
+        необходимыми для управления проектами, вне зависимости от
+        того, публичный или приватный проект.
+        %br/
+        =link_to 'Читать далее...', tour_inside_path('projects')
+    .both
+.feature-wrap
+  .feature
+    .left
+      %a{:href => tour_inside_path('sources')}
+        %h1 Исходный 	код
+      %p
+        ABF — полноценный git-хостинг с удобным веб-интерфейсом.
+        %br/
+        =link_to 'Читать далее...', tour_inside_path('sources')
+    .right
+      %a.pirobox{:href => image_path('tour/big/source.png'), :rel => "single", :title => "Исходный код"}
+        =image_tag 'tour/2/source.png'
+    .both
+.feature-wrap
+  .feature
+    .left
+      %a.pirobox{:href => image_path('tour/big/monitoring.png'), :rel => "single", :title => "Сборка пакетов"}
+        =image_tag 'tour/3/monitoring.png'
+    .right
+      %a{:href => tour_inside_path('builds')}
+        %h1 Сборка пакетов
+      %p
+        ABF — это не только хостинг исходного кода, но и система сборки
+        и хостинга пакетов. Собирайте свои проекты под множество
+        дистрибутивов и архитектур в свой персональный репозиторий.
+        %br/
+        =link_to 'Читать далее...', tour_inside_path('builds')
+    .both

app/views/pages/tour/tour-inside-builds.html.haml

@@ -0,0 +1,53 @@
+.sub-menu.tour
+  %nav
+    %ul
+      %li
+        =link_to 'Управление проектами', tour_inside_path('projects')
+      %li
+        =link_to 'Исходный код', tour_inside_path('sources')
+      %li
+        =link_to 'Сборка проектов', tour_inside_path('builds'), :class => 'active'
+.both
+/ Page
+%article
+  / Single page content
+  .feature-wrap
+    .feature
+      .left
+        %a.pirobox{:href => image_path('tour/big/repo.png'), :rel => "single", :title => "Персональный репозиторий"}
+          =image_tag 'tour/3/repo.png'
+      .right
+        %h1 Персональный репозиторий
+        %p
+          Персональный репозиторий — быстрый и легкий способ
+          распространить свое ПО множеству Linux пользователей
+          различных дистрибутивов, используя стандартный механизм
+          доставки ПО. ABF позаботится о зависимостях ПО из основных
+          репозиториев и/или дополнительных персональных репозиториев.
+          Опубликовали новую версию? Пользователи автоматически
+          получат оповещение о доступности обновления.
+      .both
+  .feature-wrap
+    .feature
+      .left
+        %h1 Сборка пакета
+        %p
+          ABF позволяет собрать ваши проекты под множество архитектур
+          и дистрибутивов, используя свои вычислительные мощности.
+          Никаких затрат с вашей стороны!
+      .right
+        %a.pirobox{:href => image_path('tour/big/build.png'), :rel => "single", :title => "Сборка пакета"}
+          =image_tag 'tour/3/build.png'
+      .both
+  .feature-wrap
+    .feature
+      .left
+        %a.pirobox{:href => image_path('tour/big/monitoring.png'), :rel => "single", :title => "Мониторинг"}
+          =image_tag 'tour/3/monitoring.png'
+      .right
+        %h1 Мониторинг
+        %p
+          В большом числе сборочных заданий легко потеряться, поэтому
+          мониторинг сборки фокусирует ваше внимание только на том,
+          что действительно важно.
+      .both

app/views/pages/tour/tour-inside-projects.html.haml

@@ -0,0 +1,61 @@
+/ Submenu
+.sub-menu.tour
+  %nav
+    %ul
+      %li
+        =link_to 'Управление проектами', tour_inside_path('projects'), :class => 'active'
+      %li
+        =link_to 'Исходный код', tour_inside_path('sources')
+      %li
+        =link_to 'Сборка проектов', tour_inside_path('builds')
+.both
+/ Page
+%article
+  / Single page content
+  .feature-wrap
+    .feature
+      .left
+        %a.pirobox{:href => image_path('tour/big/control.png'), :rel => "single", :title => "Управление проектами"}
+          =image_tag 'tour/1/control.png'
+      .right
+        %h1 Управление проектами
+        %p
+          Существует 3 возможных роли для участника проекта: только
+          чтение, чтение/запись и административный уровень. Участником
+          проекта может выступать как пользователь, так и группа. Проект,
+          как и группа, может иметь неограниченное число участников
+          (пользователей, групп или всех вместе).
+      .both
+  .feature-wrap
+    .feature
+      .left
+        %h1 Git Wiki
+        %p
+          Вики проекта создана с помощью Gollum — открытого
+          вики-движка, созданного GitHub. В основе своей это полноценный
+          git-репозиторий, который можно клонировать, использовать в
+          режиме офлайн, изменять и загружать изменения обратно на
+          сервер, как в случае с обычным кодом. Удобный веб-редактор
+          позволит работать с ней в онлайн. Теперь данные о проекте не
+          пропадут и доступны для редактирования в любимом редакторе!
+          %br/
+          %br/
+          Примечание: для приватного проекта вики доступна только его
+          участникам. Для публичного — всем для чтения.
+      .right
+        %a.pirobox{:href => image_path('tour/big/git.png'), :rel => "single", :title => "Git Wiki"}
+          =image_tag 'tour/1/git.png'
+      .both
+  .feature-wrap
+    .feature
+      .left
+        %a.pirobox{:href => image_path('tour/big/tracker.png'), :rel => "single", :title => "Легкий трекер задач"}
+          =image_tag 'tour/1/tracker.png'
+      .right
+        %h1 Легкий трекер задач
+        %p
+          Каждый проект также может использовать легкий и простой
+          трекер задач. Метки и назначения позволят не потеряться среди
+          задач, а понятный интерфейс позволит сконцентрироваться на
+          работе, а не на заполнении огромных формуляров.
+      .both

app/views/pages/tour/tour-inside-sources.html.haml

@@ -0,0 +1,65 @@
+.sub-menu.tour
+  %nav
+    %ul
+      %li
+        =link_to 'Управление проектами', tour_inside_path('projects')
+      %li
+        =link_to 'Исходный код', tour_inside_path('sources'), :class => 'active'
+      %li
+        =link_to 'Сборка проектов', tour_inside_path('builds')
+.both
+/ Page
+%article
+  / Single page content
+  .feature-wrap
+    .feature
+      .left
+        %a.pirobox{:href => image_path('tour/big/source.png'), :rel => "single", :title => "Исходный код онлайн"}
+          =image_tag 'tour/2/source.png'
+      .right
+        %h1 Исходный код онлайн
+        %p
+          Мы сфокусировались на том, чтобы сделать исходный код
+          доступным и прозрачным. Все, что вы выложите в git-репозиторий,
+          мгновенно станет доступным для просмотра в режиме онлайн,
+          чтобы вы могли поделиться им с людьми, даже если они не
+          используют Git. На главной странице каждого проекта есть список
+          файлов проекта, а также информация о последнем изменении.
+          Вы можете сразу увидеть самое важное в вашем проекте: код.
+      .both
+  .feature-wrap
+    .feature
+      .left
+        %h1 История файла
+        %p
+          Каждый файл в git-репозитории имеет историю, которую вы
+          легко можете посмотреть: кто, когда и что в нем поменял.
+      .right
+        %a.pirobox{:href => image_path('tour/big/history.png'), :rel => "single", :title => "История файла"}
+          =image_tag 'tour/2/history.png'
+      .both
+  .feature-wrap
+    .feature
+      .left
+        %a.pirobox{:href => image_path('tour/big/annotation.png'), :rel => "single", :title => "Аннотация файла"}
+          =image_tag 'tour/2/annotation.png'
+      .right
+        %h1 Аннотация файла
+        %p
+          Ищете автора фрагмента кода? Откройте аннотацию файла
+          (Blame), чтобы увидеть: кто и в каком коммите последний
+          изменял данный фрагмент.
+      .both
+  .feature-wrap
+    .feature
+      .left
+        %h1 Редактирования онлайн
+        %p
+          Вам нужно быстро внести изменение в файл? Исправить
+          орфографические ошибки на вашем мобильном телефоне?
+          Мы предлагаем простой редактор для каждого файла в
+          git-репозитории.
+      .right
+        %a.pirobox{:href => image_path('tour/big/edit.png'), :rel => "single", :title => "Редактирования онлайн"}
+          =image_tag 'tour/2/edit.png'
+      .both

config/environments/production.rb

@@ -62,7 +62,7 @@ Rosa::Application.configure do
   config.assets.digest = true
 
   # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
-  config.assets.precompile += %w(login.css login.js reg_session.css)
+  config.assets.precompile += %w(login.css login.js reg_session.css tour.css tour.js)
 end
 
 # require 'stub_xml_rpc'

config/routes.rb

@@ -9,6 +9,7 @@ Rosa::Application.routes.draw do
 
   get '/forbidden' => 'pages#forbidden', :as => 'forbidden'
   get '/terms-of-service' => 'pages#tos', :as => 'tos'
+  get '/tour/:id' => 'pages#tour_inside', :as => 'tour_inside', :id => /projects|sources|builds/
 
   get '/activity_feeds.:format' => 'activity_feeds#index', :as => 'atom_activity_feeds', :format => /atom/
   if APP_CONFIG['anonymous_access']

lib/ext/rails/reserved_name_validator.rb

@@ -23,6 +23,7 @@ class ReservedNameValidator < ActiveModel::EachValidator
     unfollow unsubscribe url user
     widget widgets wiki
     xfn xmpp
+    tour
   }
 
   def reserved_names

vendor/assets/javascripts/pirobox_extended_min.js

@@ -0,0 +1,33 @@
+/**
+* Name: PiroBox Extended v.1.0
+* Date: Gen 2011
+* Autor: Diego Valobra (http://www.pirolab.it),(http://www.diegovalobra.com)
+* Version: 1.0
+* Licence: CC-BY-SA http://creativecommons.org/licenses/by-sa/3/it/
+**/
+(function($){$.fn.piroBox_ext=function(opt){opt=jQuery.extend({piro_speed:700,bg_alpha:0.9,piro_scroll:true},opt);$.fn.piroFadeIn=function(speed,callback){$(this).fadeIn(speed,function(){if(jQuery.browser.msie)
+$(this).get(0).style.removeAttribute('filter');if(callback!=undefined)
+callback();});};$.fn.piroFadeOut=function(speed,callback){$(this).fadeOut(speed,function(){if(jQuery.browser.msie)
+$(this).get(0).style.removeAttribute('filter');if(callback!=undefined)
+callback();});};var my_gall_obj=$('a[class*="pirobox"]');var map=new Object();for(var i=0;i<my_gall_obj.length;i++){var it=$(my_gall_obj[i]);map['a.'+it.attr('class').match(/^pirobox_gall\w*/)]=0;}
+var gall_settings=new Array();for(var key in map){gall_settings.push(key);}
+for(var i=0;i<gall_settings.length;i++){$(gall_settings[i]+':first').addClass('first');$(gall_settings[i]+':last').addClass('last');}
+var piro_gallery=$(my_gall_obj);$('a[class*="pirobox_gall"]').each(function(rev){this.rev=rev+0});var struct=('<div class="piro_overlay"></div>'+'<table class="piro_html"  cellpadding="0" cellspacing="0">'+'<tr>'+'<td class="h_t_l"></td>'+'<td class="h_t_c" title="drag me!!"></td>'+'<td class="h_t_r"></td>'+'</tr>'+'<tr>'+'<td class="h_c_l"></td>'+'<td class="h_c_c">'+'<div class="piro_loader" title="close"><span></span></div>'+'<div class="resize">'+'<div class="nav_container">'+'<a href="#prev" class="piro_prev" title="previous"></a>'+'<a href="#next" class="piro_next" title="next"></a>'+'<div class="piro_prev_fake">prev</div>'+'<div class="piro_next_fake">next</div>'+'<div class="piro_close" title="close"></div>'+'</div>'+'<div class="caption"></div>'+'<div class="div_reg"></div>'+'</div>'+'</td>'+'<td class="h_c_r"></td>'+'</tr>'+'<tr>'+'<td class="h_b_l"></td>'+'<td class="h_b_c"></td>'+'<td class="h_b_r"></td>'+'</tr>'+'</table>');$('body').append(struct);var wrapper=$('.piro_html'),piro_capt=$('.caption'),piro_bg=$('.piro_overlay'),piro_next=$('.piro_next'),piro_prev=$('.piro_prev'),piro_next_fake=$('.piro_next_fake'),piro_prev_fake=$('.piro_prev_fake'),piro_close=$('.piro_close'),div_reg=$('.div_reg'),piro_loader=$('.piro_loader'),resize=$('.resize'),btn_info=$('.btn_info');var rz_img=0.95;if($.browser.msie){wrapper.draggable({handle:'.h_t_c,.h_b_c,.div_reg img'});}else{wrapper.draggable({handle:'.h_t_c,.h_b_c,.div_reg img',opacity:0.80});}
+var y=$(window).height();var x=$(window).width();$('.nav_container').hide();wrapper.css({left:((x/2)-(250))+'px',top:parseInt($(document).scrollTop())+(100)});$(wrapper).add(piro_capt).add(piro_bg).hide();piro_bg.css({'opacity':opt.bg_alpha});$(piro_prev).add(piro_next).bind('click',function(c){$('.nav_container').hide();c.preventDefault();piro_next.add(piro_prev).hide();var obj_count=parseInt($('a[class*="pirobox_gall"]').filter('.item').attr('rev'));var start=$(this).is('.piro_prev')?$('a[class*="pirobox_gall"]').eq(obj_count-1):$('a[class*="pirobox_gall"]').eq(obj_count+1);start.click();});$('html').bind('keyup',function(c){if(c.keyCode==27){c.preventDefault();if($(piro_close).is(':visible')){close_all();}}});$('html').bind('keyup',function(e){if($('.item').is('.first')){}else if(e.keyCode==37){e.preventDefault();if($(piro_close).is(':visible')){piro_prev.click();}}});$('html').bind('keyup',function(z){if($('.item').is('.last')){}else if(z.keyCode==39){z.preventDefault();if($(piro_close).is(':visible')){piro_next.click();}}});$(window).resize(function(){var new_y=$(window).height();var new_x=$(window).width();var new_h=wrapper.height();var new_w=wrapper.width();wrapper.css({left:((new_x/2)-(new_w/2))+'px',top:parseInt($(document).scrollTop())+(new_y-new_h)/2});});function scrollIt(){$(window).scroll(function(){var new_y=$(window).height();var new_x=$(window).width();var new_h=wrapper.height();var new_w=wrapper.width();wrapper.css({left:((new_x/2)-(new_w/2))+'px',top:parseInt($(document).scrollTop())+(new_y-new_h)/2});});}
+if(opt.piro_scroll==true){scrollIt()}
+$(piro_gallery).each(function(){var descr=$(this).attr('title');var params=$(this).attr('rel').split('-');var p_link=$(this).attr('href');$(this).unbind();$(this).bind('click',function(e){piro_bg.css({'opacity':opt.bg_alpha});e.preventDefault();piro_next.add(piro_prev).hide().css('visibility','hidden');$(piro_gallery).filter('.item').removeClass('item');$(this).addClass('item');open_all();if($(this).is('.first')){piro_prev.hide();piro_next.show();piro_prev_fake.show().css({'opacity':0.5,'visibility':'hidden'});}else{piro_next.add(piro_prev).show();piro_next_fake.add(piro_prev_fake).hide();}
+if($(this).is('.last')){piro_prev.show();piro_next_fake.show().css({'opacity':0.5,'visibility':'hidden'});piro_next.hide();}
+if($(this).is('.pirobox')){piro_next.add(piro_prev).hide();}});function open_all(){wrapper.add(piro_bg).add(div_reg).add(piro_loader).show();function animate_html(){if(params[1]=='full'&&params[2]=='full'){params[2]=$(window).height()-70;params[1]=$(window).width()-55;}
+var y=$(window).height();var x=$(window).width();piro_close.hide();div_reg.add(resize).animate({'height':+(params[2])+'px','width':+(params[1])+'px'},opt.piro_speed).css('visibility','visible');wrapper.animate({height:+(params[2])+20+'px',width:+(params[1])+20+'px',left:((x/2)-((params[1])/2+10))+'px',top:parseInt($(document).scrollTop())+(y-params[2])/2-10},opt.piro_speed,function(){piro_next.add(piro_prev).css({'height':'20px','width':'20px'});piro_next.add(piro_prev).add(piro_prev_fake).add(piro_next_fake).css('visibility','visible');$('.nav_container').show();piro_close.show();});}
+function animate_image(){var img=new Image();img.onerror=function(){piro_capt.html('');img.src="http://www.pirolab.it/pirobox/js/error.jpg";}
+img.onload=function(){piro_capt.add(btn_info).hide();var y=$(window).height();var x=$(window).width();var imgH=img.height;var imgW=img.width;if(imgH+20>y||imgW+20>x){var _x=(imgW+20)/x;var _y=(imgH+20)/y;if(_y>_x){imgW=Math.round(img.width*(rz_img/_y));imgH=Math.round(img.height*(rz_img/_y));}else{imgW=Math.round(img.width*(rz_img/_x));imgH=Math.round(img.height*(rz_img/_x));}}else{imgH=img.height;imgW=img.width;}
+var y=$(window).height();var x=$(window).width();$(img).height(imgH).width(imgW).hide();$(img).fadeOut(300,function(){});$('.div_reg img').remove();$('.div_reg').html('');div_reg.append(img).show();$(img).addClass('immagine');div_reg.add(resize).animate({height:imgH+'px',width:imgW+'px'},opt.piro_speed);wrapper.animate({height:(imgH+20)+'px',width:(imgW+20)+'px',left:((x/2)-((imgW+20)/2))+'px',top:parseInt($(document).scrollTop())+(y-imgH)/2-20},opt.piro_speed,function(){var cap_w=resize.width();piro_capt.css({width:cap_w+'px'});piro_loader.hide();$(img).fadeIn(300,function(){piro_close.add(btn_info).show();piro_capt.slideDown(200);piro_next.add(piro_prev).css({'height':'20px','width':'20px'});piro_next.add(piro_prev).add(piro_prev_fake).add(piro_next_fake).css('visibility','visible');$('.nav_container').show();resize.resize(function(){NimgW=img.width;NimgH=img.heigh;piro_capt.css({width:(NimgW)+'px'});});});});}
+img.src=p_link;piro_loader.click(function(){img.src='about:blank';});}
+switch(params[0]){case'iframe':div_reg.html('').css('overflow','hidden');resize.css('overflow','hidden');piro_close.add(btn_info).add(piro_capt).hide();animate_html();div_reg.piroFadeIn(300,function(){div_reg.append('<iframe id="my_frame" class="my_frame" src="'+p_link+'" frameborder="0" allowtransparency="true" scrolling="auto" align="top"></iframe>');$('.my_frame').css({'height':+(params[2])+'px','width':+(params[1])+'px'});piro_loader.hide();});break;case'content':div_reg.html('').css('overflow','auto');resize.css('overflow','auto');$('.my_frame').remove();piro_close.add(btn_info).add(piro_capt).hide();animate_html()
+div_reg.piroFadeIn(300,function(){div_reg.load(p_link);piro_loader.hide();});break;case'inline':div_reg.html('').css('overflow','auto');resize.css('overflow','auto');$('.my_frame').remove();piro_close.add(btn_info).add(piro_capt).hide();animate_html()
+div_reg.piroFadeIn(300,function(){$(p_link).clone(true).appendTo(div_reg).piroFadeIn(300);piro_loader.hide();});break
+case'gallery':div_reg.css('overflow','hidden');resize.css('overflow','hidden');$('.my_frame').remove();piro_close.add(btn_info).add(piro_capt).hide();if(descr==""){piro_capt.html('');}else{piro_capt.html('<p>'+descr+'</p>');}
+animate_image();break;case'single':piro_close.add(btn_info).add(piro_capt).hide();div_reg.html('').css('overflow','hidden');resize.css('overflow','hidden');$('.my_frame').remove();if(descr==""){piro_capt.html('');}else{piro_capt.html('<p>'+descr+'</p>');}
+animate_image();break}}});$('.immagine').live('click',function(){piro_capt.slideToggle(200);});function close_all(){if($('.piro_close').is(':visible')){$('.my_frame').remove();wrapper.add(div_reg).add(resize).stop();var ie_sucks=wrapper;if($.browser.msie){ie_sucks=div_reg.add(piro_bg);$('.div_reg img').remove();}else{ie_sucks=wrapper.add(piro_bg);}
+ie_sucks.piroFadeOut(200,function(){div_reg.html('');piro_loader.add(piro_capt).add(btn_info).hide();$('.nav_container').hide();piro_bg.add(wrapper).hide().css('visibility','visible');});}}
+piro_close.add(piro_loader).add(piro_bg).bind('click',function(y){y.preventDefault();close_all();});}})(jQuery);

vendor/assets/stylesheets/pirobox.css

@@ -0,0 +1,44 @@
+/*
+*{
+	margin:0;
+	padding:0;
+}*/
+.piro_html {position:absolute; top:0; left:0; padding:0; width:500px; height: 500px; margin:0; display:block; padding:0; z-index:150001; padding:0;  }
+.piro_html table,.piro_html tbody,.piro_html tr,.piro_html th,.piro_html td{margin:0;padding:0;border:none;}
+.piro_html img{ margin:0; padding:0; border:none;}
+
+.piro_html .h_t_l{ width:10px; height:10px; background: image-url('pirobox/new_skin.png') top left no-repeat;}
+.piro_html .h_t_r{ width:10px; height:10px; background: image-url('pirobox/new_skin.png') top right no-repeat;}
+.piro_html .h_t_c{ cursor:move; height:10px;background: image-url('pirobox/new_skin_top.png') top repeat-x;}
+
+.piro_html .h_c_l{width:10px; background: image-url('pirobox/new_skin_left.png') left repeat-y; }
+.piro_html .h_c_c{background: image-url('pirobox/caption.png');margin:0; padding:0;}
+.piro_html .h_c_c .div_reg{ background: image-url('pirobox/caption.png'); width:480px; overflow:hidden; height:480px; margin:0; padding:0; }
+.piro_html .h_c_c .div_reg img{ cursor:move;}
+.piro_html .h_c_r{width:10px; background: image-url('pirobox/new_skin_left.png') right repeat-y;}
+
+.piro_html .h_b_c{ cursor:move; height:10px;background: image-url('pirobox/new_skin_top.png') bottom repeat-x;}
+.piro_html .h_b_l{ width:10px; height:10px;background: image-url('pirobox/new_skin.png') bottom left no-repeat;}
+.piro_html .h_b_r{ width:10px; height:10px;background: image-url('pirobox/new_skin.png') bottom right no-repeat;}
+
+.piro_overlay{position:fixed; top:0; left:0; width:100%; height:100%;  z-index:150000;background:#fff;display:none; cursor:pointer;}
+.piro_loader{position:absolute;top:50%;left:50%;margin:-59px 0 0 -59px;width:118px;height:118px;display:block;z-index:150005;  cursor:pointer; }
+.piro_loader span{position:absolute;top:50%;left:50%;margin-top:-36px;margin-left:-36px;width:72px;height:72px;display:block;z-index:150009; background: image-url('pirobox/loadinfo.gif') center top no-repeat; }
+.piro_title{position:fixed; background: image-url('pirobox/bg_title.png') bottom repeat-x;top:0;left:0;width:100%; text-align:center;display:block; padding:6px 0 10px 0; color:white; z-index:150000; font-size:18px; display:none;}
+.btn_info{position:absolute;bottom:-7px;right:-7px;width:25px; height:25px;margin:0;display:block; padding:0px; color:black; cursor:pointer; background: image-url('pirobox/b_w/info.png') no-repeat; z-index:1500440}
+.caption{position:absolute;bottom:10px;left:10px;margin:0;display:block; padding:0px; color:black; cursor:text; background: image-url('pirobox/caption.png'); z-index:150018}
+.caption p{ display:block; margin:0;padding:7px 5px; text-align:center; font-weight:normal; font-size:14px; color:white; z-index:150019; color:white;}
+
+.nav_container{position:absolute; right:5px; bottom:-20px;  height:25px; width:60px; background:  image-url('pirobox/bottom_nav.png') bottom; z-index:1500190000000;}
+.piro_close{position:absolute;right:20px; top:0;height:20px;width:20px;background: transparent image-url('pirobox/close.png') no-repeat center center;cursor:pointer;margin:0 0 0 0;z-index:150022;display:none;}
+a.piro_next{position:absolute;width:20px; top:0; right:0px; height:20px;text-indent:-999em;outline:none; display:block; margin:0;background:image-url('pirobox/next.png') center right no-repeat; border:none; cursor:pointer;z-index:150023}
+a:hover.piro_next{background:image-url('pirobox/next.png') center right no-repeat;}
+.piro_next_fake{position:absolute;width:20px;  top:0;right:0px; height:20px;outline:none; text-indent:-999em; display:none; margin:0;background: image-url('pirobox/next.png') center right no-repeat; border:none; cursor:auto;z-index:150020}
+.piro_prev_fake{position:absolute;width:20px;  top:0;right:40px; height:20px;outline:none; text-indent:-999em; display:none; margin:0;background: image-url('pirobox/prev.png') center right no-repeat; border:none; cursor:auto;z-index:150020}
+
+a.piro_prev{position:absolute;width:20px; right:40px; top:0; height:20px; text-indent:-999em; outline:none;display:block;margin:0;background: image-url('pirobox/prev.png') center left no-repeat;border:none; cursor:pointer; z-index:150024}
+a:hover.piro_prev{background:image-url('pirobox/prev.png') center left no-repeat;}
+a.close_pirobox{color:#bb0f05;}
+
+
+