/* The dims of the short tags */
	var short_w = 210;
	var short_h = 310;
	var short_t = 0;
	var short_l = 0;
	var short_off = 240;

	
	/* The dims of the Full or large tag */
	var full_w = 694;
	var full_h = 942;
	var full_l = 0;
	var full_t = 0;
	
	/* The settings for the dock */
	var side_off = 735; /*The offset from the left */
	var side_start = 0;
	var side_sep = 322;
	
	/* The transition speed */
	var t_speed =1000;
	var qt_speed =200;
	var st_speed =800;
	
	
	/* nevermind */
	
	$(document).ready(function() {
		clear_themtags();
		clear_themtags_smalltext();
		
	var $current_tag = 0;	
	
	function clear_themtags(){
	    	$("#design").animate({height: short_h, width: short_w, left: short_l+(short_off*0), top: short_t}, t_speed);
			$("#workflow").animate({height: short_h, width: short_w, left: short_l+(short_off*1), top: short_t}, t_speed);
			$("#financial").animate({height: short_h, width: short_w, left: short_l+(short_off*2), top: short_t}, t_speed);
			$("#communication").animate({height: short_h, width: short_w, left: short_l+(short_off*3), top: short_t}, t_speed);		
			$(".themtags").animate({height: short_h+54}, t_speed);
			
			$('html, body').animate({scrollTop:0}, 'slow');
			$current_tag = 0;
		}
	function clear_themtags_smalltext(){	
			/* Activate/Reset all the small text areas */
			$(".themtags .small").animate({height:"100%"}, qt_speed);
			
			/* Hide all the large text areas */
			$(".themtags .large").animate({height:"0px"}, qt_speed);
			$("a.four-tags").fadeOut(100);
			

		}
	

	
		$("#design .plus-button").click(function(){
			
			if ($current_tag != 1) {
				$("#design").animate({height: full_h, width: full_w, left: full_l, top:full_t}, t_speed);
				$("#workflow").animate({height: short_h, width: short_w, left: side_off, top:side_start}, t_speed);
				$("#financial").animate({height: short_h, width: short_w, left: side_off, top:side_start+side_sep}, t_speed);
				$("#communication").animate({height: short_h, width: short_w, left: side_off, top:side_start+(side_sep*2)}, t_speed);
				clear_themtags_smalltext();
				
				$("#design .small").animate({height:"0px"}, qt_speed);
				$("#design .large").animate({height:"100%"}, st_speed);
				$(".themtags").animate({height: full_h+58 }, t_speed);
				$("#design a.four-tags").fadeTo(1000, .4 );	
				$current_tag = 1;
				
			}else{
				
				clear_themtags();	
				clear_themtags_smalltext();
			}		
						
			});		
		
		$("#workflow .plus-button").click(function() {
		
			if ($current_tag != 2) {
				$("#design").animate({height: short_h, width: short_w, left: side_off, top:side_start}, t_speed);
				$("#workflow").animate({height: full_h, width: full_w, left: full_l, top:full_t}, t_speed);
				$("#financial").animate({height: short_h, width: short_w, left: side_off, top:side_start+side_sep}, t_speed);
				$("#communication").animate({height: short_h, width: short_w, left: side_off, top:side_start+(side_sep*2)}, t_speed);
				clear_themtags_smalltext();
				$("#workflow .small").animate({height:0}, qt_speed);
				$("#workflow .large").animate({height:"100%"}, st_speed);
				$("#workflow a.four-tags").fadeTo(1000, .4 );	
				$(".themtags").animate({height: full_h+58 }, t_speed);
				$current_tag = 2;
				
			}else{
			clear_themtags();	
			clear_themtags_smalltext();		
			}
			
			});

		$("#financial .plus-button").click(function() {
		
			if ($current_tag != 3) {
				$("#design").animate({height: short_h, width: short_w, left: side_off, top:side_start}, t_speed);
				$("#workflow").animate({height: short_h, width: short_w, left: side_off, top:side_start+side_sep}, t_speed);
				$("#financial").animate({height: full_h, width: full_w, left: full_l, top:full_t}, t_speed);
				$("#communication").animate({height: short_h, width: short_w, left: side_off, top:side_start+(side_sep*2)}, t_speed);
				clear_themtags_smalltext();
				$("#financial .small").animate({height:0}, qt_speed);
				$("#financial .large").animate({height:"100%"}, st_speed);
				$("#financial a.four-tags").fadeTo(1000, .4 );	
				$(".themtags").animate({height: full_h+58 }, t_speed);
				$current_tag = 3;
				
			}else{
			clear_themtags();
			clear_themtags_smalltext();		
			}
			
			});

		$("#communication .plus-button").click(function() {
		
			if ($current_tag != 4) {
				$("#design").animate({height: short_h, width: short_w, left: side_off, top:side_start}, t_speed);
				$("#workflow").animate({height: short_h, width: short_w, left: side_off, top:side_start+side_sep}, t_speed);
				$("#financial").animate({height: short_h, width: short_w, left: side_off, top:side_start+(side_sep*2)}, t_speed);
				$("#communication").animate({height: full_h, width: full_w, left: full_l, top:full_t}, t_speed);
				clear_themtags_smalltext();
				$("#communication .small").animate({height:0}, qt_speed);
				$("#communication .large").animate({height:"100%"}, st_speed);
				$("#communication a.four-tags").fadeTo(1000, .4 );				
				$(".themtags").animate({height: full_h+58 }, t_speed);
				$current_tag = 4;
				
			}else{
			clear_themtags();	
			clear_themtags_smalltext();
			}
			
			});
			
		$("a.four-tags").click(function() {		
			clear_themtags();	
			clear_themtags_smalltext();
					
			});
			
			
		  //calling the first dream
          //dream();	

});

function dream(){
    //calculating random color of dream
    var level = Math.floor(Math.random()*255);
    var color = 'rgb('+level+','+level+','+level+')';

    //calculating random X position
    var x = Math.floor(Math.random()*$('.header').width());

    //calculating random Y position
    var y = 0;
	
	
    //creating the dream and hide
    drawingpix = $('<span>').attr('.drawingpix').hide();

                            //appending it to body
                             $('.header').append(drawingpix);

                             //styling dream.. filling colors.. positioning.. showing.. growing..fading
                             drawingpix.css({
                                            'background-color':color,
                                            height:'217px',
                                            width: x,
                                            opacity: 0.0,
                                            top: y-14,    //offsets
                                            left: x-14 //offsets
                                            }).show().animate({
                                                                height:'217px',
                                                                width: x*2,
                                                                opacity: 0.1,
                                                                top: y-14,    //offsets
                                                                left: x-(x/2)
                             }, 3000).fadeOut(2000);
                            
                           //Every dream's end starts a new dream
                             window.setTimeout('dream()',400);
 }