/*
*  Sliced Image Slider
*  Date - 8/23/2009
*  http://calyan.co.cc/
*
*  Make sure that number of slices should be a number which divides image/wrapper width excatly for 'topDown' and 'bottomUp' directions.
*  For 'leftRight' and 'rightLeft' directions number of slices should divide image/wrapper height excatly.
*
*  Markup
*  <div id="wrapper">
*      <ul>
*         <li><img src="images/1.gif" alt="" /></li>
*         <li><img src="images/2.gif" alt="" /></li>
*         <li><img src="images/3.gif" alt="" /></li>
*         <li><img src="images/4.gif" alt="" /></li>
*         <li><img src="images/5.gif" alt="" /></li>
*      </ul>
*   </div>
*
*/


/*
 * Modyfikacja na potrzeby comp-win.pl : cwmast
 * Dodana obsluga przewijania zawartosci html  - twrzony jest table z 3 divow
 * W przypadku updateu, mergowac
 * 
 * Zmiany:
 * - dodano parametr numberOfItems, ktory mowi o ilosci divow (zamiast na stale 3 div)
 */

(function($) {

    $.fn.slicer = function(options) {
        var defaults = {
            direction: 'bottomUp',
            duration: 1500,
            sliceDelay: 100,
            numberOfSlices: 5,
            nextID: 'next',
            prevID: 'prev',
            generateNavigate: true,
            numerOfItems: 3
        };

        var options = $.extend(defaults, options);
        var element = $(this).attr("id");
        var elementWidth = $(this).width();
        var elementHeight = $(this).height();

        var slice = new Object();
        slice.Name = element + "_slice";
        slice.Height = null;
        slice.Width = null;
        slice.InitialLeft = null;
        slice.InitialTop = null;
        slice.LeftLimit = null;
        slice.TopLimit = null;
        slice.nextSliceDirection = null;
        slice.prevSliceDirection = null;
        slice.nextNumber = 1;


        var currentImage = 0;
        var no_of_images = $("#" + element + " ul").children().size();
        var slicesGenerated = null;
        var nextImgSrc = null;

        switch (options.direction) {
            case "bottomUp":
                slice.Width = elementWidth / options.numberOfSlices;
                slice.Height = elementHeight;
                slice.InitialLeft = 0;
                slice.InitialTop = elementHeight;
                slice.TopLimit = 0;
                slice.LeftLimit = null;
                slice.nextSliceDirection = "bottomUp";
                slice.prevSliceDirection = "topDown";
                break;
            case "topDown":
                slice.Width = elementWidth / options.numberOfSlices;
                slice.Height = elementHeight;
                slice.InitialLeft = 0;
                slice.InitialTop = -(elementHeight);
                slice.TopLimit = 0;
                slice.LeftLimit = null;
                slice.nextSliceDirection = "topDown";
                slice.prevSliceDirection = "bottomUp";
                break;
            case "leftRight":
                slice.Height = elementHeight / options.numberOfSlices;
                slice.Width = elementWidth;
                slice.InitialLeft = -(elementWidth);
                slice.InitialTop = 0;
                slice.LeftLimit = 0;
                slice.nextSliceDirection = "leftRight";
                slice.prevSliceDirection = "rightLeft";
                slice.TopLimit = null;
                break;
            case "rightLeft":
                slice.Height = elementHeight / options.numberOfSlices;
                slice.Width = elementWidth;
                slice.InitialLeft = elementWidth;
                slice.InitialTop = 0;
                slice.LeftLimit = 0;
                slice.TopLimit = null;
                slice.nextSliceDirection = "rightLeft";
                slice.prevSliceDirection = "leftRight";
                break;
        }

        /*creating next and previous buttons*/
        var navigation = '';

        if (options.generateNavigate) {
          navigation = '<div><span id="' + options.prevID + '"><a href=\"javascript:void(0);\">Prev</a></span>';
          navigation += '<span id="' + options.nextID + '"><a href=\"javascript:void(0);\">Next</a></span></div>';
          $("#" + element).after(navigation);
        }

        /*init() section*/
        $("#" + element + " ul").css("display", "none");
        nextImgSrc = false;

        contentArray = getContent(element, currentImage, no_of_images, true, options.numberOfItems);

        var html_div = contentArray[0];
        currentImage = contentArray[1];

        slicesGenerated = createSlices(element, options.numberOfSlices, slice, nextImgSrc, true, html_div);
        animateSlices(slicesGenerated, slice.LeftLimit, slice.TopLimit, options.duration, options.sliceDelay, false);

        /*clicked on next*/
        $("#" + options.nextID).click(function() {
            nextImgSrc = false;

            contentArray = getContent(element, currentImage, no_of_images, true, options.numberOfItems);

            var html_div = contentArray[0];
            currentImage = contentArray[1];

            garbageCollectGeneratedSlices(slicesGenerated, slice, options, true);
            slicesGenerated = createSlices(element, options.numberOfSlices, slice, nextImgSrc, true, html_div);
            animateSlices(slicesGenerated, slice.LeftLimit, slice.TopLimit, options.duration, options.sliceDelay, false);
        });

        /*clicked on previous*/
        $("#" + options.prevID).click(function() {
            currentImage -= 6;

            if (currentImage < 0) {
              currentImage = (no_of_images + (currentImage % no_of_images));
            }

            nextImgSrc = false;

            contentArray = getContent(element, currentImage, no_of_images, false, options.numberOfItems);

            var html_div = contentArray[0];
            currentImage = contentArray[1];

            garbageCollectGeneratedSlices(slicesGenerated, slice, options, false);
            slicesGenerated = createSlices(element, options.numberOfSlices, slice, nextImgSrc, false, html_div);
            animateSlices(slicesGenerated, slice.LeftLimit, slice.TopLimit, options.duration, options.sliceDelay, false);

        });

    }; //end of function slicer


    function getContent(element, currentImage, no_of_images, next, numberOfItems)
    {
        var contentArray = new Array();

        for (i = 0; i < numberOfItems; i++) {
          contentArray.push($("#" + element + " ul").children().eq(currentImage));
          currentImage = calculateNext(currentImage, no_of_images);
        }

        var html_div = '<table border="0" cellpadding="0" cellspacing="0"><tr><td>';

        for( var i in contentArray){

          html_div += contentArray[i].html();
          html_div += '</td><td>';
        }

        html_div += '</table>';

        return [html_div, currentImage] ;
    }

    function calculateNext(currentImage, no_of_images)
    {
      currentImage = (currentImage + 1) % no_of_images;
      return currentImage;
    }

    /*Following are the utility functions used to get the effects. You can customize them as per your requirement.*/
    function garbageCollectGeneratedSlices(slices, slice, options, next) {
        var direction = null;
        if (next)
            direction = slice.nextSliceDirection;
        else
            direction = slice.prevSliceDirection;
        if (slices != null) {
            switch (direction) {
                case "bottomUp":
                    animateSlices(slices, null, (-slice.Height), options.duration, options.sliceDelay, true);
                    break;
                case "topDown":
                    animateSlices(slices, null, slice.Height, options.duration, options.sliceDelay, true);
                    break;
                case "leftRight":
                    animateSlices(slices, slice.Width, null, options.duration, options.sliceDelay, true);
                    break;
                case "rightLeft":
                    animateSlices(slices, (-slice.Width), null, options.duration, options.sliceDelay, true);
                    break;
                default:
                    for (var i = 0; i < slices.length; i++) {
                        $("#" + slices[i]).remove();
                    }
                    break;
            }
        }
    } //end of function

    function createSlices(parent, no_of_slices, slice, nextImgSrc, next, content) {
        var Left = null;
        var Top = null;
        if (next) {
            Left = slice.InitialLeft;
            Top = slice.InitialTop;
        }
        else {
            Left = -slice.InitialLeft;
            Top = -slice.InitialTop;
        }
        var slices = new Array(no_of_slices);

        for (var i = 0; i < slices.length; i++) {
            slices[i] = slice.Name + slice.nextNumber;

            ele = document.createElement('div');
            ele.setAttribute("id", slices[i]);

            ele.style.position = "absolute";
            ele.style.overflow = "hidden";
            ele.style.width = slice.Width + "px";
            ele.style.height = slice.Height + "px";
            ele.style.left = Left + "px";
            ele.style.top = Top + "px";

            if (nextImgSrc) {

              if (slice.InitialLeft == 0) {
                  ele.style.backgroundImage = "url(" + nextImgSrc + ")";
                  ele.style.backgroundPosition = (-Left) + "px 0px";
                  ele.style.backgroundRepeat = "no-repeat";
                  Left = Left + slice.Width;
              }
              else {
                  ele.style.backgroundImage = "url(" + nextImgSrc + ")";
                  ele.style.backgroundPosition = "0px " + (-Top) + "px";
                  ele.style.backgroundRepeat = "no-repeat";
                  Top = Top + slice.Height;
              };
            }

            if (parent) {
              document.getElementById(parent).appendChild(ele);
            }
            else {
              console.log('brak id dla elementu scrolla');
            }

            if (!nextImgSrc) {
              $("#" + slices[i]).html(content);
            }
            ++(slice.nextNumber);
        }
        return (slices);
    } //end of function

    function animateSlices(slices, leftLimit, topLimit, duration, delay, removeSlicesAfterAnimation) {
        var timing = 1;
        var currentElement = null;
        for (var i = 0; i < slices.length; i++) {
            currentElement = $("#" + slices[i]);
            animator.move(currentElement, leftLimit, topLimit, duration, timing, removeSlicesAfterAnimation);
            timing = timing + delay;
        }
        return true;
    } //end of function

})(jQuery);


var animator = new Object();
animator.move = function(ele, leftLimit, topLimit, duration, delay, remove) {
    setTimeout(function() {
        if (leftLimit == null) {
            if (remove) { ele.animate({ top: topLimit }, duration, null, function() { $(this).remove(); });  }
            else { ele.animate({ top: topLimit }, duration); }
        }
        else {
            if (remove) { ele.animate({ left: leftLimit }, duration, null, function() { $(this).remove(); }); }
            else { ele.animate({ left: leftLimit }, duration); }
        }
    }, delay);
}