$(document).ready(function() {
   
   var pages=new Array();
   pages[0]='intro';
   pages[1]='download';
   pages[2]='credits';
   pages[3]='lyrics';
   // alert(pages.length);
   
   // previousPage;
   currentPage = 0;
   
   var isAnimating = false;
   
   // $("#download").css("left", "840px");
   // $("h2").clone(true).insertAfter(this).attr("id", "saul");
   // $("#header").clone().insertAfter("#header").attr("id", "saul");
   
   $("#intro").clone().prependTo("#disc").attr("id", "intro-clone").css("left", "480px").css("top", '40px');
   $("#download").clone().prependTo("#disc").attr("id", "download-clone").css("left", "840px").css("top", "400px").rotate('90deg');
   $("#credits").clone().prependTo("#disc").attr("id", "credits-clone").css("left", "480px").css("top", "760px").rotate('180deg');
   $("#lyrics").clone().prependTo("#disc").attr("id", "lyrics-clone").css("left", "120px").css("top", "400px").rotate('270deg');

   
   
   
   // $('#download-cloned').rotate('90deg');
      //$('#download').left='10px';
   // $('#credits').rotate('180deg');
   // $('#lyrics').rotate('270deg');
   
   // $('#left').rotate('330deg');
   
   $('#left').click(
      function() { spin('left'); }
   );
   $('#right').click(
      function() { spin('right'); }
   );
   
   
   function spin(dir) {
      if(!isAnimating) {
         var amount;
         // var sam=pages.count()
         remove(pages[currentPage]);
         switch (dir) {
            case 'left':
               amount='+=90deg';
               currentPage = currentPage==0 ? currentPage=pages.length-1 : currentPage-1;
            break;
            case 'right':
               amount='-=90deg';
               currentPage = currentPage==pages.length-1 ? currentPage=0 : currentPage+1;
            break;
         }
         isAnimating = true;
         $('#disc').animate({rotate: amount}, 2000, update);
      };
   }
   
   
   function remove(which) {
      // alert(which);
      $('#'+which).css('display', 'none');
      $('#'+which+'-clone').css('display', 'block');
   }
   
   
   function update() {
      isAnimating = false;
      var sam=pages[currentPage];
      
      $('#left').html(currentPage==0 ? pages[pages.length-1] : pages[currentPage-1]);
      $('#right').html(currentPage==pages.length-1 ? pages[0] : pages[currentPage+1]);
      
      $('#'+pages[currentPage]).css('display', 'block');
      $('#'+pages[currentPage]+'-clone').css('display', 'none');
   }
});


ddaccordion.init({
   headerclass: "title", //Shared CSS class name of headers group
   contentclass: "detail", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
   defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
   onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: false, //Should contents open by default be animated into view?
   persiststate: false, //persist state of opened contents within browser session?
   toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(expandedindices){ //custom code to run when headers have initalized
      //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      //do nothing
   }
})