//Button Functionality
$(document).ready(function (){
    //CSS and Hover effct (to be bound)
    var allButts = "#b1, #b2, #b3, #b4, #b5"
    var otherButts = "#bFace, #bCon, #bTwit"
    $(allButts + ", " + otherButts).css("opacity",".75");
    
    function buttHover0 () {
        $(this).animate({opacity:1},{queue:false, duration:500});
        return false;
    };
    function buttHover00 () {
        $(this).animate({opacity:.75},{queue:false, duration:500});
        return false;
    };
    
    //Hover Functions (to be bound) + Colours
    function buttHover1 () {
        var xTitle = $(this).attr("name");
        var xId = $(this).attr("id");
        $(".divTitle").text(xTitle).stop(true, true).fadeIn("slow");
        
        $(this).toggle(function(){
            $("iframe#frame").attr('src', 'pages/'+xTitle+'.html')
        },
            function() {
            
            }
        )
        if (xId == "b1") {
            $(".divTitle").css({"background-color":"#ed1c24", "margin-left":"17px"});
            $(".divInfo").css({"background-color":"#ed1c24"});
            $(".goBack p.pCA").css({"color":"#ed1c24"});
        }
        else if (xId == "b2") {
            $(".divTitle").css({"background-color":"#29abe2", "margin-left":"171px"});
            $(".divInfo").css({"background-color":"#29abe2"});
            $(".goBack p.pCA").css({"color":"#29abe2"});
        }
        else if (xId == "b3") {
            $(".divTitle").css({"background-color":"#662d91", "margin-left":"325px"});
            $(".divInfo").css({"background-color":"#662d91"});
            $(".goBack p.pCA").css({"color":"#662d91"});
        }
        else if (xId == "b4") {
            $(".divTitle").css({"background-color":"#006837", "margin-left":"479px"});
            $(".divInfo").css({"background-color":"#006837"});
            $(".goBack p.pCA").css({"color":"#006837"});
        }
        else if (xId == "b5") {
            $(".divTitle").css({"background-color":"#000", "margin-left":"633px"});
            $(".divInfo").css({"background-color":"#000"});
        }
    };
    function buttHover2 () {
        $(".divTitle").stop(true, true).fadeOut("slow");
    };
    
    
    //Specific Buttons
    $(allButts).bind('mouseenter', buttHover0).bind('mouseleave', buttHover00).bind('mouseenter', buttHover1).bind('mouseleave', buttHover2);
    $(otherButts).bind('mouseenter', buttHover0).bind('mouseleave', buttHover00);
    
    //B1 - Design
    function b1MDwn () {
        $(".txtHold").empty();
        $("#b5, #b2, #b3, #b4").fadeOut("fast");
        $(".wrapper-1").animate({
            marginTop: -420
        }, "slow");
        $(".txtHold").append("sign").css({"color":"#ed1c24"}).delay(500).fadeIn(500);
        $(allButts).unbind('mouseenter', buttHover1);
        $(".divTitle").stop(true, true).fadeOut("slow");
        $(".divInfo").delay(1000).fadeIn("slow");
        //.animate({opacity:1},{queue:false, duration:500});
        $(this).unbind('click', b1MDwn);
        $(this).bind('click', b1MUp);
    };
    function b1MUp () {
        $(".divInfo").fadeOut("slow");
        $(".txtHold").fadeOut(500);
        $(".wrapper-1").delay(1000).animate({
            marginTop: -90
        }, "slow");
        $("#b5, #b2, #b3, #b4").delay(1500).fadeIn(250);
        $(allButts).bind('mouseenter', buttHover1);
        $(this).unbind('click', b1MUp);
        $(this).bind('click', b1MDwn);
    };
    $("#b1").bind('click', b1MDwn);
    
    //B2 - Music
    function b2MDwn () {
        $(".txtHold").empty();
        $("#b5, #b1, #b3, #b4").fadeOut("fast");
        $(".wrapper-1").animate({
            marginTop: -420
        }, "slow");
        $(this).delay(500).animate({
            marginLeft: "-=154px"
        }, 500);
        $(".txtHold").append("sic").css({"color":"#29abe2"}).delay(500).fadeIn(500);
        $(allButts).unbind('mouseenter', buttHover1);
        $(".divTitle").stop(true, true).fadeOut("slow");
        $(".divInfo").delay(1000).fadeIn("slow");
        $(this).unbind('click', b2MDwn);
        $(this).bind('click', b2MUp);
    };
    function b2MUp () {
        $(".divInfo").fadeOut("slow");
        $(".txtHold").fadeOut(500);
        $(this).delay(500).animate({
            marginLeft: "+=154px"
        }, 500);
        $(".wrapper-1").delay(1000).animate({
            marginTop: -90
        }, "slow");
        $("#b5, #b1, #b3, #b4").delay(1500).fadeIn(250);
        $(allButts).bind('mouseenter', buttHover1);
        $(this).unbind('click', b2MUp);
        $(this).bind('click', b2MDwn);
    };
    $("#b2").bind('click', b2MDwn);
    
    //B3 - Digital
    function b3MDwn () {
        $(".txtHold").empty();
        $("#b5, #b1, #b2, #b4").fadeOut("fast");
        $(".wrapper-1").animate({
            marginTop: -420
        }, "slow");
        $(this).delay(500).animate({
            marginLeft: "-=308px"
        }, 500);
        $(".txtHold").append("gital").css({"color":"#662d91"}).delay(750).fadeIn(500);
        $(allButts).unbind('mouseenter', buttHover1);
        $(".divTitle").stop(true, true).fadeOut("slow");
        $(".divInfo").delay(1000).fadeIn("slow");
        $(this).unbind('click', b3MDwn);
        $(this).bind('click', b3MUp);
    };
    function b3MUp () {
        $(".divInfo").fadeOut("slow");
        $(".txtHold").fadeOut(500);
        $(this).delay(500).animate({
            marginLeft: "+=308px"
        }, 500);
        $(".wrapper-1").delay(1000).animate({
            marginTop: -90
        }, "slow");
        $("#b5, #b1, #b2, #b4").delay(1500).fadeIn(250);
        $(allButts).bind('mouseenter', buttHover1);
        $(this).unbind('click', b3MUp);
        $(this).bind('click', b3MDwn);
    };
    $("#b3").bind('click', b3MDwn);
    
    //B4 - Marketing
    function b4MDwn () {
        $(".txtHold").empty();
        $("#b5, #b1, #b2, #b3").fadeOut("fast");
        $(".wrapper-1").animate({
            marginTop: -420
        }, "slow");
        $(this).delay(500).animate({
            marginLeft: "-=462px"
        }, 500);
        $(".txtHold").append("rketing").css({"color":"#006837"}).delay(750).fadeIn(500);
        $(allButts).unbind('mouseenter', buttHover1);
        $(".divTitle").stop(true, true).fadeOut("slow");
        $(".divInfo").delay(1000).fadeIn("slow");
        $(this).unbind('click', b4MDwn);
        $(this).bind('click', b4MUp);
    };
    function b4MUp () {
        $(".divInfo").fadeOut("slow");
        $(".txtHold").fadeOut(500);
        $(this).delay(500).animate({
            marginLeft: "+=462px"
        }, 500);
        $(".wrapper-1").delay(1000).animate({
            marginTop: -90
        }, "slow");
        $("#b5, #b1, #b2, #b3").delay(1500).fadeIn(250);
        $(allButts).bind('mouseenter', buttHover1);
        $(this).unbind('click', b4MUp);
        $(this).bind('click', b4MDwn);
    };
    $("#b4").bind('click', b4MDwn);
    
    //B5 - More
    $("#b5").toggle(
        function () {
            $("div.bFace").delay(500).fadeIn(500);
            $("div.bCon").delay(750).fadeIn(500);
            $("div.bTwit").delay(1000).fadeIn(500);
            $("#b1, #b2, #b3, #b4").unbind().addClass("unBound").animate({opacity:.5}, "slow");
            $(this).unbind('mouseenter', buttHover1);
            $(".divTitle").stop(true, true).fadeOut("slow");
            $("a#b5 img").attr({src: "images/arrow_b.png"})
        },
        function () {
            $("div.bFace, div.bCon, div.bTwit").fadeOut(500);
            $("#b1, #b2, #b3, #b4").bind('mouseenter', buttHover0).bind('mouseleave', buttHover00).bind('mouseenter', buttHover1).bind('mouseleave', buttHover2).removeClass("unBound").animate({opacity:.75}, "slow");
            $("#b1").bind('click', b1MDwn);
            $("#b2").bind('click', b2MDwn);
            $("#b3").bind('click', b3MDwn);
            $("#b4").bind('click', b4MDwn);
            $("a#b5 img").attr({src: "images/arrow.png"})
            $(this).bind('mouseenter', buttHover1);
        }
    );
    
    //bCon - Contact
    $("#bCon").click(function() {
        $(".wrapper-2").fadeIn("slow");
    });
    
    //Close Button
    $(".closeButton").css("opacity",".75").hover(
        function() {
            $(this).stop(true, true).animate({opacity:1}, "nomral");
        },
        function() {
            $(this).stop(true, true).animate({opacity:.75}, "slow");
        })
    .click(function() {
        $(".wrapper-2").fadeOut("slow");
    });
});