$(document).ready(function() {

   var templates = {
      loading_tpl: 
         '<div id="loading"><img src="/img/loading.gif"/><p>Carregando...</p></div>',
         
      tool_tpl:
   	   '<form id="$tool-form" name="$tool-form" method="post" action="/tools/$tool.json"> \
   	      <label for="url">Digite o endere&ccedil;o do seu site abaixo</label> \
   	      <input type="text" name="website-url" accesskey="u" class="website-url required" id="url" /><input type="image" name="tools-button" id="tools-button" src="img/icons/ok.gif" accesskey="t" /> \
  	      </form>',
      
      pagerank_response_tpl:
			'<div class="pagerank"> \
	         <img src="/img/google/pagerank/$pagerank.gif" alt="PageRank $pagerank" width="293" height="19" /> \
   	      <p>O PageRank do site &eacute; <strong>$pagerank</strong></p> \
			</div> \
			<div class="bottom"><a href="#" name="pagerank" class="back">&laquo; Nova consulta</a></div>',					

		alexa_response_tpl:
			'<div class="alexa border"> \
	       	<img src="/img/icons/arrow-up.gif" width="18" height="21" alt="V&aacute;lido" /> \
				<p>Rank do site na internet: <strong>$traffic_rank</strong></p> \
			</div> \
         <div class="bottom"><a href="#" name="alexa" class="back">&laquo; Nova consulta</a></div>',
      
      w3c_response_tpl:  
			'<div class="w3c border"> \
          	<div class="col"><img src="/img/icons/$status_icon.gif" width="26" height="27" alt="Site $status_message" /> <p>Site $status_message</p></div> \
            <div class="col"><img src="/img/icons/errors.gif" width="19" height="19" alt="Erros" /> <p>$errors Erros</p></div> \
            <div class="col"><img src="/img/icons/warning.gif" width="19" height="19" alt="Warning" /> <p>$warnings Avisos</p></div> \
         </div> \
			<div class="bottom"><a href="#" name="w3c" class="back">&laquo; Nova consulta</a></div>',
			
		viewport_response_tpl:
			'<div class="viewport border"> \
				<p>Clique em uma resolução para testar seu site:</p> \
				<ul> \
				   <li><a href="$url?iframe" class="res-iphone">iPhone</a></li> \
				   <li><a href="$url?iframe" class="res-800x600">800x600</a></li> \
				   <li><a href="$url?iframe" class="res-1024x768">1024x768</a></li> \
				   <li><a href="$url?iframe" class="res-1152x864">1152x864</a></li> \
				   <li><a href="$url?iframe" class="res-1280x800">1280x800</a></li> \
				   <li><a href="$url?iframe" class="res-1400x900">1400x900</a></li> \
				</ul> \
			</div> \
         <div class="bottom"><a href="#" name="viewport" class="back">&laquo; Nova consulta</a></div>'			
   };

   $.replace = function(template, params) {
     for (var name in params) {
        template = template.replace(new RegExp('\\$' + name, 'g'), params[name]);
     }
     return template;
   }
   
   $('#wwdwwd').pipe({
      id: 'EFZewnQk3hGkJXgqrbQIDg',
      template: '<a href="{media:content.url}" rel="modal"><img src="{media:thumbnail.url}" width="165" height="125" alt="Clique para ampliar" /></a>',
      //placeholder: '<a href="http://assets3.wherewedowhatwedo.com/spaces/0000/1961/1.jpg" rel="modal"><img src="http://assets3.wherewedowhatwedo.com/spaces/0000/1961/1.jpg" width="165" height="125" alt="Clique para ampliar" /></a>',
      placeholder: '<a href="/img/wwdwwd/default_workspace.jpg" rel="modal"><img src="/img/wwdwwd/default_workspace.jpg" width="165" height="125" alt="Clique para ampliar" /></a>',
      modal: true
   });      

   $('#tweet').tweet({
     username: 'wmonline',
     avatar_size: null,
     count: 1,
     loading_text: 'carregando tweets...'
   });  
      
   $('#tools').tabs();  
   
   var tool_setup = function (tool) {
      var $form = $('#' + tool + '-form');
      $form.livequery('submit', function() {
         if($('#' + tool + '-form').validate().form()) {
            $('#' + tool).html(templates.loading_tpl);
            var url = $('input.website-url', $(this)).val();
            switch (tool) {
               case 'cembr':    
                  window.open('http://www.100br.com/consultar.whois.php?URL=' + url);
                  $('#cembr').html($.replace(templates.tool_tpl, {tool: 'cembr'})); 
                  break;
               
               case 'viewport':
                  var pattern = new RegExp(/^(http):\/\//);
                  if (!pattern.test(url)) {
                     url = 'http://' + url;
                  }
                  $('#viewport').html($.replace(templates['viewport_response_tpl'], {url: url}));
                  $('a.res-iphone').fancybox({'frameWidth': 320, 'frameHeight': 396, 'padding': 0, 'centerOnScroll': false});
                  $('a.res-800x600').fancybox({'frameWidth': 800, 'frameHeight': 600, 'padding': 0, 'centerOnScroll': false});
                  $('a.res-1024x768').fancybox({'frameWidth': 1024, 'frameHeight': 768, 'padding': 0, 'centerOnScroll': false});
                  $('a.res-1152x864').fancybox({'frameWidth': 1152, 'frameHeight': 864, 'padding': 0, 'centerOnScroll': false});
                  $('a.res-1280x800').fancybox({'frameWidth': 1280, 'frameHeight': 800, 'padding': 0, 'centerOnScroll': false});
                  $('a.res-1400x900').fancybox({'frameWidth': 1400, 'frameHeight': 900, 'padding': 0, 'centerOnScroll': false});
                  $('a.res-1600x1200').fancybox({'frameWidth': 1600, 'frameHeight': 1200, 'padding': 0, 'centerOnScroll': false});
                  $('a.res-1920x1200').fancybox({'frameWidth': 1920, 'frameHeight': 1200, 'padding': 0, 'centerOnScroll': false});
                  break;
                  
               default:
                  $.post(this.action, {url: url}, function(response){
                     $('#' + tool).html($.replace(templates[tool + '_response_tpl'], response));
                  }, 'json');
            }      
         }
         return false;
      });
      $form.validate({errorPlacement: function(error, element) {}});
   };   

   $('#tools > ul > li > a').click(function() {  
      tool_setup(this.name);
      var $form = $('#' + this.name + '-form');
      $('#url', $form).focus();
   });    
   
   $('#pagerank').html($.replace(templates.tool_tpl, {tool: 'pagerank'}));
   $('#alexa').html($.replace(templates.tool_tpl, {tool: 'alexa'}));
   $('#w3c').html($.replace(templates.tool_tpl, {tool: 'w3c'})); 
   $('#viewport').html($.replace(templates.tool_tpl, {tool: 'viewport'})); 
   $('#cembr').html($.replace(templates.tool_tpl, {tool: 'cembr'})); 
      
   tool_setup('pagerank');   

   $('a.back').live('click', function() {   
      var tool = $(this).attr('name');
      $('#' + tool).html($.replace(templates.tool_tpl, {tool: tool})); 
      return false;
   });  

});