Event.observe(window, 'load', init_carousel);

function init_carousel() {

  if (!$('groups')) return;  // skip execution if the main move container is missing

  controls              = $$('.white .controls')[0];    // get the controls container for all of the buttons 
  active_element_index  = 1;                            // init the active counter
  slider_div            = $('groups');                  // set the master container that will slide
  control_elements      = controls.descendants();       // get an array of all the buttons

  // pull in the other playlists
  new Ajax.Updater(slider_div, 'music.aspx', 
  {
    method: 'get',
    parameters: {a:'GetPlaylists'},
    insertion: Insertion.Bottom,
    onComplete: function() {
        var num_groups = $$('#groups .group').size();
        var num_pages = control_elements.size() - 2;
        //alert(num_groups+"_"+num_pages);
        if (num_groups < num_pages)
        {
            for (var i=num_groups;i<(num_pages);i++)
            {
                control_elements[i].remove();
            }
            control_elements      = controls.descendants();
        }
        
        // observe the entire controls container for any events
        controls.observe('click', function(event) { 
            if (!Effect.Queues.get('carousel').size() > 0) {

              var element       = Event.element(event);                     // get the element for which the event occured
              var x_current_pos = slider_div.positionedOffset()[0];         // current position of the master "sliding" container
              var group_width   = 1000;                                     // width of each group div
              var max_pages     = control_elements.size() - 2;              // get the number of "pages" to be rotated (-2 because of the prev/next btns)
              var x_move_by     = 0;

              if (element.nodeName == 'A') {
                control_elements.invoke('removeClassName','active');
                switch (element.innerHTML) {
                  case 'Next':
                    if (active_element_index < max_pages) {
                      active_element_index++;
                      x_move_by = (-1 * group_width);
                    } 
                    control_elements[active_element_index-1].addClassName('active');
                    break;
                  case 'Previous':
                    if (active_element_index > 1) {
                      active_element_index--;
                      x_move_by = (1 * group_width);
                    }
                    control_elements[active_element_index-1].addClassName('active');
                    break;
                  default:
                    // add 'active to the btn that was clicked
                    element.addClassName('active');
                    x_move_by = (active_element_index - element.innerHTML) * group_width;
                    active_element_index = element.innerHTML;
                }
              }

              // execute the move
              if ( x_move_by != 0 ) {
                new Effect.MoveBy(slider_div, 0, x_move_by, { 
                  queue: { position: 'end', scope: 'carousel', limit: 1 }
                });
              }
            }
        });
        
    }
  });

  
}