var flag = 1;
var width = "";

$(document).ready(function() {
    $('#td1').click(function(){
        if (flag == 1){
            return false;
        }
        if (flag == 2){
            $('#textrio').css({ "background-position":"left -17px" });
            $('#textrio').css({ "cursor":"default" });
            $('#sphererio').css({ "background-position":"left -42px" });
            width = "";
            width = "" + $('#td2').width() + "px";
            $('#td1').css({ "width":"auto" });
            $('#td2').css({ "width": width });
            $("#td2").animate({ 
                width: "40px"
              }, 70 );
            $("#td2").css({ "background-position":"right top" });
            $('#textvegas').css({ "background-position":"left top" });
            $('#textvegas').css({ "cursor":"pointer" });
            $('#spherevegas').css({ "background-position":"left top" });
        }
        if (flag == 3){
            $('#textrio').css({ "background-position":"left -17px" });
            $('#textrio').css({ "cursor":"default" });
            $('#sphererio').css({ "background-position":"left -42px" });
            width = "";
            width = "" + $('#td3').width() + "px";
            $('#td1').css({ "width":"auto" });
            $('#td3').css({ "width": width });
            $("#td3").animate({ 
                width: "40px"
              }, 70 );
            $("#td3").css({ "background-position":"right top" });
            $('#textmond').css({ "background-position":"left top" });
            $('#textmond').css({ "cursor":"pointer" });
            $('#spheremond').css({ "background-position":"left top" });
        }
        if (flag == 4){
            $('#textrio').css({ "background-position":"left -17px" });
            $('#textrio').css({ "cursor":"default" });
            $('#sphererio').css({ "background-position":"left -42px" });
            width = "";
            width = "" + $('#td4').width() + "px";
            $('#td1').css({ "width":"auto" });
            $('#td4').css({ "width": width });
            $("#td4").animate({ 
                width: "40px"
              }, 70 );
            $("#td4").css({ "background-position":"left top" });
            $('#textmald').css({ "background-position":"left top" });
            $('#textmald').css({ "cursor":"pointer" });
            $('#spheremald').css({ "background-position":"left top" });
        }
        flag = 1;
    });
    
    
    
    $('#td2').click(function(){
        $(this).css({ "background-position":"center top" });
        if (flag == 1){
            $('#textvegas').css({ "background-position":"left -17px" });
            $('#textvegas').css({ "cursor":"default" });
            $('#spherevegas').css({ "background-position":"left -52px" });
            width = "";
            width = "" + $('#td1').width() + "px";
            $('#td2').css({ "width":"auto" });
            $('#td1').css({ "width": width });
            $("#td1").animate({ 
                width: "40px"
              }, 70 );
            $('#textrio').css({ "background-position":"left top" });
            $('#textrio').css({ "cursor":"pointer" });
            $('#sphererio').css({ "background-position":"left top" });
        }
        if (flag == 2){
            return false;
        }
        if (flag == 3){
            $('#textvegas').css({ "background-position":"left -17px" });
            $('#textvegas').css({ "cursor":"default" });
            $('#spherevegas').css({ "background-position":"left -52px" });
            width = "";
            width = "" + $('#td3').width() + "px";
            $('#td2').css({ "width":"auto" });
            $('#td3').css({ "width": width });
            $("#td3").animate({ 
                width: "40px"
              }, 70 );
            $("#td3").css({ "background-position":"right top" });
            $('#textmond').css({ "background-position":"left top" });
            $('#textmond').css({ "cursor":"pointer" });
            $('#spheremond').css({ "background-position":"left top" });
        }
        if (flag == 4){
            $('#textvegas').css({ "background-position":"left -17px" });
            $('#textvegas').css({ "cursor":"default" });
            $('#spherevegas').css({ "background-position":"left -52px" });
            width = "";
            width = "" + $('#td4').width() + "px";
            $('#td2').css({ "width":"auto" });
            $('#td4').css({ "width": width });
            $("#td4").animate({ 
                width: "40px"
              }, 70 );
            $("#td4").css({ "background-position":"left top" });
            $('#textmald').css({ "background-position":"left top" });
            $('#textmald').css({ "cursor":"pointer" });
            $('#spheremald').css({ "background-position":"left top" });
        }
        flag = 2;
    });
    $('#td3').click(function(){
        $(this).css({ "background-position":"center top" });
        if (flag == 1){
            $('#textmond').css({ "background-position":"left -41px" });
            $('#textmond').css({ "cursor":"default" });
            $('#spheremond').css({ "background-position":"left -75px" });
            width = "";
            width = "" + $('#td1').width() + "px";
            $('#td3').css({ "width":"auto" });
            $('#td1').css({ "width": width });
            $("#td1").animate({ 
                width: "40px"
              }, 70 );
            $('#textrio').css({ "background-position":"left top" });
            $('#textrio').css({ "cursor":"pointer" });
            $('#sphererio').css({ "background-position":"left top" });
        }
        if (flag == 2){
            $('#textmond').css({ "background-position":"left -41px" });
            $('#textmond').css({ "cursor":"default" });
            $('#spheremond').css({ "background-position":"left -75px" });
            width = "";
            width = "" + $('#td2').width() + "px";
            $('#td3').css({ "width":"auto" });
            $('#td2').css({ "width": width });
            $("#td2").animate({ 
                width: "40px"
              }, 70 );
            $("#td2").css({ "background-position":"right top" });
            $('#textvegas').css({ "background-position":"left top" });
            $('#textvegas').css({ "cursor":"pointer" });
            $('#spherevegas').css({ "background-position":"left top" });
        }
        if (flag == 3){
            return false;
        }
        if (flag == 4){
            $('#textmond').css({ "background-position":"left -41px" });
            $('#textmond').css({ "cursor":"default" });
            $('#spheremond').css({ "background-position":"left -75px" });
            width = "";
            width = "" + $('#td4').width() + "px";
            $('#td3').css({ "width":"auto" });
            $('#td4').css({ "width": width });
            $("#td4").animate({ 
                width: "40px"
              }, 70 );
            $("#td4").css({ "background-position":"left top" });
            $('#textmald').css({ "background-position":"left top" });
            $('#textmald').css({ "cursor":"pointer" });
            $('#spheremald').css({ "background-position":"left top" });
        }
        flag = 3;
    });
    $('#td4').click(function(){
        $(this).css({ "background-position":"center top" });
        if (flag == 1){
            $('#textmald').css({ "background-position":"left -17px" });
            $('#textmald').css({ "cursor":"default" });
            $('#spheremald').css({ "background-position":"left -86px" });
            width = "";
            width = "" + $('#td1').width() + "px";
            $('#td4').css({ "width":"auto" });
            $('#td1').css({ "width": width });
            $("#td1").animate({ 
                width: "40px"
              }, 70 );
            $('#textrio').css({ "background-position":"left top" });
            $('#textrio').css({ "cursor":"pointer" });
            $('#sphererio').css({ "background-position":"left top" });
        }
        if (flag == 2){
            $('#textmald').css({ "background-position":"left -17px" });
            $('#textmald').css({ "cursor":"default" });
            $('#spheremald').css({ "background-position":"left -86px" });
            width = "";
            width = "" + $('#td2').width() + "px";
            $('#td4').css({ "width":"auto" });
            $('#td2').css({ "width": width });
            $("#td2").animate({ 
                width: "40px"
              }, 70 );
            $("#td2").css({ "background-position":"right top" });
            $('#textvegas').css({ "background-position":"left top" });
            $('#textvegas').css({ "cursor":"pointer" });
            $('#spherevegas').css({ "background-position":"left top" });
        }
        if (flag == 3){
            $('#textmald').css({ "background-position":"left -17px" });
            $('#textmald').css({ "cursor":"default" });
            $('#spheremald').css({ "background-position":"left -86px" });
            width = "";
            width = "" + $('#td3').width() + "px";
            $('#td4').css({ "width":"auto" });
            $('#td3').css({ "width": width });
            $("#td3").animate({ 
                width: "40px"
              }, 70 );
            $("#td3").css({ "background-position":"right top" });
            $('#textmond').css({ "background-position":"left top" });
            $('#textmond').css({ "cursor":"pointer" });
            $('#spheremond').css({ "background-position":"left top" });
        }
        if (flag == 4){
            return false;
        }
        flag = 4;
    });
    
    $('#textrio').hover(
      function () {
        if(flag != 1){
            $('#textrio').css({ "background-position":"left -17px" });
            $('#sphererio').css({ "background-position":"left -42px" });
        }
      }, 
      function () {
        if(flag != 1){
            $('#textrio').css({ "background-position":"left top" });
            $('#sphererio').css({ "background-position":"left top" });
        }
      }
    );
    
    
    $('#textvegas').hover(
      function () {
        if(flag != 2){
            $('#textvegas').css({ "background-position":"left -17px" });
            $('#spherevegas').css({ "background-position":"left -52px" });
        }
      }, 
      function () {
        if(flag != 2){
            $('#textvegas').css({ "background-position":"left top" });
            $('#spherevegas').css({ "background-position":"left top" });
        }
      }
    );
    
    $('#textmond').hover(
      function () {
        if(flag != 3){
            $('#textmond').css({ "background-position":"left -41px" });
            $('#spheremond').css({ "background-position":"left -75px" });
        }
      }, 
      function () {
        if(flag != 3){
            $('#textmond').css({ "background-position":"left top" });
            $('#spheremond').css({ "background-position":"left top" });
        }
      }
    );
    
    $('#textmald').hover(
      function () {
        if(flag != 4){
            $('#textmald').css({ "background-position":"left -17px" });
            $('#spheremald').css({ "background-position":"left -86px" });
        }
      }, 
      function () {
        if(flag != 4){
            $('#textmald').css({ "background-position":"left top" });
            $('#spheremald').css({ "background-position":"left top" });
        }
      }
    );

   
   
    $('#textrio').click(function(){
        if (flag == 1){
            return false;
        }
        if (flag == 2){
            $('#textrio').css({ "background-position":"left -17px" });
            $('#textrio').css({ "cursor":"default" });
            $('#sphererio').css({ "background-position":"left -42px" });
            width = "";
            width = "" + $('#td2').width() + "px";
            $('#td1').css({ "width":"auto" });
            $('#td2').css({ "width": width });
            $("#td2").animate({ 
                width: "40px"
              }, 70 );
            $("#td2").css({ "background-position":"right top" });
            $('#textvegas').css({ "background-position":"left top" });
            $('#textvegas').css({ "cursor":"pointer" });
            $('#spherevegas').css({ "background-position":"left top" });
        }
        if (flag == 3){
            $('#textrio').css({ "background-position":"left -17px" });
            $('#textrio').css({ "cursor":"default" });
            $('#sphererio').css({ "background-position":"left -42px" });
            width = "";
            width = "" + $('#td3').width() + "px";
            $('#td1').css({ "width":"auto" });
            $('#td3').css({ "width": width });
            $("#td3").animate({ 
                width: "40px"
              }, 70 );
            $("#td3").css({ "background-position":"right top" });
            $('#textmond').css({ "background-position":"left top" });
            $('#textmond').css({ "cursor":"pointer" });
            $('#spheremond').css({ "background-position":"left top" });
        }
        if (flag == 4){
            $('#textrio').css({ "background-position":"left -17px" });
            $('#textrio').css({ "cursor":"default" });
            $('#sphererio').css({ "background-position":"left -42px" });
            width = "";
            width = "" + $('#td4').width() + "px";
            $('#td1').css({ "width":"auto" });
            $('#td4').css({ "width": width });
            $("#td4").animate({ 
                width: "40px"
              }, 70 );
            $("#td4").css({ "background-position":"left top" });
            $('#textmald').css({ "background-position":"left top" });
            $('#textmald').css({ "cursor":"pointer" });
            $('#spheremald').css({ "background-position":"left top" });
        }
        flag = 1;
    });
    
    
    
    $('#textvegas').click(function(){
        $('#td2').css({ "background-position":"center top" });
        if (flag == 1){
            $('#textvegas').css({ "background-position":"left -17px" });
            $('#textvegas').css({ "cursor":"default" });
            $('#spherevegas').css({ "background-position":"left -52px" });
            width = "";
            width = "" + $('#td1').width() + "px";
            $('#td2').css({ "width":"auto" });
            $('#td1').css({ "width": width });
            $("#td1").animate({ 
                width: "40px"
              }, 70 );
            $('#textrio').css({ "background-position":"left top" });
            $('#textrio').css({ "cursor":"pointer" });
            $('#sphererio').css({ "background-position":"left top" });
        }
        if (flag == 2){
            return false;
        }
        if (flag == 3){
            $('#textvegas').css({ "background-position":"left -17px" });
            $('#textvegas').css({ "cursor":"default" });
            $('#spherevegas').css({ "background-position":"left -52px" });
            width = "";
            width = "" + $('#td3').width() + "px";
            $('#td2').css({ "width":"auto" });
            $('#td3').css({ "width": width });
            $("#td3").animate({ 
                width: "40px"
              }, 70 );
            $("#td3").css({ "background-position":"right top" });
            $('#textmond').css({ "background-position":"left top" });
            $('#textmond').css({ "cursor":"pointer" });
            $('#spheremond').css({ "background-position":"left top" });
        }
        if (flag == 4){
            $('#textvegas').css({ "background-position":"left -17px" });
            $('#textvegas').css({ "cursor":"default" });
            $('#spherevegas').css({ "background-position":"left -52px" });
            width = "";
            width = "" + $('#td4').width() + "px";
            $('#td2').css({ "width":"auto" });
            $('#td4').css({ "width": width });
            $("#td4").animate({ 
                width: "40px"
              }, 70 );
            $("#td4").css({ "background-position":"left top" });
            $('#textmald').css({ "background-position":"left top" });
            $('#textmald').css({ "cursor":"pointer" });
            $('#spheremald').css({ "background-position":"left top" });
        }
        flag = 2;
    });
    $('#textmond').click(function(){
        $('#td3').css({ "background-position":"center top" });
        if (flag == 1){
            $('#textmond').css({ "background-position":"left -41px" });
            $('#textmond').css({ "cursor":"default" });
            $('#spheremond').css({ "background-position":"left -75px" });
            width = "";
            width = "" + $('#td1').width() + "px";
            $('#td3').css({ "width":"auto" });
            $('#td1').css({ "width": width });
            $("#td1").animate({ 
                width: "40px"
              }, 70 );
            $('#textrio').css({ "background-position":"left top" });
            $('#textrio').css({ "cursor":"pointer" });
            $('#sphererio').css({ "background-position":"left top" });
        }
        if (flag == 2){
            $('#textmond').css({ "background-position":"left -41px" });
            $('#textmond').css({ "cursor":"default" });
            $('#spheremond').css({ "background-position":"left -75px" });
            width = "";
            width = "" + $('#td2').width() + "px";
            $('#td3').css({ "width":"auto" });
            $('#td2').css({ "width": width });
            $("#td2").animate({ 
                width: "40px"
              }, 70 );
            $("#td2").css({ "background-position":"right top" });
            $('#textvegas').css({ "background-position":"left top" });
            $('#textvegas').css({ "cursor":"pointer" });
            $('#spherevegas').css({ "background-position":"left top" });
        }
        if (flag == 3){
            return false;
        }
        if (flag == 4){
            $('#textmond').css({ "background-position":"left -41px" });
            $('#textmond').css({ "cursor":"default" });
            $('#spheremond').css({ "background-position":"left -75px" });
            width = "";
            width = "" + $('#td4').width() + "px";
            $('#td3').css({ "width":"auto" });
            $('#td4').css({ "width": width });
            $("#td4").animate({ 
                width: "40px"
              }, 70 );
            $("#td4").css({ "background-position":"left top" });
            $('#textmald').css({ "background-position":"left top" });
            $('#textmald').css({ "cursor":"pointer" });
            $('#spheremald').css({ "background-position":"left top" });
        }
        flag = 3;
    });
    $('#textmald').click(function(){
        $('#td4').css({ "background-position":"center top" });
        if (flag == 1){
            $('#textmald').css({ "background-position":"left -17px" });
            $('#textmald').css({ "cursor":"default" });
            $('#spheremald').css({ "background-position":"left -86px" });
            width = "";
            width = "" + $('#td1').width() + "px";
            $('#td4').css({ "width":"auto" });
            $('#td1').css({ "width": width });
            $("#td1").animate({ 
                width: "40px"
              }, 70 );
            $('#textrio').css({ "background-position":"left top" });
            $('#textrio').css({ "cursor":"pointer" });
            $('#sphererio').css({ "background-position":"left top" });
        }
        if (flag == 2){
            $('#textmald').css({ "background-position":"left -17px" });
            $('#textmald').css({ "cursor":"default" });
            $('#spheremald').css({ "background-position":"left -86px" });
            width = "";
            width = "" + $('#td2').width() + "px";
            $('#td4').css({ "width":"auto" });
            $('#td2').css({ "width": width });
            $("#td2").animate({ 
                width: "40px"
              }, 70 );
            $("#td2").css({ "background-position":"right top" });
            $('#textvegas').css({ "background-position":"left top" });
            $('#textvegas').css({ "cursor":"pointer" });
            $('#spherevegas').css({ "background-position":"left top" });
        }
        if (flag == 3){
            $('#textmald').css({ "background-position":"left -17px" });
            $('#textmald').css({ "cursor":"default" });
            $('#spheremald').css({ "background-position":"left -86px" });
            width = "";
            width = "" + $('#td3').width() + "px";
            $('#td4').css({ "width":"auto" });
            $('#td3').css({ "width": width });
            $("#td3").animate({ 
                width: "40px"
              }, 70 );
            $("#td3").css({ "background-position":"right top" });
            $('#textmond').css({ "background-position":"left top" });
            $('#textmond').css({ "cursor":"pointer" });
            $('#spheremond').css({ "background-position":"left top" });
        }
        if (flag == 4){
            return false;
        }
        flag = 4;
    });
})