﻿
/*------------------------------------------------------------jquery.imageSliderPager.js----------------------------------------------------*/
(function($) {
    $.fn.imageSliderPager = function(options) {

        var defaults = {
            itemsPerWindow: 3, shiftSize: 1, orientation: 'h', Paging: true
        };

        var settings = $.extend({}, defaults, options);
        var shiftPointer = 0;
        var itemOuterWidth = 0, itemOuterHeight, itemwidth, itemheight;
        /*________________________________________________________  Public functions   ___________________________________________________________*/
        function slideTo(list, shift, direction) {
            if (settings.orientation == 'h') {
                list.stop().animate({ 'marginLeft': shift * direction + 'px' });
            }
            else {
                list.stop().animate({ 'marginTop': shift * direction + 'px' });
            }
        }
        /*________________________________________________________  Public functions  ___________________________________________________________*/
        return this.each(function() {
            /*________________________________________________________  Main   ___________________________________________________________*/
            $list = $(this);
            itemOuterWidth = $list.children('li').eq(0).outerWidth();
            itemOuterHeight = $list.children('li').eq(0).outerHeight();
            itemheight = $list.children('li').eq(0).height();
            itemwidth = $list.children('li').eq(0).width();
            
            var numListItems = $('li', $list).length;
//            if (settings.orientation == 'h') {
//                $list.css({ 'width': (itemOuterWidth) * numListItems + 'px' });
//            }
//            else {
//                $list.css({ 'height': (itemOuterHeight) * numListItems + 'px' });
//            }
            $list.wrap('<div class="slideShowPagingContainer" ></div>');

            if (settings.orientation == 'h') {
                try {
                    $('.slideShowPagingContainer').css({ 'overflow': 'hidden', 'height': itemOuterHeight + 'px',
                        'width': settings.itemsPerWindow * (itemOuterWidth) + 'px'
                    });
                }
                catch (Error) { }
            }
            else {
                $('.slideShowPagingContainer').css({ 'overflow': 'hidden'/*, 'width': itemwidth + 'px'*/, 'height': settings.itemsPerWindow * (itemOuterHeight) + 'px' });


            }

            /*generating the numbers dynamically*/

            if (settings.Paging) {
                $('<ul class="numbers"></ul>').appendTo('div.pager', $('.slideShowPagingContainer'));
                var numPages = Math.ceil(numListItems / settings.itemsPerWindow);
                for (var pageIndex = 1; pageIndex <= numPages; pageIndex++) {
                    $('.pager .numbers').append('<li > <a >' + pageIndex + '</a></li>');
                }
            }
            /*generating the numbers dynamically*/


            /*________________________________________________________  Main   ___________________________________________________________*/

            /*________________________________________________________  Event Handlers   ___________________________________________________________*/
            $('.pager .numbers li').eq(0).toggleClass('selected')
            
            $('.pager .numbers li').click(function() {
                var clickedPage = $('li', $('.pager .numbers')).index($(this)) + 1;
                slideTo($list, settings.itemsPerWindow * (itemOuterWidth) * (clickedPage - 1), -1);
                shiftPointer = (clickedPage - 1) * settings.itemsPerWindow;
                $('.pager .numbers li').removeClass('selected'); $(this).addClass('selected');
            });
            $('.slideShowPagingContainer').prev('.pager').append('<a  class="nav-quick next">Next</a><a  class="nav-quick prev">Prev</a>');

            if (settings.orientation == 'h') {

            }
            else {

                $('.nav-quick.next').css('top', (parseInt($('.slideShowPagingContainer').css('height'), 10)) +
                parseInt($('.pager').css('height'), 10) + parseInt($('.pager').css('marginTop'), 10) + 10 + 'px');

            };

            $('.pager a.nav-quick ').click(function() {

                if ($(this).hasClass('prev')) {
                    if (shiftPointer == 0) { return false; }
                    shiftPointer -= settings.shiftSize;
                    if (settings.orientation == 'h') {
                        slideTo($list, shiftPointer * settings.shiftSize * (itemOuterWidth), -1);
                    }
                    else {
                        slideTo($list, shiftPointer * settings.shiftSize * (itemOuterHeight), -1);
                    }

                }
                else {
                    if ($(this).hasClass('next')) {
                        if (numListItems - shiftPointer < 3) { return false; }
                        shiftPointer += settings.shiftSize;
                        if (settings.orientation == 'h') {
                            slideTo($list, shiftPointer * settings.shiftSize * (itemOuterWidth), -1);
                        }
                        else {

                            slideTo($list, shiftPointer * settings.shiftSize * (itemOuterHeight), -1);
                        }

                    }//end of if
                }//end of else
            });//end of click
            /*________________________________________________________  Event Handlers   ___________________________________________________________*/
        });
    };
})(jQuery);


/*------------------------------------------------------------jquery.imageSliderPager.js----------------------------------------------------*/
