﻿/*
* author: RAJF
* notes: open and close elements
*/

jQuery.fn.collapsable2 = function(options) {
  var defaults = {
    actionElement: '',
    prependActionElement: false,
    useIcon: true,
    startOpen: false,
    animate: true
  };

  var _ImageFolder = "/TRW/ui/freestyleui/images/"

  var settings = $.extend({}, defaults, options);

  return this.each(function() {
    var $this = $(this);

    var $actionElement = settings.actionElement;
    // insert image as click element
    $actionElement.addClass("collapsable-action-element").append('<img src="' + _ImageFolder + 'minus.gif" alt="open" class="collapsable-icon"/>');

    // create container for open and closing
    var $container = $(document.createElement("div"));
    $container.attr("class", "collapsable-container");

    $this.wrapInner($container);

    // move action element outside of collapsable
    if (settings.prependActionElement) {
      $this.prepend($actionElement);
    }

    //wrapping loses object reference so get it again!
    $container = $this.find(".collapsable-container");

    //set default state
    if (settings.startOpen) {
      openIt($container, $actionElement.find('.collapsable-icon'), true);
    }
    else {
      closeIt($container, $actionElement.find('.collapsable-icon'), true);
    }

    //set pointer
    if (settings.useIcon) {
      $actionElement.find('.collapsable-icon').addClass('pointer');
    }
    else {
      $actionElement.addClass('pointer');
    }

    // set click action
    $actionElement.click(function(event) {
      if (settings.useIcon) {
        if ($(event.target).is('.collapsable-icon')) {
          handleClick($container, $(event.target), settings.animate)
        }
      }
      else {
        handleClick($container, $(this).find('.collapsable-icon'), settings.animate)
      }


      return false;
    });
  });

  function handleClick($container, $clickImage, animate) {
    if ($container.hasClass("collapsable-closed")) {
      if (animate) {
        openIt($container, $clickImage, false);
      }
      else {
        openIt($container, $clickImage, true);
      }
    }
    else {
      if (animate) {
        closeIt($container, $clickImage, false);
      }
      else {
        closeIt($container, $clickImage, true);
      }
    }
  }

  function openIt($container, $clickImage, fast) {
    if (fast) {
      $container.show();
    }
    else {
      $container.animate({ height: 'show', opacity: 'show' }, 'medium');
    }
    $clickImage.attr("src", _ImageFolder + "minus.gif").attr("alt", "close")
    $container.removeClass("collapsable-closed");
    $container.addClass("collapsable-open");
  }

  function closeIt($container, $clickImage, fast) {

    if (fast) {
      $container.hide();
    }
    else {
      $container.animate({ height: 'hide', opacity: 'hide' }, 'medium');
    }

    $clickImage.attr("src", _ImageFolder + "plus.gif").attr("alt", "open")
    $container.removeClass("collapsable-open");
    $container.addClass("collapsable-closed");
  }
};

