﻿
(function($) {

    $.fn.ixImageGallery = function(limit, selectedImage, baseUrl, imageUrlBase) {
        var gal = this;

        var initializePagingDivs = function(group) {
            var dataKey = 'pic-gallery-paging-initialized';

            if (group.data(dataKey) != null)
                return;

            var currentItem = null;
            var page = 0;

            group.children('a').each(function(i) {
                if (currentItem == null) {
                    currentItem = $('<div></div>').hide();
                    group.append(currentItem);
                }

                currentItem.append($(this).attr('page', page));

                if (((i + 1) % limit) == 0) {
                    currentItem = null;
                    page++;
                }
            });

            group.data(dataKey, true);
        };

        var showPreviewImage = function(source) {
			if (!source) return;
			
            var p = $('.preview', gal).unbind('click')
						.click(function() {
							var biggerImage = $('<div/>').css({
													width: '800px',
													padding: '10px',
													background: '#fff',
													border: 'solid 3px #000',
													textAlign: 'center'
												})
												.html('<div>Click anywhere to close the dialog</div>')
												.append(
													$('<img/>').attr('src', imageUrlBase + 'GetImage.aspx?ImgType=1&Width=800&Height=600&ImageID=' + source.attr('id'))
												);
							
							var overlay = $('<div/>').click(function() { return false; })
												.hide()
												.css({
													position: 'absolute',
													zIndex: '1000',
													opacity: 0.5,
													backgroundColor: '#000',
													left: 0,
													top: 0
												});
							
							var positionElements = function() {
								var s = {
									top: $(window).scrollTop(),
									left: $(window).scrollLeft()
								};
								var totalWidth = $(window).width();
								var totalHeight = $(window).height();
								
								var targetWidth = biggerImage.outerWidth();
								var targetHeight = biggerImage.outerHeight();
								
								overlay.width(totalWidth)
												.height(totalHeight)
												.css({
													left: s.left + 'px',
													top: s.top + 'px'
												});
								
								biggerImage.stop(true, false)
									.animate({
										left: ((totalWidth - targetWidth) / 2 + s.left) + 'px',
										top: ((totalHeight - targetHeight) / 2 + s.top) + 'px'
									}, 'slow', 'swing');
							};

							$('body')
								.scroll(positionElements)
								.append(overlay.css('opacity', 0.1))
								.append(
									biggerImage.css({ opacity: 0.1, position: 'absolute', zIndex: '1001' }).hide()
								);
							$(window).resize(positionElements)
								.scroll(positionElements);
							$(document).scroll(positionElements);
							positionElements();
							
							var clickHandler = function() {
								$('body').unbind('mousemove', positionElements);
								$(window).unbind('resize', positionElements);
								$('body').unbind('scroll', positionElements);
								
								overlay.fadeTo('slow', 0.1, function() { $(this).remove(); });
								biggerImage.fadeTo('normal', 0.1, function() { $(this).remove(); });
								
								return false;
							};

							overlay.show()
								.fadeTo('slow', 0.5, function() {
									biggerImage.show()
										.fadeTo('slow', 1, function() {
											$('img', biggerImage).load(function() {
												positionElements();
												$(this).unbind();
											});
											$('body').mousemove(positionElements);
											overlay.click(clickHandler);
											biggerImage.click(clickHandler);
										});
								});
							
							return false;
							
						});

            var url = imageUrlBase + 'GetImage.aspx?ImgType=1&Type=6&ImageID=' + source.attr('id')
									+ '&Width=' + p.width() + '&Height=' + p.height();

            if (p.css('background-image') == url)
                return;

            $('.image-title', gal).html(source.attr('title'));
            p.fadeTo('fast', 0.1, function() {
                p.css('background', 'url(' + url + ') center center no-repeat');
                p.fadeTo('slow', 1);
            });
            
            if (baseUrl == '') return;

            var urljoin = '?';

            if (baseUrl.indexOf('?') >= 0) urljoin = '&';
            $('.direct-link', gal)
						.empty()
						.append(
							$('<a>Direct Link</a>')
								.attr('href', baseUrl + urljoin + 'ImageID=' + source.attr('id'))
						);

        };

        var showPage = function(index) {
            var selectedGroup = $('.gallery-options', gal).val();
            var pageContainer = $('.thumb-container .group-' + selectedGroup, gal);
            var visiblePage = $('div:visible', pageContainer);

            var page = $('div:eq(' + index + ')', pageContainer).show();

            $('a', page).each(function() {
                var bg = $(this).css('background');

                if ((bg != '') && (bg != null))
                    return;

                var url = imageUrlBase + 'GetImage.aspx?ImgType=1&Type=6&ImageID=' + $(this).attr('id')
										+ '&Width=' + $(this).width() + '&Height=' + $(this).height();

                $(this)
							.css('background', 'url(' + url + ') center center no-repeat')
							.click(function() {
							    showPreviewImage($(this));
							    return false;
							});
            });

            showPreviewImage($('a:first', page));
            page.hide();

            var showNewPage = function() {
                visiblePage.hide();
                page.show().fadeTo(1, 0.1, function() {
                    $(this).fadeTo('slow', 1);
                });
            };

            if (visiblePage.length == 0) showNewPage();
            else visiblePage.fadeTo('slow', 0.1, showNewPage);
        };

        var getCurrentPage = function(group) {
            var g = group || $('.thumb-container>div:visible', gal);
            return g.data('current-page');
        };

        var movePager = function(index) {
            var currentPage = getCurrentPage();

            var items = $('.pager a', gal)
											.removeClass('selected')
												.eq(index + 1).addClass('selected')
											.end();
            var lastIndex = items.length - 3;

            if (index == 0) items.eq(0).addClass('disabled').end();
            else items.eq(0).removeClass('disabled').end();

            if (lastIndex == index) items.eq(lastIndex + 2).addClass('disabled').end();
            else items.eq(lastIndex + 2).removeClass('disabled').end();

            $('.thumb-container>div:visible', gal).data('current-page', index);
            showPage(index);
        };

        var buildPaging = function(group) {
            var numberOfItems = group.children('div').length;

            $('.pager', gal).each(function() {
                var pager = $(this);

                if (group.data('current-page') == null)
                    group.data('current-page', 0);

                pager.empty();

                if (numberOfItems <= 1)
                    return;

                pager.append($('<a href="#">Prev</a>').click(function() {
                    if ($(this).hasClass('disabled'))
                        return false;

                    var currentItem = getCurrentPage(group);
                    movePager(currentItem - 1);
                    return false;
                }).addClass('disabled')
							);

                for (var i = 0; i < numberOfItems; i++) {
                    var item = $('<a href="#"></a>').click(function() {
                        if ($(this).hasClass('selected'))
                            return false;

                        var index = $(this).data('page');
                        movePager(index);
                        return false;
                    }).html(i + 1).data('page', i);

                    if (i == getCurrentPage(group))
                        item.addClass('selected');

                    pager.append(item);
                }

                pager.append($('<a href="#">Next</a>').click(function() {
                    if ($(this).hasClass('disabled'))
                        return false;

                    var currentItem = getCurrentPage(group);
                    movePager(currentItem + 1);
                    return false;
                })
							);
            });
        };

        var showSelectedGallery = function(cancelMovePager) {
            var d = $('.thumb-container>div:visible', gal);
            var action = function() {
                var selectedGroup = $('.gallery-options', gal).val();
                var group = $('.thumb-container .group-' + selectedGroup, gal);

                d.hide();
                initializePagingDivs(group);
                buildPaging(group);

                var currentPage = getCurrentPage(group);

                group.show().fadeTo(1, 1);

                if (cancelMovePager != true) {
                    showPage(currentPage);
                    movePager(currentPage);
                }
            };

            if (d.length == 0) action();
            else d.fadeTo('slow', 0.1, action);
        };

        var galleryOpt = $('.gallery-options', gal);

        if (selectedImage != 0) {
            selectedImage = $('.thumb-container a[href=' + selectedImage + ']', gal);
            var group = selectedImage.parent().attr('class');

            group = group.substring(group.indexOf('-') + 1, group.length);
            galleryOpt.val(group);
        }
        else
            selectedImage = null;

        galleryOpt.change(showSelectedGallery);
        showSelectedGallery((selectedImage != null));

        if (selectedImage != null) {
            var pageNum = parseInt(selectedImage.attr('page'));

            movePager(pageNum);
            showPreviewImage(selectedImage);
        }
    };

})(jQuery);

