$.fn.paging = function(options) {

    var settings = {
        totalSize: 10,
        pageSize: 5,
        pageIndex: 0,
        picsArray: null,
        pagerArea: null,
        subarray: true
    }

    if (options) $.extend(settings, options);

    return this.each(function() {

        var picsArea = $(this);
        var pageSize = settings.pageSize;
        var totalSize = settings.totalSize;
        var pageIndex = settings.pageIndex;
        var imagesArray = settings.picsArray;
        var pagerArea = $("#" + settings.pagerArea);
        var totalPages = Math.ceil(totalSize / pageSize);
        var subarray = settings.subarray;

        var start = 0;
        var takeSize = 0;

        function move() {
            var count = 0;
            var t = $.template('<div id="${giftId}" class="instock gift_outer" category="${category}" credits="${credits}">' +
                                '<img class="gift_inner" ms="${myspaceId}" alt="${name}" src="${imageUrl}"/>' +
                                '<div class="gift_caption">' +
                                '<span class="gift_price">' + '${name}' +
                                //'<div/>' +
                                '</span>' +
                                '<span class="gift_title">${credits}&nbsp;bucks</span>' +
                                '</div>' +
                                '</div>');
            picsArea.append("<div class='InnerContainer'>");

            if (subarray) {
                for (var i in imagesArray) {
                    for (var j in imagesArray[i]) {
                        if (count > (pageIndex * pageSize) && count < ((pageIndex + 1) * pageSize)) {
                            $(".InnerContainer").append(t, {
                                giftId: imagesArray[i][j]["giftId"],
                                name: imagesArray[i][j]["name"],
                                credits: imagesArray[i][j]["credits"],
                                imageUrl: imagesArray[i][j]["imageUrl"],
                                myspaceId: imagesArray[i][j]["msPhotoId"],
                                category: imagesArray[i][j]["category"]
                            });
                        }
                        count++;
                    }
                }
            } else {
                for (var i in imagesArray) {

                    if (count > (pageIndex * pageSize) && count < ((pageIndex + 1) * pageSize)) {

                        $(".InnerContainer").append(t, {
                            giftId: imagesArray[i]["giftId"],
                            name: imagesArray[i]["name"],
                            credits: imagesArray[i]["credits"],
                            imageUrl: imagesArray[i]["imageUrl"],
                            myspaceId: imagesArray[i]["msPhotoId"],
                            category: imagesArray[i]["category"]
                        });
                    }
                    count++;
                }
            }
            picsArea.append("</div>");
        }

        function makeMoveHtml() {

            var str = '<div id="ShowPager">';
            if (pageIndex == 0) {
                str += 'Prev';
            } else {
                str += '<a href="javascript:void(0)" rel="prev">Prev</a>';
            }
            str += ' | ';
            if ((pageIndex + 1) == totalPages) {
                str += 'Next';
            } else {
                str += '<a href="javascript:void(0)" rel="next">Next</a>';
            }
            str += '</div>';

            str += '<div id="ShowPages">Page ';
            str += pageIndex + 1;
            str += " of ";
            str += totalPages;
            str += "</div>";

            return str;
        }

        function attachEvents() {
            $(".gift_outer").each(function(index, el) {
                $(el).hover(function() {
                    $(el).addClass("gift_outer_onmouseover");
                    $(el).removeClass("gift_outer");
                    

                    $(el).bind("click", function() {
                        $(".gift_outer").removeClass("gift_outer_onclick");
                        $(el).addClass("gift_outer_onclick");
                        $(el).removeClass("gift_outer_onmouseover");

                        $("#selectedImgIcon").attr("src", $(el).find("img").attr("src"));
                        $("#selectedImgIcon").css({ "display": "block" });
                        $("#gift_for_friend").text($(el).find("img").attr("alt"));
                        
                        
                    });

                }, function() {
                    $(el).removeClass("gift_outer_onmouseover");
                    $(el).addClass("gift_outer");
                });
            });
        }

        function addLinkListener() {
            var next = $(pagerArea.find("a[rel='next']"));
            var prev = $(pagerArea.find("a[rel='prev']"));
            $(next).bind("click", function() {
                $(".InnerContainer").remove();
                pageIndex++;
                move();
                pagerArea.html(makeMoveHtml());
                addLinkListener();
                picsArea.find("img").css({ opacity: 0.33 });

                picsArea.find("img").load(function() {
                    picsArea.find("img").animate({ opacity: 1 }, 1500);
                });

                ////////////////////////////////////////////

                attachEvents();

                ////////////////////////////////////////////

            })
            $(prev).bind("click", function() {
                $(".InnerContainer").remove();
                pageIndex--;
                move();
                pagerArea.html(makeMoveHtml());
                addLinkListener();
                picsArea.find("img").css({ opacity: 0.33 });

                picsArea.find("img").load(function() {
                    picsArea.find("img").animate({ opacity: 1 }, 1500);
                });

                ///////////////////////////////////////////

                attachEvents();
               
                ///////////////////////////////////////////

            })
        }
        move();
        pagerArea.html(makeMoveHtml());
        addLinkListener();
    });
}