$(document).ready(function(){
    var loginform = false;
    $('#login a').click(function(){
        if (loginform != false) {
            loginform.remove();
            $(this).parent().toggleClass("active");
            loginform = false;
            return false;
        }
        
        loginform = $('<form name="login" id="frmlogin" action="/login/" method="post"></form>');
				loginform.append('<input type="hidden" name="f" value="' + location.pathname + '" />');
				loginform.append('<input type="hidden" name="login" value="true" />');        
				loginform.append('<p><input type="text" id="email" name="email" value="Email" class="text" /></p>');
        loginform.append('<p><input type="password" id="password" name="password" value="" class="text" /></p>');        
        loginform.append('<p><input type="image" id="login" name="login" src="/assets/pics/ui/btn_search_submit.png" value="log in" /></p>');
        $(this).before(loginform);
        $(this).parent().toggleClass("active");
        $("#frmlogin input#email").focus(function() {
        	$(this).clearFields();
        });
				return false;
				
    });
		
		
        var profile = false;
        $('#nav-profile a').click(function(){
            if (loginform != false) {
                loginform.remove();
                loginform = false;
                $('#login').toggleClass("active");
            }
            
            if (profile != false) {
                profile.remove();
                profile = false;
                return false;
            }
            
            profile = $('<div id="profile"></div>').insertAfter('#branding').addClass("active");


            profile.load("/profile #profile > *", null, function(){
                $('<a href="#" class="close">Close</a>').click(function(){
                    profile.remove();
                    profile = false;
                    return false;
                }).appendTo(profile);
            });
            
            return false;   
        });
        
        $("#what,#why,#how").hide();
        
        $("#how").after('<ul class="nav-info">' + 
        '<li id="nav-why"><a href="#">Why?</a></li>'+
				'<li id="nav-what"><a href="#">What?</a></li>'+
        '<li id="nav-how"><a href="#">How?</a></li></ul>');
        
                
        $(".nav-info a").click(function() {
                        
            if($(this).parent().attr("id") == "nav-what") {     
                $("#default,#why,#how").hide();
                $("#what").show().addClass("active");
                $("#why").removeClass("active");
								$("#how").removeClass("active");
								$(".nav-info #nav-what").addClass("active");
                $(".nav-info #nav-why").removeClass("active");
                $(".nav-info #nav-how").removeClass("active");
            }
            
            if($(this).parent().attr("id") == "nav-why") {
                $("#default,#what,#how").hide();
                $("#why").show().addClass("active");
                $("#what").removeClass("active");
								$("#how").removeClass("active");
                $(".nav-info #nav-why").addClass("active");
                $(".nav-info #nav-what").removeClass("active");     
                $(".nav-info #nav-how").removeClass("active");  
            }
            
            if($(this).parent().attr("id") == "nav-how") {
                $("#default,#why,#what").hide();
                $("#how").show().addClass("active");
                $("#why").removeClass("active");
								$("#what").removeClass("active");
                $(".nav-info #nav-how").addClass("active");
                $(".nav-info #nav-what").removeClass("active");
                $(".nav-info #nav-why").removeClass("active");
            }
            return false;
        });
        
        $(".people-program-places, .blogs-forums").each(function(index) {
            // current location
            var pane = $(this);
            // inserts ul to div
            var navilist = $('<ul class="nav-tab"></ul>').prependTo($(this));
            $(this).find('h3').each(function(){
                //hides h3 and parent container
                var item = $(this).hide().parent().hide();
                // create correct id's
                var navtabitem = "navtab-" + $(this).text().toLowerCase();
                //creates li element and inserts h3 text and li class. Binds click events for li elements
                $('<li></li>').attr('id', navtabitem).text($(this).text()).appendTo(navilist).bind('click', function(event) {
                    //removes active class from not clicked navi
                    navilist.children().removeClass('active');
                    //hides other not clicked divs
                    pane.children('div').hide();
                    // sets clicked li active
                    $(this).addClass('active');
                    // show clicked div
                    item.show();
                });
            });
            // sets first panes active
            navilist.children(':first-child').click();
        });
                
 	 
	$("#conference li h3").click(function() {
		$(this).parent().parent().find("li h3").removeClass("active");
		$(this).parent().parent().find("li p").addClass("hide");
		$(this).addClass("active").parent().find("p").removeClass("hide");	
	});

	$("#conference li#tab-customization h3").click();

	$("#labs li h3").click(function() {
		$(this).parent().parent().find("li h3").removeClass("active");
		$(this).parent().parent().find("li p, li img").addClass("hide");
		$(this).addClass("active").parent().find("p, img").removeClass("hide");
	});

	$("#labs li#lab-tab-fashion h3").click();
	
});