/*
 * jQuery Popeye 1.0 - http://dev.herr-schuessler.de/jquery/popeye/
 *
 * converts a HTML image list in image gallery with inline enlargement
 *
 * Copyright (C) 2008,2009 Christoph Schuessler (schreib@herr-schuessler.de)
 * 
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 *
 * 2009 customized for tognum needs - p//mod germany
 */
(function($) {
    $.fn.popeye = function(options) {
        var obj = $(this);
        var opts = $.extend({},
        $.fn.popeye.defaults, options);
        function debug(msg) {
            if (window.console && window.console.log && opts.debug) {
                window.console.log(msg)
            }
        }
        return this.each(function() {
            function display(i, transition) {				
                transition = transition || false;
                var stageIm = {
                    backgroundImage: 'url(' + im.small[i] + ')',
                    backgroundPosition: 'center'
                };
                if (transition) {
                    ppyStageWrap.addClass(opts.lclass);
                    ppyStage.fadeTo(100, 0,
                    function() {
                        updateCounter(i);
                        ppyStage.css(stageIm)
                    })
                } else {
                    ppyStage.css(stageIm);
                    updateCounter(i)
                }
                preloader.onload = function() {
                    ppyStageWrap.removeClass(opts.lclass);
                    if (transition) {
                        ppyStage.fadeTo(100, 1);
                        //displayCaption(im.title[i])
                    }
                };
                if (enlarged) {
                    enlarge(i)
                } else {
                    preloader.src = im.small[i];
                    debug('$.fn.popeye.display: Thumbnail ' + i + ' loaded');
                    preloader2.onload = function() {
                        debug('$.fn.popeye.display: Image ' + i + ' loaded')
                    };
                    preloader2.src = im.large[i]
                }
            }
            function updateCounter(i) {
                ppyTotal.text(' ' + tot);
                ppyCur.text((i + 1) + ' ');
                debug('$.fn.popeye.updateCounter: Displaying image ' + (i + 1) + ' of ' + tot)
            }
            function preloadAdjacent(i) {
                var next = i;
                if (next < (tot - 1)) {
                    next++
                } else {
                    next = 0
                }
                preloaderNext.onload = function() {
                    debug('$.fn.popeye.preloadAdjacent: Next image (' + next + ') loaded')
                };
                preloaderNext.src = im.large[next];
                var prev = i;
                if (prev <= 0) {
                    prev = tot - 1
                } else {
                    prev--
                }
                preloaderPrev.onload = function() {
                    debug('$.fn.popeye.preloadAdjacent: Previous image (' + prev + ') loaded')
                };
                preloaderPrev.src = im.large[prev]
            }
            function enlarge(i) {
                enlarged = true;
                debug('$.fn.popeye.enlarge: Entering ENLARGED MODE');
                ppyStageWrap.addClass(opts.lclass);
                ppyStage.fadeTo((opts.duration / 2), 0);
                obj.addClass(opts.eclass);			
				
                preloader.onload = function() {
                    ppyStageWrap.removeClass(opts.lclass);
                    var imWidth = preloader.width;
                    var imHeight = preloader.height;
                    var cssStageTo = {
                        width: imWidth,
                        height: imHeight
                    };
                    var cssStageIm = {
                        backgroundImage: 'url(' + im.large[i] + ')',
                        backgroundPosition: 'left top'
                    };				
					
					
                    //hideCaption(true);
                    ppyStage.animate(cssStageTo, {
                        queue: false,
                        duration: opts.duration,
                        easing: opts.easing,
                        complete: function() {
							obj.css("width",opts.bigWidth+"px");	
							obj.css("height",opts.bigHeight+"px");
							if(opts.contentMoveAfter)
							{
								if (opts.caption) {
									$('#'+opts.wrapdiv).css("height",parseInt(opts.bigHeight)+60+"px");
								}
								else {
									$('#'+opts.wrapdiv).css("height",opts.bigHeight+"px");
								}					
								
								
							}						
																		
                            ppySwitch.removeClass('ppy-enlarge');
                            ppySwitch.addClass('ppy-compact');
							ppySwitch.css("left",opts.bigWidth-17+"px");
							ppySwitch.css("top","0");
                            ppySwitch.unbind('click');
                            ppySwitch.click(function() {
                                compact(cur);
                                return false
                            });
                            ppyStageWrap.click(function() {
                                compact(cur);
                                return false
                            });
                            ppyStageWrap.attr('title', opts.clabel);
                            updateCounter(i);
                            $(this).css(cssStageIm).fadeTo((opts.duration / 2), 1);
                            displayCaption(im.largeRel[i]);
                            preloadAdjacent(i)
                        }
                    })
                };
                preloader.src = im.large[i]
            }
            function compact(i) {
                enlarged = false;
                debug('$.fn.popeye.compact: Entering COMPACT MODE');
                //hideCaption(true);
				
                ppyStage.fadeTo((opts.duration / 2), 0).animate(cssCompactStage, {
                    queue: false,
                    duration: opts.duration,
                    easing: opts.easing,
                    complete: function() {						
						obj.css("width",opts.smallWidth+"px");
						ppyStage.css("width",opts.smallWidth+"px");	
						ppyStage.css("height",opts.smallHeight+"px");
						if(opts.contentMoveAfter)
						{
							$('#'+opts.wrapdiv).css("height",opts.smallHeight+"px");
						}	
                        obj.removeClass(opts.eclass);
                        ppySwitch.addClass('ppy-enlarge');
                        ppySwitch.removeClass('ppy-compact');
						ppySwitch.css("left",opts.smallWidth-17+"px");
						ppySwitch.css("top",opts.smallHeight-16+"px");
                        ppySwitch.unbind('click');
                        ppySwitch.click(function() {
                            enlarge(cur);
                            return false
                        });
                        ppyStageWrap.removeAttr('title');
                        ppyStageWrap.unbind('click');
                        display(cur);
                        $(this).fadeTo((opts.duration / 2), 1,
                        function() {
                            displayCaption(im.title[i])
                        })
                    }
                })
            }
            function displayCaption(cap) {
                ppyText.text(cap);
                if (opts.countpos == 'caption') {
                    updateCounter(cur)
                }
				/*
                if (cap) {
                    var cssPpyCaption = {
                        visibility: 'visible',
                        width: ppyStage.outerWidth()
                    };
                    ppyCap.css(cssPpyCaption);
                    ppyCap.animate({
                        "height": ppyTextWrap.outerHeight()
                    },
                    {
                        queue: false,
                        duration: 90,
                        easing: opts.easing
                    })
                } else {
                    //hideCaption(true)
                }
                */
            }
            function hideCaption(transition) {
                transition = transition || false;
                var cssPpyCaption = {
                    visibility: 'visible',
                    overflow: 'hidden',
                    width: maxWidth
                };
                var duration = false;
                if (transition) {
                    duration = 70
                } else {
                    duration = 0
                }
                ppyCap.animate({
                    "height": '0px'
                },
                {
                    queue: false,
                    duration: duration,
                    easing: opts.easing,
                    complete: function() {
                        ppyCap.css(cssPpyCaption)
                    }
                })
            }
            function init() {		
				
				
                obj.find('li').each(function(i) {
                    im.width[i] = $(this).find('img').width();
                    im.height[i] = $(this).find('img').height();
                    debug('$.fn.popeye.init -> im.width[' + i + ']: ' + im.width[i] + ', im.height[' + i + ']: ' + im.height[i]);
                    if (maxWidth > im.width[i]) {
                        maxWidth = im.width[i]
                    }
                    if (maxHeight > im.height[i]) {
                        maxHeight = im.height[i]
                    }
                });				
                debug('$.fn.popeye.init -> maxWidth: ' + maxWidth + ', maxHeight: ' + maxHeight);
                cssCompactStage = {
                    width: maxWidth,
                    height: maxHeight
                };
                cssPpyTools = {
                    //opacity: 0
                };
                debug('$.fn.popeye.init -> Starting in COMPACT MODE');
                obj.find('ul').remove();
                if (opts.nojsclass) {
                    obj.find('.' + opts.nojsclass).remove()
                }
                obj.append(ppyStageWrap);
                ppyStageWrap.append(ppyStage);
                ppyStage.append(ppyTools);
                if (opts.countpos == 'overlay') {
                    ppyStage.append(ppyCount)
                }
                ppyTools.append(ppyPrev);
				
				// todo
                ppyTools.append(ppySwitch);
				ppySwitch.css("left",opts.smallWidth-17+"px");
				ppySwitch.css("top",opts.smallHeight-16+"px");
				
                ppyTools.append(ppyNext);
                if (opts.caption) {
                    ppyStageWrap.after(ppyCap)
                }
                ppyCount.append(ppyCur);
                ppyCount.append(ppyTotal);
                ppyCur.after(opts.oflabel);
                ppyCap.append(ppyTextWrap);
                if (opts.countpos == 'caption') {
                    ppyTextWrap.prepend(ppyCount)
                }
                ppyTextWrap.append(ppyText);
                if (opts.jsclass) {
                    obj.addClass(opts.jsclass)
                }
                if (opts.direction == 'left') {
                    ppyTools.addClass(opts.dlclass)
                } else if (opts.direction == 'right') {
                    ppyTools.addClass(opts.drclass)
                }
                ppyStage.css(cssCompactStage);
				ppyStage.css("width",opts.smallWidth+"px");	
				ppyStage.css("height",opts.smallHeight+"px");
				
                ppyTools.css(cssPpyTools);
                display(cur);
                displayCaption(im.title[cur])
                var imHeight = ppyStageWrap.outerHeight();
                var imWidth = ppyStageWrap.outerWidth();				
                var imTop = obj.offset().top - parseInt(obj.css('marginTop'), 10);
                var imLeft = obj.offset().left - parseInt(obj.css('marginLeft'), 10);
                var imRight = $(window).width() - (obj.offset().left + imWidth) - parseInt(obj.css('marginRight'), 10);
                var imFloat = obj.css('float');
                var imMarginTop = obj.css('margin-top');
                var imMarginRight = obj.css('margin-right');
                var imMarginBottom = obj.css('margin-bottom');
                var imMarginLeft = obj.css('margin-left');
                var cssPlaceholder = {
                    height: imHeight,
                    width: imWidth,
                    float: imFloat,
                    marginTop: imMarginTop,
                    marginRight: imMarginRight,
                    marginBottom: imMarginBottom,
                    marginLeft: imMarginLeft
                };
                var cssAbsolutePpy = {
                    position: 'absolute',
                    top: imTop,
                    zIndex: '100'
                };
                if (opts.direction == 'left') {
                    cssAbsolutePpy.left = imLeft
                } else if (opts.direction == 'right') {
                    cssAbsolutePpy.right = imRight
                }
                ppyPlaceholder.css(cssPlaceholder);
                obj.after(ppyPlaceholder);
                obj.prependTo($('#'+opts.wrapdiv+' .ppy-placeholder'));
                obj.css(cssAbsolutePpy);
		
				
                obj.hover(function(e) {
                    //displayCaption(im.title[cur])
                },
                function(e) {
                    //hideCaption(true)
                });	
				
				// next image on image click
				
				if (tot > 1) {
					ppyStage.click(function(){
						if (cur < (tot - 1)) {
							cur++;
						}
						else {
							cur = 0;
						}
						display(cur, true);
						changeNavStatus(cur);
						return false;
					});
				}
				else
				{
					$('.ppy-nav').css("display","none");
				}
				
				
				function changeNavStatus(cur) {
									
					$("#"+opts.navidiv+" a").each(function(i){
						if(i==cur) {
							$(this).find(":first").attr("src",opts.navigifOn);	
						}
						else
						{
							$(this).find(":first").attr("src",opts.navigifOff);	
						}
						
					});
				}	
				
				// generate navi bar				
				if(tot > 1)
				{
					
					for(i=0;i<tot;i=i+1)
					{
						if(i==0)
						{
							$("#"+opts.navidiv).append('<a href="#" id="'+opts.navidiv+i+'" rel="'+i+'"><img src="'+opts.navigifOn+'" /></a>');
				
						}
						else
						{
							$("#"+opts.navidiv).append('<a href="#" id="'+opts.navidiv+i+'" rel="'+i+'"><img src="'+opts.navigifOff+'" /></a>');
					
						}	

					}
				}				
		
				
				$("#"+opts.navidiv+" a").click(function(e){					
					cur = $(this).attr("rel");
					
					$("#"+opts.navidiv+" a").each(function(i){
						if(i==cur) {
							$(this).find(":first").attr("src",opts.navigifOn);	
						}
						else
						{
							$(this).find(":first").attr("src",opts.navigifOff);	
						}
						
					});
					
					display(cur, true);					
					return false;
				}); 
				
                ppySwitch.click(function() {
                    enlarge(cur);
                    return false
                })
				
            }			
            var preloader = new Image();
            var preloader2 = new Image();
            var preloaderNext = new Image();
            var preloaderPrev = new Image();
            var preloaders = [];
            var ppyPlaceholder = $('<div class="ppy-placeholder" />');
            var ppyStageWrap = $('<div class="ppy-stagewrap" />');
            var ppyStage = $('<div class="ppy-stage" />');
            var ppyTools = $('<div class="ppy-tools" />');
            var ppyPrev = $('<div class="ppy-prev">' + opts.plabel + '</div>');
            var ppyNext = $('<div class="ppy-next">' + opts.nlabel + '</div>');
            var ppySwitch = $('<div class="ppy-enlarge">' + opts.blabel + '</div>');
            var ppyCap = $('<div class="ppy-cap" />');
            var ppyCount = $('<div class="ppy-count" />');
            var ppyCur = $('<em class="ppy-cur" />');
            var ppyTotal = $('<em class="ppy-total" />');
            var ppyTextWrap = $('<div class="ppy-textwrap" />');
            var ppyText = $('<span class="ppy-text" />');
            var im = {
                small: [],
                title: [],
                large: [],
                width: [],
                height: [],
				largeRel: []
            };
            var maxWidth = 10000;
            var maxHeight = 10000;
            var cur = 0;
            var tot = obj.find('img').length;
            var togo = tot;
            debug('$.fn.popeye -> ' + tot + ' thumbnails found.');
            var cssCompactStage = {};
            var cssPpyTools = {};
            var enlarged = false;
            obj.find('li').each(function(i) {
                im.small[i] = $(this).find('img').attr('src');
                im.title[i] = $(this).find('img').attr('alt');
                im.large[i] = $(this).find('a').attr('href');
				im.largeRel[i] = $(this).find('a').attr('rel');
                debug('$.fn.popeye -> Loading "' + im.small[i] + '"');
                $(this).find('img').load(function() {
                    if (--togo < 1) {
                        debug('$.fn.popeye -> All thumbnails loaded!');
                        init()
                    }
                }).attr('src', im.small[i])
            })
        })
    };
    $.fn.popeye.defaults = {
        jsclass: 'ppy-js',
        nojsclass: 'ppy-no-js',
        eclass: 'ppy-expanded',
        lclass: 'ppy-loading',
        dlclass: 'ppy-left',
        drclass: 'ppy-right',
        direction: 'left',
        duration: 250,
        opacity: 0.7,
        countpos: 'overlay',
        caption: true,
        easing: 'swing',
        nlabel: '',
        plabel: '',
        oflabel: 'of',
        blabel: '',
        clabel: 'Click to close',
		smallWidth: '150',
		smallHeight: '108',
		bigWidth: '630',
		bigHeight: '312',
		wrapdiv: 'wrap-popeye',
		navidiv: 'navi-popeye',
		navigifOn: '',
		navigifOff: '',
		contentMoveAfter: false,
        debug: false
    }
})(jQuery);