var Postcard = {
    images : ['a.png', 'b.png'],    /* paths to images */
    id: 'postcard',                 /* id of the image element */
    border: 50,                    /* # of pixels for border around image */
    animationTime: 1000,            /* time in milliseconds for animation */
    current : 0,
    maps: null,

    init: function(options) {
        $.extend(this, options);
        var self = this;
        $image = $('#'+self.id).wrap('<div></div>');
        self.container = $image.parent().css({position:'absolute',overflow:'hidden'}).click(function(){
            self.slideImageDown();
        })[0];

        var tmp = new Image();
        tmp.src = $image.attr('src');
        self.orig_width = $image.width();
        self.orig_height = $image.height();
        tmp.onload = function() {
            self.orig_width = this.width;
            self.orig_height = this.height;
        }
        
        self.positionImage();
        $(window).resize(function(){
            self.positionImage();
        });
        $image.show();
    },

    positionImage: function() {
        var self = this;
        var wh = window.innerHeight ||
                jQuery.boxModel && document.documentElement.clientHeight ||
                document.body.clientHeight;
        var ww = window.innerWidth ||
                jQuery.boxModel && document.documentElement.clientWidth ||
                document.body.clientWidth;
        var $image = $('> img',self.container);
        if( $image.length < 1 ) return;
        var img = $image.attr('src');
        img = img.replace(/.*thumbnail\.php\?img=([^&]*).*/, "$1");
        $image.one('load',function() {
            $(self.container).css({
                'width': $image.width(),
                'height': $image.height(),
                'left': parseInt(ww-$image.width())/2,
                'top': parseInt(wh-$image.height())/2
            });
            if( self.maps && self.maps[self.images[self.current]] ) self.doImageMap($image);
        });
        var src = 'thumbnail.php?img='+img+'&w='+(ww-self.border*2)+'&h='+(wh-self.border*2) + 
            ( ($.browser.msie && $.browser.version < 7)? '&trans=0' : '' );
        $image.attr('src', src);
    },
    
    slideImageDown: function() {
        var self = this;
        if( self.sliding ) return;
        self.current = ++self.current % self.images.length;
        $('a',self.container).remove();
        var $image = $('> img', self.container);
        var src = $image.attr('src').replace(/img=[^&]*/, 'img='+self.images[self.current] );
        var $newimage = $('<img  />');
        $newimage.one('load',function() {
            self.sliding = true;
            $image.css({'position':'absolute'});
            $image.animate({
                top: $image[0].height
            }, self.animationTime, function(){
                self.sliding = false;
                try{
                    $image.remove();
                }catch(e) {}
                $newimage.attr('id', 'postcard');
                if( self.maps && self.maps[self.images[self.current]] ) self.doImageMap($newimage);
            });
            $(this).animate({
                top: 0
            }, self.animationTime);
        });
        $newimage.css({
            position: 'absolute',
            'top': (0 - $image.height()),
            'left': 0
        }).appendTo(self.container).attr('src', src);

    },

    doImageMap: function(image) {
        var self = this;
        var mapinfo = self.maps[self.images[self.current]];
        if( !mapinfo['coords'] || !mapinfo['swap'] ) return;
        var $image = $(image);
        var coords = mapinfo['coords'].split(',');
        if( coords.length < 4 ) return;
        $('a',self.container).remove();
        var ratio = $image.width() / self.orig_width;
        coords = $.map(coords, function(n){            
            return parseInt( n * ratio );
        });
        coords[2] = coords[2] - coords[0]; // will give us width from coords(right)
        coords[3] = coords[3] - coords[1]; // will give us height from coords(bottom)
        var $a = $('<a></a>').css({
            position: 'absolute', 'z-index': 100,
            display: 'block',
            left: coords[0],
            top: coords[1],
            width: coords[2] +'px',
            height: coords[3] + 'px'
        }).appendTo(self.container).attr('href', (mapinfo['href'] || '#'));
        if( $.browser.msie ) {
            $a.css({
                background: '#fff',
                opacity: 0
            });
        }
        var preload = new Image();
        preload.src = $image[0].src.replace(/img=[^&]*/,'img='+mapinfo['swap']);
        $a.mouseover(
            function() {
                $image[0].src =  preload.src;
            }
        ).mouseout(
            function() {
                $image[0].src = $image.attr('src').replace(/img=[^&]*/,'img='+self.images[self.current]);
            }
        );
    } 
}