$(document).ready( function(){
        
// Animation manipulation        
        
            // Set the timer for character position transition
            var swapDuration = 4500;
            var miniSwapDuration = 2500;
            
            // Animate the animation navigation buttons
            $(".animation-bubble")
                .hover( 
                    function(){
                        $("#arrow-to-2").css({'background-position':'bottom right'});
                        $("#arrow-to-3").css({'background-position':'bottom right'}); 
                        $("#arrow-back-to-1").css({'background-position':'bottom left'});
                        $("#arrow-back-to-2").css({'background-position':'bottom left'});                        
                    },   
                    function() {
                        $("#arrow-to-2").css({'background-position':'top right'});
                        $("#arrow-to-3").css({'background-position':'top right'}); 
                        $("#arrow-back-to-1").css({'background-position':'top left'});
                        $("#arrow-back-to-2").css({'background-position':'top left'});                        
                    }                    
                );
                    
            // Hide the cloud and the two latter characters                   
            $("#cloud, #char-2, #char-3, #step-2, #step-3, #bubble-2, #bubble-3").css({opacity: 0});
            
            function moveToSecond() {   
                $("#cloud").stop();
                $("#bubble-2").css({'display':'block'});
                $("#bubble-1, #bubble-3").css({'display':'none'});
                $("#char-1, #bubble-1").animate({opacity:0}, 100);
                $("#char-2, #step-2, #bubble-2").animate({opacity: 1}, 400);                                     
                $("#cloud").css({'left':'140px','bottom':'50px','opacity':1}).animate({opacity: 0, bottom: "+=21px"}, 2000);                       
            }
                        
            function moveBackToSecond() {   
                $("#cloud").stop();
                $("#bubble-2").css({'display':'block'});
                $("#char-3, #bubble-3, #step-3").animate({opacity:0}, 100, function(){ 
                    $("#bubble-3").css({'display':'none'}); 
                });
                $("#char-2, #step-2, #bubble-2").animate({opacity: 1}, 400);                                     
                $("#cloud").css({'left':'780px','bottom':'50px','opacity':1}).animate({opacity: 0, bottom: "+=21px"}, 2000);                       
            }
                        
            function moveToThird() {
                $("#cloud").stop();
                $("#bubble-3").css({'display':'block'});
                $("#char-2, #bubble-2").animate({opacity:0}, 100);
                $("#char-3, #step-3, #bubble-3").animate({opacity: 1}, 400, function(){
                    $("#bubble-2").css({'display':'none'});
                });                                     
                $("#cloud").css({'left':'440px','bottom':'50px','opacity':1}).animate({opacity: 0, bottom: "+=21px"}, 2000); 
            }
            
            function skipToThird() {                                
                $("#bubble-1").css({'z-index':'90'});
                $("#bubble-2").css({'z-index':'91'});
                $("#char-3, #step-2, #step-3, #bubble-2").animate({opacity: 1}, 400);                                     
                $("#cloud").css({'left':'140px','bottom':'50px','opacity':1}).animate({opacity: 0, bottom: "+=21px"}, 2000);                 
            }
            
            function moveBackToFirst() {
                $("#cloud").stop();
                $("#char-2, #bubble-2, #step-2").animate({opacity: 0}, 100);
                $("#bubble-1, #char-1").css({'display':'block'});
                $("#char-1, #bubble-1").animate({opacity: 1}, 400); 
                $("#cloud").css({'left':'440px','bottom':'50px','opacity':1}).animate({opacity: 0, bottom: "+=21px"}, 2000);                                                   
            }
            
            // Animation Navigation System
            $("#arrow-back-to-1").click( function(){
                moveBackToFirst();    
            });
            
            $("#arrow-to-2").click( function(){
                moveToSecond();
            });
            
            $("#arrow-back-to-2").click( function(){
                moveBackToSecond();
            });         
            
            $("#arrow-to-3").click( function(){
                moveToThird();
            });     
            
            // Some variables to define the animation state
            var animationInProgress = 1;     
            var animationFrame = 1;       
            
            // If clicked during the initial animation, cancel it
            $(".animation-arrow").css({'display':'block'}).click( function(){
                if (animationInProgress == 1) {
                    $("#char-"+animationFrame).stop();
                }   
                animationInProgress = 0;             
            });                       
            
            // Start the animation
            $("#char-1").animate({opacity:1}, swapDuration, function(){
                animationFrame = 2;
                $("#step-2, #char-2, #bubble-2").animate({opacity: 1}, 400);
                $("#char-1, #bubble-1").animate({opacity: 0}, 100); 
                $("#bubble-1, #bubble-3").css({'display':'none'});
                $("#cloud").css({'left':'140px','bottom':'50px','opacity':1}).animate({opacity: 0, bottom: "+=21px"}, 2000);
                $("#char-2").animate({opacity:1}, swapDuration, function(){
                    $("#step-3, #char-3, #bubble-3").animate({opacity: 1}, 400);
                    $("#bubble-2").css({'display':'none'});
                    $("#bubble-3").css({'display':'block'});
                    $("#char-2, #bubble-2").animate({opacity: 0}, 100); 
                    $("#cloud").css({'left':'440px','bottom':'50px','opacity':1}).animate({opacity: 0, bottom: "+=21px"}, 2000, function(){
                        animationInProgress = 0;
                    });                 
                });                                     
            });         
            
                      
        
            
            
            
            
// Menu manipulation

            $("a.level1-onpath, a.level0-onpath").append('<span id="menu-shadow"></span>');
            
            
            
            
            
            
// Content area height manipulation

            // Top row
            var leftHeight = $("#top-content .content-left").height();
            var rightHeight = $("#top-content .main-content-wrapper").height();
            // Check if the left content has more height than the main content; increase the main content's height if so
            if (leftHeight > rightHeight) {
                $("#top-content .main-content-wrapper").css({height:leftHeight+"px"});    
            }
            
            
            
            
            
            
// Search manipulation 

            var qs = "Ehdottava haku";
            $('input.q')
    			.attr('value', qs)
    			.focus(function() {
    				if ( $(this).attr('value') == qs ) {
    					$(this)
    						.attr('value', '')
    				}
    			})
    			.blur(function() {
    				if ( ! $(this).attr('value') ) {
    					$(this)
    						.attr('value', qs)
    				}
    			}).d4kwsuggest();
    			
    			
    			
    			
    			
    			
// Front page spacer & tab manipulation

    		var leftTitle = $("#middle-content .content-left h2:first").text();
    		$("#middle-content .content-left h2:first").remove();
            $("#top-spacer .content-left").append('<h2 class="app-title">'+leftTitle+'</h2>');
            
            // Count the titles
            var mainTitles = $("#zone-uutiset h2").length;
            
            // Hide the tokens
            $("#zone-uutiset .token:visible").toggle();
            
            // Create the tabs
            for (var x = 1; x <= mainTitles; x++) {
                // Get the current title
                var currTitle = $("#zone-uutiset .token:nth-child("+x+") h2").text();
                // Add the title to the tab bar
                $("#top-spacer .main-content-wrapper").prepend('<h2 id="tab-'+x+'" class="app-title"><span>'+currTitle+'</span></h2>');
                // Remove the old title
                $("#zone-uutiset .token:nth-child("+x+") h2").remove();
            }                 
                        
            // Add function to the tabs
            $("#top-spacer .main-content-wrapper .app-title").click( function(){
                // Hide the visible contents
                $("#zone-uutiset .token:visible").toggle();
                // Remove the tab-chosen class from all the tab elements
                $("#top-spacer .app-title").removeClass("tab-chosen");  
                // Add the chosen class to the clicked tab 
                $(this).addClass("tab-chosen");
                // Get the id
                var id = $(this).attr("id").split("-");
                id = id[1];
                // Show the corresponding content
                $("#zone-uutiset .token:nth-child("+id+")").toggle();
            });      	
            
            // Click the first link to show the first content
            $("#top-spacer .main-content-wrapper .app-title:first").click();
            
            
            
            
            
            
// News & events manipulating

            $("#zone-left .row p a").append('<br /><span class="read-more-link">Lue lisää &raquo;</span>');        
            // Create the "first news/event" areas
            $("#zone-uutiset .token-News, #zone-uutiset .token-Events").each( function(){
                $(this).find(".app-wrap").prepend('<div class="first-of-list"></div>');
                // Get the first news and events and pass them to the first-of-list container     
                var firstItem = $(this).find(".row:first").html();
                $(this).find(".first-of-list").prepend(firstItem);
                $(this).find(".row:first").remove();               
            });             
                        
            


// Infobox manipulation
            
            $("#info-wrapper .token:last").css({'background':'none'});            
            
     
     
// Vinkkinurkka manipulation
            // An if statement to check if the page is the correct test page    
            if ( $("body").hasClass("page-35097") ) {
                var hasContent  = $("#zone-infobox .token:first").length;
                var content     = $("#zone-infobox .token:first").html();
                var height      = $("#zone-infobox .token:first").height();
                var offset      = (height + 18);            
                if (hasContent) {
                    $("#zone-infobox")
                        .css({     
                            marginTop: '-'+offset+'px'
                        })
                        .hover( 
                            function(){                        
                                $("#zone-infobox:not(:animated)").animate({
                                    marginTop: 0 
                                }, 300);
                            },
                            function(){
                                $("#zone-infobox").animate({
                                    marginTop: '-'+offset+'px'
                                }, 300);
                            });
                }             
            }
            
            
// Bottom content manipulation  

            // Define the map locations
            var mapHeight = 237;
            var mapWidth = 181;
            
            var map = new Array();
            
            map["akaa"] = "0,0";
            map["hameenkyro"] = "0,1";
            map["ikaalinen"] = "0,2";
            map["juupajoki"] = "0,3";
            map["kangasala"] = "0,4";
            map["kihnio"] = "1,0";
            map["lempaala"] = "1,1";
            map["mantta-vilppula"] = "1,2";
            map["nokia"] = "1,3";
            map["orivesi"] = "1,4";
            map["parkano"] = "2,0";
            map["pirkkala"] = "2,1";
            map["punkalaidun"] = "2,2";
            map["palkane"] = "2,3";
            map["ruovesi"] = "2,4";
            map["sastamala"] = "2,5";
            map["tampere"] = "3,0";
            map["urjala"] = "3,1";
            map["valkeakoski"] = "3,2";
            map["vesilahti"] = "3,3";
            map["virrat"] = "3,4";
            map["ylojarvi"] = "3,5";
            
            $("#town-wrapper .app").each( function(){
                var townName = $(this).find("h2").text();
                townName = townName.replace(/ä/g, "a");
                townName = townName.replace(/ö/g, "o");
                townName = townName.toLowerCase();
                $(this).prepend('<div class="hidden-name" style="display: none;">'+townName+'</div>');                
            });
            
            $("#town-wrapper .app").hover( function(){
                $(this).addClass("hovering");
                
                var townName = $(this).find(".hidden-name").text(); 
                
                var currentMap = map[townName];
                currentMap = currentMap.split(",");
                var x = currentMap[0];
                var y = currentMap[1];
                x = x * mapWidth;
                y = y * mapHeight;
                $("#town-map").css({'background-position': '-'+x+'px -'+y+'px'});                            
            },
            function(){
                $(this).removeClass("hovering");
                $("#town-map").css({'background-position': 'left bottom'});
            });
            
        });