$(function(){

//var cont = $("#content");
//var offset = cont.offset();
//cont.html( "left: " + offset.left + ", top: " + offset.top );

			

			

			
			
			
			
			// make fixed height
			$('#footer').css('top',$('#oneCont').height());
			// top for footer
			$('#content').css('height',$('#oneCont').height() + $('#footer').height());

			

			

			

	

	

// ############################################## FIRST TAB	 CONTENT BLUE
	$('#one').click(function(){		

	

	

		$('#oneCont').fadeIn(400);
		$('#twoCont').fadeOut(400);
		$('#threeCont').fadeOut(400);
		$('#fourCont').fadeOut(400);

													

					

			// make an active color 	
			$('#one > .description').addClass('activeBlue');
			
						
						
			// main border manipulation
			$('#content').removeClass('mainBorder').removeClass('yellowBorder').removeClass('greenBorder').removeClass('orangeBorder').removeClass('grayBorder');
			
			$('#content').addClass('blueBorder');
			$('#oneCont').addClass('blueAdvArea');
											
						
				// remove all other active
				$('.description').removeClass('activeYellow').removeClass('activeGreen').removeClass('activeOrange');				
				$('.joinBlock').removeClass('activeGray');
						
						
						

					

		// fade Free Join box
		$('#orange').fadeOut(400);

		

	});	



// ############################################## SECOND TAB CONTENT YELLOW


	$('#two').click(function(){
		$('#twoCont').fadeIn(400);
		$('#oneCont').fadeOut(400);
		$('#threeCont').fadeOut(400);
		$('#fourCont').fadeOut(400);		

						// make an active color 		
						$('#two > .description').addClass('activeYellow');
						
						
						
						// main border manipulation
						$('#content').removeClass('mainBorder').removeClass('blueBorder').removeClass('greenBorder').removeClass('orangeBorder').removeClass('grayBorder');
						
						$('#content').addClass('yellowBorder');
						$('#twoCont').addClass('yellowAdvArea');
						
				// remove all other active
				$('.description').removeClass('activeBlue').removeClass('activeGreen').removeClass('activeOrange');				
				$('.joinBlock').removeClass('activeGray');



		// fade Free Join box
		$('#orange').fadeOut(400);				

	});


// ############################################## THIRD TAB CONTENT	GREEN

	$('#three').click(function(){	

		$('#threeCont').fadeIn(400);
		$('#oneCont').fadeOut(400);
		$('#fourCont').fadeOut(400);		

								
						// make an active color 	
						$('#three > .description').addClass('activeGreen');
						
						
						
						// main border manipulation
						$('#content').removeClass('mainBorder').removeClass('yellowBorder').removeClass('blueBorder').removeClass('orangeBorder').removeClass('grayBorder');
						
						$('#content').addClass('greenBorder');
						$('#threeCont').addClass('greenAdvArea');
						
				// remove all other active
				$('.description').removeClass('activeYellow').removeClass('activeBlue').removeClass('activeOrange');				
				$('.joinBlock').removeClass('activeGray');

				

		// fade Free Join box
		$('#orange').fadeOut(400);

	});

	
// ##############################################	FORTH TAB CONTENT ORANGE
	

	$('#four').click(function(){
		$('#oneCont').fadeOut(400);
        $('#fourCont').fadeIn(400);

				

						// make an active color 	
						$('#four > .description').addClass('activeOrange');
						

						// main border manipulation
						$('#content').removeClass('mainBorder').removeClass('yellowBorder').removeClass('greenBorder').removeClass('blueBorder').removeClass('grayBorder');
						
						$('#content').addClass('orangeBorder');
						$('#fourCont').addClass('orangeAdvArea');
						
				// remove all other active
				$('.description').removeClass('activeYellow').removeClass('activeBlue').removeClass('activeBlue');				
				$('.joinBlock').removeClass('activeGray');

						

		// fade Free Join box

		$('#orange').fadeOut(400);

	});

	
// ##############################################	JOIN FREE TAB CONTENT		

	$('.joinBlock, .theFirst').click(function(){	

		$('#orange').fadeIn(400);
		$('#oneCont').fadeOut(400);
		$('#twoCont').fadeOut(400);
		$('#threeCont').fadeOut(400);
		$('#fourCont').fadeOut(400);

						// make an active color #ccc		
						$('.joinBlock, .theFirst').addClass('activeGray');
						$('#orange').addClass('grayAdvArea');
						
			// main border manipulation
			$('#content').removeClass('mainBorder').removeClass('yellowBorder').removeClass('greenBorder').removeClass('blueBorder').removeClass('orangeBorder');
			$('#content').addClass('grayBorder');

					// remove all other active
				$('.description').removeClass('activeYellow').removeClass('activeBlue').removeClass('activeBlue').removeClass('activeOrange');				
				

	});






/*	
################################################################################
#------------------------------------------------------------------------------#
#  SCROLL PAGE UP
#------------------------------------------------------------------------------#
################################################################################
*/

$('#scrollUp').click(function(){
													

		if( $.browser.opera ){
		$('html').animate({scrollTop: 0},600);
		}else {

			$('html,body').animate({scrollTop: 0},600); 

		}		

});	



/*	
################################################################################
#------------------------------------------------------------------------------#
#  MENU TABS UP and DOWN
#------------------------------------------------------------------------------#
################################################################################
*/

            $('#menu > li').hover(

                function () {

                    var $this = $(this);

                    $('a',$this).stop(true,true).animate({

                            'bottom':'-15px'

                        }, 300);

				  $('i',$this).stop(true,true).animate({

						'top':'-10px'

					}, 400);

				

						// remove active color #ccc		

						// $('a',$this).removeClass('active');

				

                },

                function () {

                    var $this = $(this);

                    $('a',$this).stop(true,true).animate({

                            'bottom':'-77px'

                        }, 300);

                    $('i',$this).stop(true,true).animate({

                            'top':'50px'

                        }, 400);				

                }

            );

			

			// fade  title wile browsing menu
			// fade  title wile browsing menu
			// fade  title wile browsing menu

			$('#menu').hover(

                function () {			

				$('#title').stop(true,true).animate({
							'opacity': '0.1'
					}, 400);

				
				},

				function(){
				$('#title').stop(true,true).animate({
							'opacity': '1'
					}, 400);
					
				
				
				}

			);

			

			
			
			// activate parallax
			/*
			jQuery('#parallax').jparallax({});
			$('#menu').hover(

                function () {			
				
				$('#parallax').stop(true,true).animate({
							'opacity': '1'
					}, 400);
				$('#parallax').css('visibility','visible');
			  

				},

				function(){
				$('#parallax').stop(true,true).animate({
							'opacity': '0'
					}, 400);				
				//$('#parallax').css('visibility','hidden');
				
				}

			);
			*/
			
			

		// do ghost type for element
		
		$("#joinFirst").ghostType();
		
		

        });

		

		

