!!! 5
%html
	%head
		-unless @grito.nil?
			-if @grito.errors.empty?
				%title= "#{@grito.title} - ¡Grita!"
			-else
				%title ¡Grita!
		%link{:rel => 'stylesheet', :type => 'text/css', :href => '/style.css', :title => 'default'}		
		%link{:rel => "icon", :href => "/images/favicon.ico", :type => "image/x-icon"}
		%link{:rel => "icon", :href => "/images/favicon.png", :type => "image/png"}
		%script{:src => "http://www.google.com/jsapi", :type => "text/javascript" }
		%script{:type => "text/javascript" }
			:plain
				  google.load("jquery", "1.4.0");
		%script{:src => "/js/jquery.qtip-1.0.0-rc3.min.js", :type => "text/javascript" }
		%script{:type => "text/javascript" }
			:plain
				$(document).ready(function() 
				{
					$('#qrcode').qtip(
					   {
					      content: 'Imprime este código para que puedas compartirlo físicamente. (Solo necesitas un lector de códigos como kaywa o i-nigma en tu celular)',
						  show: 'mouseover',
						  hide: 'mouseout',
						  position: {
						      corner: {
						         target: 'bottomMiddle',
						         tooltip: 'topMiddle'
						      }
						  },
						  style: { 
						      width: 400,
						      padding: 5,
						      background: '#222',
						      color: '#fff',
						      textAlign: 'center',
						      border: {
						         width: 7,
						         radius: 5,
						         color: '#222'
						      },
						      tip: 'topMiddle',
						      name: 'dark' // Inherit the rest of the attributes from the preset dark style
						   }
					   });
					$('input.url').qtip(
					   {
					      content: 'Usa esta dirección para compartir el texto via web.',
						  show: 'mouseover',
						  hide: 'mouseout',
						  position: {
						      corner: {
						         target: 'topMiddle',
						         tooltip: 'bottomMiddle'
						      }
						  },
						  style: { 
						      width: 400,
						      padding: 5,
						      background: '#222',
						      color: '#fff',
						      textAlign: 'center',
						      border: {
						         width: 7,
						         radius: 5,
						         color: '#222'
						      },
						      tip: 'bottomMiddle',
						      name: 'dark' // Inherit the rest of the attributes from the preset dark style
						   }
					   });
				});
		%meta{'http-equiv' => 'Contet-Type', :content => 'text/html; charset=utf-8' }/
	%body
		#wrapper
			#header
				%a{:id => 'logomini', :href=> '/'}<
					%span Grita!
			%hr/
			#body 
				=yield
			#footer