$(document).ready(function() {
    
    $(".projectPlannerLink")
        .mouseover(function() { 
            $(".canvasHolder").addClass("hoverCanvasHolder");
        })
        .mouseout(function() {
            $(".canvasHolder").removeClass("hoverCanvasHolder");
        });
           
    
    $(".krn-logo")
        .mouseover(function() { 
            var src = $(this).attr("src");
            var image = src.split("/");
            image = image[image.length-1].split(".");
            image = image[image.length-2];
            src = src.replace(image, image+'-blue');
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-blue", "");
            $(this).attr("src", src);
        });
        
    // Underline anchor involted
    $(".involvedToItemPhotoAnchor")
        .mouseover(function() { 
            $parentNode = $(this).closest("div").next();
            $parentNode.find(".involvedToItemTextAnchor").addClass('hover');
        })
        .mouseout(function() {
            $parentNode = $(this).closest("div").next();
            $parentNode.find(".involvedToItemTextAnchor").removeClass('hover');
        });
     $(".involvedToItemTextAnchor")
        .mouseover(function() { 
            $parentNode = $(this).closest("div").prev();
            $parentNode.find(".involvedToItemPhotoAnchor .rounded").addClass('hover');
        })
        .mouseout(function() {
            $parentNode = $(this).closest("div").prev();
            $parentNode.find(".involvedToItemPhotoAnchor .rounded").removeClass('hover');
        });
    
     $(".involvedToItemTextAnchor")
        .mouseover(function() {
            $(this).addClass('hover');
        })
        .mouseout(function() {
            $(this).removeClass('hover');
        });       
        
    // Underline anchor involted
    $(".contactMePhotoAnchor")
        .mouseover(function() { 
            $parentNode = $(this).closest("div").next();
            $parentNode.find(".contactMeTextAnchor").css({'text-decoration' : 'underline'});   
        })
        .mouseout(function() {
            $parentNode = $(this).closest("div").next();
            $parentNode.find(".contactMeTextAnchor").css({'text-decoration' : 'none'});
        });
     $(".contactMeTextAnchor")
        .mouseover(function() {
            $(this).css({'text-decoration' : 'underline'});
            $(this).closest('div').prev().find('a > span').addClass('hover');
        })
        .mouseout(function() {
            $(this).css({'text-decoration' : 'none'});
            $(this).closest('div').prev().find('a > span').removeClass('hover');
        });


});

function promoSlider(showTrigger){
    //Show the paging and activate its first link
    if ( showTrigger == 'hide') {
        $(".paging").hide();
    } else {
        $(".paging").show();
    }
    $(".paging a:first").addClass("active");
    $(".works-in-main-slider").hide();
    $(".works-in-main-slider:first").addClass("actual");
    $(".works-in-main-slider:first").show();
    
    //Paging  and Slider Function
    rotate = function(){
        if ( $activeMarker.attr("rel") != null) {
            
            $('.works-in-main-slider.actual').fadeOut("slow");
                $(".paging a").removeClass('active'); //Remove all active class
                $(".works-in-main-slider").removeClass('actual'); //Remove all active class

                $activeMarker.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
                $actualContainer.addClass('actual'); //Add active class (the $active is declared in the rotateSwitch function)
                $('.works-in-main-slider.actual').fadeIn("slow");
  
            
            //Slider Animation
        }
    };

    //Rotation  and Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer - this will repeat itself every 9 seconds
            $activeMarker = $('.paging a.active').next(); //Move to the next paging
            $actualContainer = $('#promoSlider div.actual').next(); //Move to the next paging
            if ( $activeMarker.length === 0 ) { //If paging reaches the end...
                $activeMarker = $('.paging a:first'); //go back to first
                $actualContainer = $(".works-in-main-slider:first");
            }
            rotate(); //Trigger the paging and slider function
        }, 5000); //Timer speed in milliseconds (7 seconds)
    };

    rotateSwitch(); //Run function on launch

    //On Hover
    $("#promoSlider").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation timer
    });

    //On Click
    $(".paging a").click(function() {
        $activeMarker = $(this); //Activate the clicked paging
        var triggerID = $activeMarker.attr("rel") - 1;
        $actualContainer = $('.works-in-main-slider:eq('+triggerID+')');
      //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    });

};

function slider(){
//Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");
        
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = document.getElementById("sliderWindow").clientWidth;
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});
    
    //Paging + Slider Function
    rotate = function(){    
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
        
        //Slider Animation
        $(".image_reel").animate({ 
            left: -image_reelPosition
        }, 500 );
        
    }; 
    
    //Rotation + Timing Event
    rotateSwitch = function(){      
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 3000); //Timer speed in milliseconds (3 seconds)
    };
    
    rotateSwitch(); //Run function on launch
    
    //On Hover
    $("#slider").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation
    }); 
    
    //On Click
    $(".paging a").click(function() {   
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    });

    //On Click
    $("a.prev").click(function() {
        $active = $('.paging a.active').prev(); //Activate the clicked paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:last'); //go back to first
        }
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    });
    
    //On Click
    $("a.next").click(function() {   
        $active = $('.paging a.active').next(); //Activate the clicked paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    });

};

 function sendMsg () {
    $('form.wpcf7-form').submit();
}