/*	

################################################################################
#------------------------------------------------------------------------------#
#  PLUGINS
#------------------------------------------------------------------------------#
################################################################################

*/	

		/*

    ghostType v1.1 [March 13, 2011]

    http://ghosttype.com

    by William Moynihan



    ghostType jQuery Plugin

    -----------------------

    Use: Add text within an object of your document and call the ghostType function.



    Ex: $("#mydiv").ghostType();



    (It is recommended that you add the "display: none" CSS property to the object.)



    ghostType reserves the "^" character to create a delay between portions of your text.

    You can use this to simulate a more natural typing effect, such as delays between

    displaying sentences.



    Ex: <div id="mydiv">Welcome to my website.^^^^^^^^^^ I've been expecting you!</div>



    With a default delay setting of 100ms the above example will add a 1 second delay

    before displaying the second sentence. "^" characters will be removed.

*/



(function( $ ){

    $.fn.ghostType = function() {



        return this.each(function() {



            var $this = $(this);

            var str = $this.html();

            $this.empty().show();

            str = str.split("");

            str.push("_");



            // increase the delay to ghostType slower

            var delay = 30;



            $.each(str, function (i, val) {

                if (val == "^") {

                    // Do nothing. This will add to the delay.

                }

                else {

                    $this.append('<span>' + val + '</span>');

                    $this.children("span").hide().fadeIn(100).delay(delay * i);



                }

            });

            $this.children("span:last").css("textDecoration", "blink");



        });



    };

})( jQuery );



/* ##################################### */

/* ##################################### */

/* ##################################### */