/* $id: avatar_selection.js,v 1.1.2.1.2.2 2008/01/28 11:00:29 snpower exp $ */
if (Drupal.jsEnabled) {
  $(document).ready(function () {
    // set up the ajax pager
    $('div.user_avatar_select').avatar_selection_pager('div.form-item');

    // handle radio buttons
    radio_button_handler();

    // handle image selection
    image_click_handler();
  });

  function radio_button_handler() {
    // handle radio buttons
    $('div.user_avatar_select input.form-radio').hide();
    $('div.user_avatar_select img').hover(
      function(){
        $(this).addClass("avatar_hover");
      },
      function(){
        $(this).removeClass("avatar_hover");
      }
    );
  }

  function image_click_handler() {
    $('div.user_avatar_select img').bind("click",function(){
      $("div.user_avatar_select img.avatar_select").each(function(){
        $(this).removeClass("avatar_select");
        $(this).parent().children("input").attr("checked","");
      });
      $(this).addClass("avatar_select");
      $(this).parent().children("input").attr("checked","checked");
    });
  }

  // pager function
  $.fn.avatar_selection_pager = function(element) {
    var drupal_settings = Drupal.settings.avatar_selection;

    var settings = {
      pager_id: 'avatar_selection_pager_nav',
      pager_class: 'avatar_selection_pager_nav',
      active_class: 'avatar_selection_pager_nav_active',
      prev_link: '«',
      next_link: '»',
      height: null,
      num_images_per_page: drupal_settings.num_images_per_page,
      num_images: drupal_settings.num_images,
      image_url: drupal_settings.image_url,
      images: drupal_settings.images
    }

    return this.each( function () {

      var me = $(this);
      var size;
      var i = 0;
      var page_nav = '#'+settings.pager_id;

      function init_pager () {
        //size = $(element, me).not(page_nav).size();
        size = settings.num_images;
        size = Math.ceil(size/settings.num_images_per_page);
        if (settings.height == null) {
          settings.height = get_element_height();
        }
        if (size > 1) {
          make_pager_list();
          //show();
          set_active();
        }
        set_height();
      }

      function make_pager_list () {
        var str = '<div id="'+ settings.pager_id +'" class="'+ settings.pager_class +'">';
        str += '<a href="#" rel="prev">'+ settings.prev_link +'</a>';
        for (var i = 0; i < size; i++) {
          var j = i+1;
          str += '<a href="#" rel="'+ j +'">'+ j +'</a>';
        }
        str += '<a href="#" rel="next">'+ settings.next_link +'</a>';
        str += '</div>';
        $(me).append(str);
      }

      function show () {
        $(me).find(element).not(page_nav).hide();
        i = i * settings.num_images_per_page;
        for (var j = 0; j < settings.num_images_per_page; j++) {
          var index = i+j;
          if (index >= settings.num_images) {
            break;
          }
          var show = $(me).find(element).not(page_nav).get(index);
          $(show).show();
        }
      }

      function img_show() {
        $(me).find(element).not(page_nav).hide();
        i = i * settings.num_images_per_page;
        var count = i;
        $(me).find(element).not(page_nav).each(function () {
          var max_image = 1*i + 1*settings.num_images_per_page;
          if (count < settings.num_images && count < max_image) {
            var image_name = settings.images[count];
            var input = '<input name="select_avatar" class="form-radio user_avatar_select" type="radio" value="'+ image_name +'">';
            var image = '<img class="" alt="'+ image_name +'" title="'+ image_name +'" src="'+ settings.image_url +"/"+ image_name +'" />';

            $(this).find("label").html(input + image);
            $(this).show();
            count++;
          }
        });
        radio_button_handler();
        image_click_handler();
      }

      function set_active () {
        $(me).find(page_nav).find('a').removeClass(settings.active_class);
        var page_num = Math.floor(i/settings.num_images_per_page) + 1;
        var show = $(me).find(page_nav).find('a').get(page_num);
        $(show).addClass(settings.active_class);
      }

      function set_height () {
        if ($.browser.msie) {
          $(me).find(element).not(page_nav).css( {
            height: settings.height
          });
        }
        else {
          $(me).find(element).not(page_nav).css( {
            minHeight: settings.height
          });
        }
      }

      function get_element_height () {
        var height = 0;
        $(me).find(element).not(page_nav).each(function () {
          if (this.offsetHeight > height) {
            height = this.offsetHeight;
          }
        });
        height = height + "px";
        return height;
      }

      function get_pager_height () {
        var pager_nav = $(page_nav).get(0);
        return pager_nav.offsetHeight;
      }

      img_show();
      init_pager();

      $(this).find(page_nav).find("a").click(function () {

        if ($(this).attr('rel') == 'next') {
          var offset = i + Number(settings.num_images_per_page);
          if (offset < settings.num_images) {
            i = Math.ceil((i+1)/settings.num_images_per_page);
          }
          else {
            i = Math.ceil(i/settings.num_images_per_page);
          }
        }
        else if ($(this).attr('rel') == 'prev') {
          if (i > 0) {
            i = Math.floor(i/settings.num_images_per_page) - 1;
          }
        }
        else {
          var j = $(this).attr('rel');
          i = j-1;
        }
        img_show();
        //show();
        set_active();
        return false;
      });
    });
  }
}