1 /** @fileoverview Widget convidativo ao projeto. Efetua transições exibindo informaçãoes de como interagir.
  2 
  3 	@version 1.0
  4 	@author Matheus Martins Teixeira <a href="mailto:mteixeira@grad.icmc.usp.br"><mteixeira@grad.icmc.usp.br></a>
  5  */
  6   /**
  7 	Objeto com as funções para o widget convidatido do projeto.
  8 	@class
  9 	@name joinUs
 10  */
 11  var joinUs = {
 12 	/** 
 13 	Div que irá armazenar o widget.	
 14 	@type DOM Object
 15 	*/
 16 	container : null,
 17 	/** 
 18 	Tempo em milisegundos para a transição entre os frames.
 19 	@default 8000
 20 	@type int
 21 	*/
 22 	swapTime: 8000,
 23 	/**
 24 	Contador de transições
 25 	@type {int^}
 26 	@private
 27 	*/
 28 	counter : 0,
 29 	/**
 30 		Inicia o widget
 31 		@public
 32 		@function
 33 	*/
 34 	start : function() {
 35 		joinUs.container = $('<div>').addClass('main').appendTo('#container');
 36 		var slide1 = joinUs.modelSlide();
 37 		slide1.css('background', 'rgb(107,128,155)').append('<h1>Quer interagir?</h1><div><img height=60 src="mobile.png"/><img style="height:28px;padding:16px;" src="plus.png"/><img height=60 src="qr.jpg"/><img style="height:28px;padding:16px;" src="arrow.png"/><img height=60 src="web.png"/></div><h2>Simples! Tire uma fotografia com seu <b>celular</b> do <b>QRCode</b> e vá direto ao <b>link</b>!</h2');
 38 		var slide2 = joinUs.modelSlide();
 39 		slide2.css('background', 'rgb(250,169,84)').append('<h1>Quer participar?</h1><h2>compartilhe suas experiências no <b>ICMC</b>!</h2><h2><b>Fotos</b>, <b>vídeos</b>, <b>notícias</b> e muito mais!</h2><img src="com.png" width=60/><img style="height:28px;padding:16px;" src="plus.png"/><img width=60 src="f_logo.png"/><h2>Procure o grupo <b>ICMC Social</b> no <b>Facebook</b> e participe!</h2>');
 40 		var slide3 = joinUs.modelSlide();
 41 		slide3.css('background', 'rgb(204,202,217)').css('color', 'rgb(107,128,155)').append($('<iframe>').addClass('bandejao').attr('src','../bandejao/index.html')).append($('<iframe>').addClass('tempo').attr('src','http://www.cptec.inpe.br/widget/widget.php?p=4774&w=h&c=748ccc&f=ffffff'));
 42 		joinUs.container.append($('<div>').addClass('wrapper').append(slide1)).append($('<div>').addClass('wrapper').append(slide2)).append($('<div>').addClass('wrapper').append(slide3));
 43 		setTimeout(function() {
 44 			joinUs.next();
 45 		}, joinUs.swapTime);
 46 	},
 47 	/**
 48 		Contrutor para um modelo de frame
 49 		@private
 50 		@returns {DOM Object} Retorna o objeto do modelo.
 51 		@function
 52 	*/
 53 	modelSlide : function() {
 54 		return $('<div>').addClass('page');
 55 	},
 56 	/**
 57 		Efetua a transição suave entre frames.
 58 		@private
 59 		@function
 60 	*/
 61 	next : function() {
 62 		var first = $(joinUs.container.children()[0]);
 63 		if(joinUs.counter < 2) {
 64 			first.animate({
 65 				"margin-top" : (parseInt(first.css('margin-top'), 10) - 300) + 'px'
 66 			}, joinUs.swapTime/8, function() {
 67 				joinUs.counter++;
 68 				setTimeout(function() {
 69 					joinUs.next();
 70 				}, joinUs.swapTime);
 71 			});
 72 		} else {
 73 			first.animate({
 74 				"margin-top" : '0px'
 75 			}, joinUs.swapTime/8, function() {
 76 				joinUs.counter = 0;
 77 				setTimeout(function() {
 78 					joinUs.next();
 79 				}, joinUs.swapTime);
 80 			});
 81 		}
 82 	}
 83 };
 84 
 85 $(document).ready(function() {
 86 	joinUs.start();
 87 });
 88