var maxWidth = 771;
var minWidth = 40;
//startWidth = 223;
var startWidth = 223;
var numElem = 4;

var animTimeout;
var restartAnimTimeout;
var delayAccordionDisplay;
var overlayTimeout;

$(document).ready(function() {

  //var slideAnimSpeed = 500;
  //var overlayPauseTime = 5000;
  /*
  $("#a1").animate({ width: startWidth + "px" }, { queue: false, duration: 400 });
  $("#a2").animate({ width: startWidth + "px" }, { queue: false, duration: 400 });
  $("#a3").animate({ width: startWidth + "px" }, { queue: false, duration: 400 });
  $("#a4").animate({ width: startWidth + "px" }, { queue: false, duration: 400 });
  */
  /*==================================================================================*/
  /*==== animate the block of elements once on first initiation of page ==============*/
  function animateBlock(blockID) {
    //alert(blockID);
    if ($(blockID).find(".btn2More").is(":visible")) {
      $(blockID).find(".rightBlockArea").hide();
      $(blockID).find(".btnSwitch").css("background-position", "center top");
    }

    if (blockID != "#a1") {
      $("#a1").animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
      $("#a1").find(".rightBlockArea").hide();
      $("#a1").find("#btnM2").hide();
      $("#a1").find(".btn1More").hide();
      $("#a1").find(".btnSwitch").css("background-position", "center top");
    }
    if (blockID != "#a2") {
      $("#a2").animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
      $("#a2").find(".rightBlockArea").hide();
      $("#a2").find("#btnM2").hide();
      $("#a2").find(".btn1More").hide();
      $("#a2").find(".btnSwitch").css("background-position", "center top");
    }
    if (blockID != "#a3") {
      $("#a3").animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
      $("#a3").find(".rightBlockArea").hide();
      $("#a3").find("#btnM2").hide();
      $("#a3").find(".btn1More").hide();
      $("#a3").find(".btnSwitch").css("background-position", "center top");
    }
    if (blockID != "#a4") {
      $("#a4").animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
      $("#a4").find(".rightBlockArea").hide();
      $("#a4").find("#btnM2").hide();
      $("#a4").find(".btn1More").hide();
      $("#a4").find(".btnSwitch").css("background-position", "center top");
    }
    $(blockID).animate({ width: maxWidth + "px" }, { queue: false, duration: 400 });
    $(blockID).find(".rightBlockArea").delay(350).show(1);
    $(blockID).find(".btn2More").delay(350).show(1);
    $(blockID).find(".btn1More").hide();
    $(blockID).find(".btnSwitch").css("background-position", "center bottom");
  }
  /*==================================================================================*/

  function showBlock(elem) {
    //alert($(elem).find(".btn2More").is(":visible"));
    if ($(elem).find(".btn2More").is(":visible")) {
      $(elem).find(".rightBlockArea").hide();
      $(elem).find(".btnSwitch").css("background-position", "center top");
      $(".btn1More").delay(200).show(100);
      $("#a4").animate({ width: startWidth + "px" }, { queue: false, duration: 400 });
      $("#a3").animate({ width: startWidth + "px" }, { queue: false, duration: 400 });
      $("#a2").animate({ width: startWidth + "px" }, { queue: false, duration: 400 });
      $("#a1").animate({ width: startWidth + "px" }, { queue: false, duration: 400 });
    } else {
      $("#a1").animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
      $("#a1").find(".rightBlockArea").hide();
      $("#a1").find("#btnM2").hide();
      $("#a1").find(".btn1More").hide();
      $("#a1").find(".btnSwitch").css("background-position", "center top");

      $("#a2").animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
      $("#a2").find(".rightBlockArea").hide();
      $("#a2").find("#btnM2").hide();
      $("#a2").find(".btn1More").hide();
      $("#a2").find(".btnSwitch").css("background-position", "center top");

      $("#a3").animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
      $("#a3").find(".rightBlockArea").hide();
      $("#a3").find("#btnM2").hide();
      $("#a3").find(".btn1More").hide();
      $("#a3").find(".btnSwitch").css("background-position", "center top");

      $("#a4").animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
      $("#a4").find(".rightBlockArea").hide();
      $("#a4").find("#btnM2").hide();
      $("#a4").find(".btn1More").hide();
      $("#a4").find(".btnSwitch").css("background-position", "center top");

      $(elem).animate({ width: maxWidth + "px" }, { queue: false, duration: 400 });
      $(elem).find(".rightBlockArea").delay(350).show(1);
      $(elem).find(".btn2More").delay(350).show(1);
      $(elem).find(".btn1More").hide();
      $(elem).find(".btnSwitch").css("background-position", "center bottom");

    }
  }

  //-- array of element id's that we want to animate.
  //-- the last element is the one that will reset the animation
  var itemData = ["#a1", "#a2", "#a3", "#a4", "#a4"];
  var i = 0;

  //-- start the overall animation
  function startAnim() {
    /*-- initiate animation --*/
    displayOverlay();
    /*-- call start animation - timer - for each block in accordion --*/
    /*-- set timeout to number of seconds that we want to delay the --*/
    /*-- animation (displayOverlay() has a timeout of 5000, this function has a timeout of 10000 therfore --*/
    /*-- the animation idTimer() will not be called for 5 seconds after the displayOverlay() function finishes --*/
    delayAccordionDisplay = setTimeout(function() {
      idTimer(itemData);
    }, 8000);
  }

  //-- function to hide main image and start animation
  function displayOverlay() {
    //clearTimeout(animTimeout);
    overlayTimeout = setTimeout(function() {
      $('#accordH1').delay('50').fadeIn('500');
      $('#accordionOverlay').fadeOut('500', function() {
        //showBlock("#a2");
      });
    }, 10000);
  }
  //-- function to hide animation and display overlay (called at end of animation)
  function hideAccordion() {
    clearTimeout(animTimeout);
    $('#accordionOverlay').fadeIn('500');
    $('#accordH1').delay('500').fadeOut('500');
    /*-- start animation over again --*/
    var restartAnimTimeout = setTimeout(startAnim(), 5000);
  }
  
  
  /*===============================================*/
  //-- functions triggered from main image buttons
  $("#accordionOverlay a#btnA1").click(function() {
    $('#accordH1').fadeIn('500');
    $('#accordionOverlay').fadeOut('500', function() {
      clearTimeout(animTimeout);  //-- stop animation from continuing
      showBlock("#a1");
    });
  });
  $("#accordionOverlay a#btnA2").click(function() {
    $('#accordH1').fadeIn('500');
    $('#accordionOverlay').fadeOut('500', function() {
      clearTimeout(animTimeout);  //-- stop animation from continuing
      showBlock("#a2");
    });
  });
  $("#accordionOverlay a#btnA3").click(function() {
    $('#accordH1').fadeIn('500');
    $('#accordionOverlay').fadeOut('500', function() {
      clearTimeout(animTimeout);  //-- stop animation from continuing
      showBlock("#a3");
    });
  });
  $("#accordionOverlay a#btnA4").click(function() {
    $('#accordH1').fadeIn('500');
    $('#accordionOverlay').fadeOut('500', function() {
      clearTimeout(animTimeout);  //-- stop animation from continuing
      showBlock("#a4");
    });
  });

  //-- function called when an element is clicked
  $("ul li.block1 #ta1").click(function() {
    clearTimeout(animTimeout);  //-- stop animation from continuing
    showBlock('#a1');
  });
  $("ul li.block2 #ta2").click(function() {
    clearTimeout(animTimeout);  //-- stop animation from continuing
    showBlock('#a2');
  });
  $("ul li.block3 #ta3").click(function() {
    clearTimeout(animTimeout);  //-- stop animation from continuing
    showBlock('#a3');
  });
  $("ul li.block4 #ta4").click(function() {
    clearTimeout(animTimeout);  //-- stop animation from continuing
    showBlock('#a4');
  });


  function idTimer(list, i) {
    if (!(i >= 0)) {
      i = 0;
    }
    animTimeout = setTimeout((function(elemID) {
      i++;
      return function() {
        if (i < list.length) {
          idTimer(list, i);
        }
        if (i < list.length) {
          //-- animate the next element
          animateBlock(elemID);
        } else {
          //-- continue animating elements
          /*
          i = 0;
          idTimer(itemData);
          */
          //-- this is the last element so re-set the animation
          showBlock(elemID); /*  -- stop animation here show four equal blocks -- */
          /*-- wait for the animation to reset before hiding the accordion --*/
          hideAccordionTimeout = setTimeout(function() {
            hideAccordion();
          }, 10000);
        }
      }
    })(list[i]), 5000);
  }

  startAnim(); /*-- start animation for first time --*/

});



/*-- displayArea() shows the accordion area without animating --*/
function displayArea(elemNum) {
  blockID = "#a" + elemNum;
  /*
    number of element passed in
    loop through elements (referencing their id's (eg #a1, #a2 etc)
    fully display the one passed in
    minimise all other elements in accordion
  */
  for (i = 1; i < numElem+1; i++) {
    if (i == elemNum) {
      /*-- display this area --*/
      $("#a" + i).width(maxWidth);
      $("#a" + i).find(".rightBlockArea").show(1);
      $("#a" + i).find(".btn2More").show(1);
      $("#a" + i).find(".btn1More").hide();
      $("#a" + i).find(".btnSwitch").css("background-position", "center bottom");
    } else {
      /*-- minimise this area --*/
      $("#a" + i).width(minWidth);
      $("#a" + i).find(".rightBlockArea").hide();
      $("#a" + i).find("#btnM2").hide();
      $("#a" + i).find(".btn1More").hide();
      $("#a" + i).find(".btnSwitch").css("background-position", "center top");
    }
  }

}

/*==================================================================================*/