$(function () {
    // run the currently selected effect
    function runEffect(a) {
        // get effect type from 
        var selectedEffect = "scale";

        // most effect types need no options passed by default
        var options = {};
        // some effects have required parameters
        if (selectedEffect === "scale") {
            options = { percent: 100 };
        } else if (selectedEffect === "size") {
            options = { to: { width: 232, height: 232} };
        }

        // run the effect
        $(a).show(selectedEffect, options, 232, callback);
    };

    //callback function to bring a hidden box back
    function callback() {
        setTimeout(function () {
            $("#effect:visible").removeAttr("style").fadeOut();
        }, 1000);
    };

    // set effect from select menu value

    $("#leftbut").click(function () { alert(document.getElementById("imgid1").src); });

    $("#leftsidea").mouseover(function () { flipback(0); });
    $("#leftsideb").mouseover(function () { flipback(0); });
    $("#leftsided").mouseover(function () { flipback(0); });
    $("#topsidea").mouseover(function () { flipback(0); });
    $("#bottomsidea").mouseover(function () { flipback(0); });
    $("#bottomsideb").mouseover(function () { flipback(0); });
    $("#bottomsidec").mouseover(function () { flipback(0); });
    $("#bottomsided").mouseover(function () { flipback(0); });
    $("#bottomsidee").mouseover(function () { flipback(0); });

    $("#box1").mouseover(function () { flipout(1); });
    $("#box2").mouseover(function () { flipout(2); });
    $("#box3").mouseover(function () { flipout(3); });
    $("#box4").mouseover(function () { flipout(4); });
   
    function flipout(a) {
        flipback(a);
        var boximg = new Array;
        var mapimg = new Array;
        boximg[1] = "./images/ssa2bbb1215.jpg";
        boximg[2] = "./images/blog2bb0916b.jpg";
        boximg[3] = "./images/online3.jpg";
        boximg[4] = "./images/telephone2bbb.jpg";
        mapimg[1] = "#ssamap";
        mapimg[2] = "#blogmap";
        mapimg[3] = "#onlinemap";
        mapimg[4] = "#phonemap";
        if (document.getElementById("box" + a + "tmp").value == 0) {
            document.getElementById("box" + a + "tmp").value = 1;
            
            //$("#box" + a + ":visible").removeAttr("style").fadeOut();
            $("#box" + a).hide();
            setTimeout(function () {
            //    $("#box" + a + ":visible").removeAttr("style").fadeOut();
                
            }, 1);

            setTimeout(function () {
                if (a > 0) { a = a; }

            }, 75);


            setTimeout(function () {
                document.getElementById("imgid" + a).src = boximg[a];
                document.getElementById("imgid" + a).useMap = mapimg[a];
                runEffect("#box" + a);
                
            }, 100);
            
            return false;
        }



    }


    function flipback(a) {
        var arr = ["1", "2", "3", "4"];
        var boximg = new Array;
        boximg[1] = "images/ssa2aa.jpg";
        boximg[2] = "images/blog2aa.jpg";
        boximg[3] = "images/online2aa.jpg";
        boximg[4] = "images/telephone2aa.jpg";


        jQuery.each(arr, function () {
            //if ((document.getElementById("box" + this + "tmp").value == 1  || document.getElementById("imgid" + this).src.indexOf(boximg[this],1) < 0 )&& this != a) {
            if (document.getElementById("cmain").value == "yes") {
                if (document.getElementById("imgid" + this).src.indexOf(boximg[this], 1) < 0 && this != a) {
                    //$("#box" + this).hide();
                    
                    document.getElementById("imgid" + this).src = boximg[this];
                    document.getElementById("imgid" + this).useMap = "";
                    document.getElementById("box" + this + "tmp").value = 0;
                   // runEffect("#box" + this);
                }
            }


        });




    };


    $("#box1").hide();
    $("#box2").hide();
    $("#box3").hide();
    $("#box4").hide();

    runEffect("#box1");
    runEffect("#box2");
    runEffect("#box3");
    runEffect("#box4");
});


function slidecon(a)
{
document.getElementById("slidestatus").value=a;

}