/*
adfgallery.js - Gallery visualization for the Annette Diehl Website
*/
(function($) {
    /* Adf_holder class - wraps info of a single gallery image holder */
    var Adf_holder = function(el) {
        var self = this;
        
        //reference holder elements and properties
        self.el = el;
        self.margin = 30; // total margin of a holder
        self.img = el.find('img'); // image element of a holder
        self.caption1 = el.find('.caption1'); // first caption line
        self.caption2 = el.find('.caption2'); // second caption line
        
        //calculate total holder width - uses width attribute set from PHP
        self.get_width = function() { 
            return parseInt(self.img.attr('width')) + self.margin;
        };
        
        //by default holders are not opaque
        self.el.css('opacity', '0.4');
        
        // set this holder as current holder -> holder is set to opaque
        // boolean param animated - animate opacity change or not
        self.set_as_current = function(animated) {
            if (!animated) {
                self.el.css('opacity', '1');
            } else {
                self.el.animate({
                    'opacity': '1'
                }, 1000);
            }
        };
        
        // set the holder as no longer being current -> change opacity back
        // boolean param animated - animate opacity change or not
        self.set_inactive = function(animated) {
            if (!animated) {
                self.el.css('opacity', '0.4');
            } else {
                self.el.animate({
                    'opacity': '0.4'
                }, 1000);
            }
        }
    };
    
    /* Adf_gallery class- */
    Adf_gallery = function(func) {
        var self = this;
        
        // remember DOM elements for later use
        var elements = {
            gallery: $('.adf_gallery'),
            pic_holder: $('.adf_gallery .adf_pic')
        };
        
        //list of image holders
        var holderlist = [];
        //first image is the current one
        var currentholder_index = 0;
        
        //size of the left spacer(dom element that is inserted before the first image holder)
        var left_spacer_size;
        
        //width of the inner gallery div(holder widths + left spacer + some room for ie)
        var width = 0;
        //width of the outer gallery div(overflow is hidden and inner gallery div is placed inside)
        var bodywidth = 0;
        
        /*
         sets the current image
         
         params:
         index - the index of the current image in holderlist
         animated - slide the image to center or just position it there
        */
        var set_current = function(index, animated) {
            //if there is nothing to do exit here
            if (animated && index == currentholder_index) return;
            //calculate offset of inner gallery div
            var offset = left_spacer_size;
            var i;
            for (i = 0; i < index; i++) {
                offset += holderlist[i].get_width();
            }
            offset += Math.floor(holderlist[index].get_width() / 2);
            offset -= Math.floor(bodywidth / 2);
            
            //set the offset of inner gallery div
            if (animated) {
                //use animate
                elements.gallery.animate({left: -offset}, 1000);
                holderlist[index].set_as_current(animated);
                holderlist[currentholder_index].set_inactive(animated);
                currentholder_index = index;
            } else {
                //no animation - just css
                elements.gallery.css({left: -offset});
            }
        }
        //export set_current as a public method
        self.set_current = set_current;
        
        //setup the holderlist
        var setup_holderlist = function() {
            var holder;
            elements.pic_holder.each(function() {
                holder = new Adf_holder($(this));
                holderlist.push(holder);
            });
        };
        
        //setup the gallery
        var setup_gallery = function() {
            //initialize width of outer gallery div
            bodywidth = elements.gallery.parent().parent().width();
            elements.gallery.parent().css({
                overflow: 'hidden',
                overflowX: 'hidden'
            });
            
            //calculate width of inner gallery div
            width = 0;
            $.each(holderlist, function(index, holder) {
                width += holder.get_width();
            });
            if (holderlist.length > 0) {
                //set current picture
                holderlist[currentholder_index].set_as_current(false);
                
                //calculate left spacer size
                left_spacer_size = Math.floor((bodywidth - holderlist[0].get_width()) / 2);
                //set/update left spacer 
                if (!elements.gallery.children().first().hasClass('leftspacer')) {
                    //there is no left spacer yet -> insert one
                    elements.gallery.prepend($('<div>', {
                        'class' : 'leftspacer',
                        style: 'float: left;height:50px; width: ' + left_spacer_size + 'px'
                    }));
                } else {
                    //already a left spacer there -> update it
                    elements.gallery.find('.leftspacer').css('width', left_spacer_size + 'px');
                }
                //add left spacer size to width
                width += left_spacer_size;
            }
            //add some more space that even ie uses only one line of images
            width += 10000;
            //update gallery width and offset
            elements.gallery.css({
                width: width,
                left: 0
            });
        };
        
        //add click handlers to picholders
        var add_handlers = function () {
            $.each(holderlist, function(index, holder) {
                holder.el.click(function() {
                    set_current(index, true);
                });
            });
        };
        
        //show the previous image
        var prev_image = function() {
            var i = Math.max(0, currentholder_index - 1);
            set_current(i, true);
        }
        
        //show the next image
        var next_image = function() {
            var i = Math.min(holderlist.length - 1, currentholder_index + 1);
            set_current(i, true);
        };
        
        //react to window resize events
        var on_window_resize = function() {
            setup_gallery();
            set_current(currentholder_index, false);
        };
        
        //initialize the gallery
        (function() {
            if (!$(document.body).find(".adf_gallery").size()) return;
            setup_holderlist();
            setup_gallery();
            add_handlers();
            //recalculate width and stuff if browser window is resized
            $(document).unbind('resize');
            $(window).resize(function() {
                on_window_resize();
            });
            //add keyboard navigation
            $(document).unbind('keyup');
            $(document).keyup(function(event) {
                if (event.keyCode == 37 || event.which == 37) {
                    //left key pressed
                    prev_image();
                    event.preventDefault();
                } else if (event.keyCode == 39 || event.which == 39) {
                    //right key pressed
                    next_image();
                    event.preventDefault();
                }
            });
        })(holderlist);
    };
    
})(jQuery);
//that's all folks!