jQuery(document).ready(function() {

    jQuery("#vertBar1").click(function() {

        if (document.getElementById("panel1").style.width == 0 + "px") {

            if (checkOthers("vertBar1")) {

                hideOther("vertBar1");
                jQuery("#lizard").fadeIn(500);
                setTimeout("jQuery('#tongue').animate({ left: '50px' }, 200)", 500);
                setTimeout("jQuery('#tongue').animate({ left: '710px' }, 1000)", 800);
                setTimeout("jQuery('#panel1').animate({ width: '666px' }, 1000)", 800);
                setTimeout("jQuery('#tongue').animate({ left: '940px' }, 300)", 1800);
                removeActives("vertBar1");
                jQuery("#vertBar1").addClass('active');
                setTimeout("jQuery('#lizard').fadeOut(500)", 1800);
            }

        }

    });

    jQuery("#vertBar2").click(function() {

        if (document.getElementById("panel2").style.width == 0 + "px") {

            if (checkOthers("vertBar2")) {
                hideOther("vertBar2");
                jQuery("#lizard").fadeIn(500);
                setTimeout("jQuery('#tongue').animate({ left: '90px' }, 200)", 500);
                setTimeout("jQuery('#tongue').animate({ left: '755px' }, 1000)", 800);
                setTimeout("jQuery('#panel2').animate({ width: '666px' }, 1000)", 800);
                setTimeout("jQuery('#tongue').animate({ left: '940px' }, 300)", 1800);
                removeActives("vertBar2");
                jQuery("#vertBar2").addClass('active');
                setTimeout("jQuery('#lizard').fadeOut(500)", 1800);
            }

        }

    });

    jQuery("#vertBar3").click(function() {

        if (document.getElementById("panel3").style.width == 0 + "px") {

            if (checkOthers("vertBar3")) {
                hideOther("vertBar3");
                jQuery("#lizard").fadeIn(500);
                setTimeout("jQuery('#tongue').animate({ left: '135px' }, 200)", 500);
                setTimeout("jQuery('#tongue').animate({ left: '800px' }, 1000)", 800);
                setTimeout("jQuery('#panel3').animate({ width: '666px' }, 1000)", 800);
                setTimeout("jQuery('#tongue').animate({ left: '940px' }, 300)", 1800);
                removeActives("vertBar3");
                jQuery("#vertBar3").addClass('active');
                setTimeout("jQuery('#lizard').fadeOut(500)", 1800);
            }

        }

    });

    jQuery("#vertBar4").click(function() {

        if (document.getElementById("panel4").style.width == 0 + "px") {

            if (checkOthers("vertBar4")) {
                hideOther("vertBar4");
                jQuery("#lizard").fadeIn(500);
                setTimeout("jQuery('#tongue').animate({ left: '180px' }, 200)", 500);
                setTimeout("jQuery('#tongue').animate({ left: '845px' }, 1000)", 800);
                setTimeout("jQuery('#panel4').animate({ width: '666px' }, 1000)", 800);
                setTimeout("jQuery('#tongue').animate({ left: '940px' }, 300)", 1800);
                removeActives("vertBar4");
                jQuery("#vertBar4").addClass('active');
                setTimeout("jQuery('#lizard').fadeOut(500)", 1800);
            }

        }

    });

    jQuery("#vertBar5").click(function() {

        if (document.getElementById("panel5").style.width == 0 + "px") {

            if (checkOthers("vertBar5")) {
                hideOther("vertBar5");
                jQuery("#lizard").fadeIn(500);
                setTimeout("jQuery('#tongue').animate({ left: '225px' }, 200)", 500);
                setTimeout("jQuery('#tongue').animate({ left: '890px' }, 1000)", 800);
                setTimeout("jQuery('#panel5').animate({ width: '666px' }, 1000)", 800);
                setTimeout("jQuery('#tongue').animate({ left: '940px' }, 300)", 1800);
                removeActives("vertBar5");
                jQuery("#vertBar5").addClass('active');
                setTimeout("jQuery('#lizard').fadeOut(500)", 1800);
            }

        }

    });

    jQuery("#vertBar6").click(function() {

        if (document.getElementById("panel6").style.width == 0 + "px") {

            if (checkOthers("vertBar6")) {
                hideOther("vertBar6");
                jQuery("#lizard").fadeIn(500);
                setTimeout("jQuery('#tongue').animate({ left: '270px' }, 200)", 500);
                setTimeout("jQuery('#tongue').animate({ left: '935px' }, 1000)", 800);
                setTimeout("jQuery('#panel6').animate({ width: '666px' }, 1000)", 800);
                setTimeout("jQuery('#tongue').animate({ left: '940px' }, 300)", 1800);
                removeActives("vertBar6");
                jQuery("#vertBar6").addClass('active');
                setTimeout("jQuery('#lizard').fadeOut(500)", 1800);
            }

        }

    });

    function hideOther(clickedID) {

        for (i = 1; i <= 6; i++) {

            if (document.getElementById("panel" + i).style.width > 1 + "px") {
                if (("panel" + i) != clickedID) {
                    jQuery("#panel" + i).animate({ width: "0px" }, 500);
                }
            }

        }

    }

    function checkOthers(clickedID) {

        for (i = 1; i <= 6; i++) {

            if (document.getElementById("panel" + i).style.width > 1 + "px" && document.getElementById("panel" + i).style.width < 666 + "px") {
                return false;
            }

        }

        if (document.getElementById("tongue").style.left < 940 + "px") {
            return false;
        }

        return true;
    }

    function removeActives(clickedID) {

        for (i = 1; i <= 6; i++) {
            jQuery("#vertBar" + i).removeClass('active');
        }

    }

    jQuery("#lizardCamo").mouseenter(function() {

        if (document.getElementById('lizard').style.display == 'none') {
            jQuery("#lizard").fadeIn(500);
        }

    });

    jQuery("#lizardCamo").mouseleave(function() {

        if (document.getElementById('lizard').style.display == 'block' || document.getElementById('lizard').style.display == 'inline' || document.getElementById('lizard').style.display == '') {
            jQuery("#lizard").fadeOut(500);
        }

    });

});