/*
 * jQuery MiniGallery 0.1
 *
 * converts HTML image list into mini image gallery WITHOUT enlargement
 *
 * Based on jQuery Popeye by Christoph Schuessler (http://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.
 *
 */
(function ($) {

    
    ////////////////////////////////////////////////////////////////////////////
    //
    // $.fn.minigallery
    // minigallery definition
    //
    ////////////////////////////////////////////////////////////////////////////
    $.fn.minigallery = function (options) {
    
        // set context vars
        //----------------------------------------------------------------------
        var obj = $(this);
        var enPlaceholder = $('<div />');
                   
        
        // build main options before element iteration
        //----------------------------------------------------------------------
        var opts = $.extend({}, $.fn.minigallery.defaults, options);
        
        
        // firebug console output
        //----------------------------------------------------------------------
        function debug(text) {
            if (window.console && window.console.log) {
                window.console.log(text);
            }
        };
             

        ////////////////////////////////////////////////////////////////////////
        //
        // -> init
        // apply minigallery to all calling instances
        //
        ////////////////////////////////////////////////////////////////////////
        return this.each(function(){
            
            
            ////////////////////////////////////////////////////////////////////////
            //
            // $.fn.minigallery.display
            // display thumbnail on stage, update toolbar
            //
            ////////////////////////////////////////////////////////////////////////
            function display(i, transition) {
                
                // optional parameter transition
                transition = transition || false;

                // set selected image as background image of stage
                //------------------------------------------------------------------
                /*
				var stageIm = {
                    backgroundImage:    'url(' + im.small[i] + ')',
                    backgroundPosition: 'center'
                };
                //if set, show transition on change of image
                if(transition) {
                    ppyStage.fadeTo(100,0,function(){
                        $(this).css(stageIm).fadeTo(100,1);
                    });
                }
                else {
                    ppyStage.css(stageIm);
                }
				*/
				ppyImgLink.attr("href", im.large[i]).attr("title", im.linktitle[i]);
				ppyImg.attr("width", im.width[i]).attr("height", im.height[i]);
				ppyToolsWrap.css("width", ppyStageWrap.css("width"));
                if(transition) {
                    ppyImg.fadeTo(150,0,function(){
                        $(this).attr("src", im.small[i]).fadeTo(150,1);
                    });
                }
                else {
                    ppyImg.attr("src", im.small[i]);
                }
				
				
				
                // update image info area
                //------------------------------------------------------------------
                ppyCap.text(im.title[i]);        // caption
                ppyTotal.text(tot);        // total images
                ppyCur.text(cur + 1);    // current image number
            };

            
            
            ////////////////////////////////////////////////////////////////////////
            //
            // do stuff
            //
            ////////////////////////////////////////////////////////////////////////
            
            
            // minigallery vars
            //------------------------------------------------------------------
            //define image object arrays
            var im  = {
                small: [],
                title: [],
                large: [],
				linktitle: [],
                width: [],
                height: []
            };
            var maxWidth = 1000;
            var maxHeight = 1000;
            
            obj.find('li').each(function(i){
                im.small[i] = $(this).find('img').attr('src');   // the thumbnail url
                im.title[i] = $(this).find('img').attr('alt');   // the image title
                im.large[i] = $(this).find('a').attr('href');    // the image url
                im.linktitle[i] = $(this).find('a').attr('title');// the enlargment link title
                im.width[i] = $(this).find('img').attr("width");       // the image width
                im.height[i] = $(this).find('img').attr("height");     // the image height
                
            });
            var cur = 0;                 // array index of currently displayed image
            var tot = im.small.length;   // total number of images
            
            
            // minigallery dom setup
            //------------------------------------------------------------------
            
            // dispose of original image list
            obj.find('ul').remove();
            
            // crate html nodes
            var ppyStageWrap = $('<div class="minigallery-stagewrap" />');
            var ppyStage     = $('<div class="minigallery-stage" />');
			var ppyImgLink   = $('<a class="minigallery-img-link" href="#" />');
			var ppyImg       = $('<img class="minigallery-img" alt=""/>');
            var ppyToolsWrap = $('<div class="minigallery-tools-wrap" />');
            var ppyTools     = $('<div class="minigallery-tools" />');
            var ppyCount     = $('<span class="minigallery-count" />');
            var ppyCur       = $('<em class="minigallery-cur" />');
            var ppyTotal     = $('<em class="minigallery-total" />');
            var ppyPrev      = $('<a href="#" class="minigallery-prev">' + opts.plabel + '</a>');
            var ppyNext      = $('<a href="#" class="minigallery-next">' + opts.nlabel + '</a>');
            var ppyCap       = $('<div class="minigallery-cap" />');
            
            // build DOM tree
            obj.append(ppyStageWrap);
            ppyStageWrap.append(ppyStage);
			ppyStage.append(ppyImgLink);
			ppyImgLink.append(ppyImg);
            ppyStageWrap.after(ppyToolsWrap);
            ppyToolsWrap.append(ppyTools);
            ppyTools.append(ppyPrev);
            ppyTools.append(ppyCount);
            ppyCount.append(ppyCur);
            ppyCount.append(ppyTotal);
            ppyCur.after(opts.oflabel);
            ppyTools.append(ppyNext);
            ppyTools.after(ppyCap);
            
    
            // minigallery css setup
            //------------------------------------------------------------------
            var cssCompactPpy = {
                position:       'relative',
                overflow:       'hidden',
                height:         'auto',         //overwrite fallback height restrictons
                overflow:       'hidden',       //remove scrolling behaviour
                top:            0
            };


            // style minigallery
            obj.css(cssCompactPpy);
            if(opts.jclass) {
                obj.addClass(opts.jclass);
            }
            
            // display first image
            display(cur);
            
            
            // event handlers
            //------------------------------------------------------------------
            
            // previous image button
            ppyPrev.click(function(){
                if( cur <= 0 ) {
                    cur = tot - 1;
                } else {
                    cur--;
                }
                display(cur, true);
                return false;
            });
            // next image button
            ppyNext.click(function(){
                if( cur < ( tot - 1) ) {
                    cur++; 
                } else {
                    cur = 0;
                }
                display(cur, true);
                return false;
            });
            
            
        });
    };
    
    ////////////////////////////////////////////////////////////////////////////
    //
    // $.fn.minigallery.defaults
    // set default  options
    //
    ////////////////////////////////////////////////////////////////////////////
    $.fn.minigallery.defaults = {
        jclass:     'minigallery-hasjs',    //class to be applied to minigallery-box when the browser has activated JavaScript (to overwrite fallback styling)
        nlabel:     'next',				// label for next button
        plabel:     'previous',			// label for previous button
        oflabel:    ' of '				// label for image count text (e.g. 1 of 14)
    };
    
// end of closure, bind to jQuery Object
})(jQuery);