/*
  Animation of HTML elements style.

  Requirement:
    jquery
    jquery-ui (if you want to use advanced animating functions, ie: easing)

  Usage:
    Xlib.CXM_Animate.animate(selector, trigger_type, css_props, options, second_options);

  Arguments:
    - selector
                JQuery selector (string), animation and event will be applied to HTML elements matched by the selector.

                * Example:

                  "#element_id"
                  or
                  ".class_name"

    - anims
                Array of animations object

                Example:
                  [
                    {
                      id:            "my_animation",
                      event:         "mouseover"
                      stop_anims_id: [],
                      props:         { width: 64, height: 64 },
                      options:       { easing: "linear", duration: 2000 }
                    }
                  }

  Note:
    Options properties are the same as the jquery "animate" method options.
*/

$(document).ready(function () {
  if (window.Xlib === undefined) {
    Xlib = {};
  }

  if (Xlib.CXM_Animate === undefined) {
    Xlib.CXM_Animate = {
      animate: null // see below
    };
  }

  Xlib.CXM_Animate.animate = function (selector, anims) {
    $(selector).each(function() {
      var elem = $(this),

          grouped_anims = {

          },

          initial_css_props = {};;

      // group/register anims by events
      $(anims).each(function (index, anim) {
        var anim_group = grouped_anims[anim.event];

        if (anim_group === undefined) {
          anim_group = grouped_anims[anim.event] = [];
        }

        anim_group.push(anim);
      });

      // iterate over all props of each anims and store the initial state of each css props of the element
      // this is done only once for the group of anims and it happen only if one anim props is empty which mean it animate back to element initial state at initialization
      for (i = 0; i < anims.length; i += 1) {
        if (jQuery.isEmptyObject(anims[i].props) && jQuery.isEmptyObject(initial_css_props)) {
            for (j = 0; j < anims.length; j += 1) {
              $.each(anims[j].props, function (key, value) {
                initial_css_props[key] = elem.css(key).replace('px', '');
              });
            }

            anims[i].props = initial_css_props;

            break;
          }
        }

      // now for each event groups, bind the event
      $.each(grouped_anims, function (key, anims) {
        elem.bind(key,
          function() {
            var anim_object, options,
                id, i, j;

            // setup each animations
            for (i = 0; i < anims.length; i += 1) {
              anim_object = anims[i];
              options = anim_object.options,
              stop_anims_id = anim_object.stop_anims_id;

              // stop if needed specific anims determined by a list of ids
              if (stop_anims_id !== undefined) {
                for (id = 0; id < stop_anims_id.length; id += 1) {
                  elem.stop(stop_anims_id[id], true);
                }
              }

              options.queue = anim_object.id;

              elem.animate(anim_object.props, options).dequeue(anim_object.id);
            }
          }
        );
      });
    });
  };
});