/*
 * SeeBox - dynamic image zoom
 * ===========================
 * 
 * Author: Maciej 'nea' Hirsz
 * Contanct: maciej (dot) hirsz (at) gmail (dot) com
 *
 * www.seenet.pl
 *
 * Mootools 1.1x version
 *
 */

window.addEvent('domready', function(){

    var options;

    function getImageSize(url){
        var img = $(document.createElement('img'));
        img.src = url;
        img.setStyles({
            'position': 'absolute',
            'visibility': 'hidden',
            'left': -10000,
            'top': -10000
        });
        document.body.appendChild(img);
        var size = {}
        size.width = img.offsetWidth;
        size.height = img.offsetHeight;
        document.body.removeChild(img);
        return size;
    }
    
    var imgs = $$('a[rel^=seebox] img');
    var dBody = $(document.body);
    imgs.each(function(el, key){
        if(el.parentNode.href){
            var link = $(el.parentNode);
            link.onclick = function(){
                var minSize = getImageSize(el.src);
                var miniWidth = minSize.width;
                var miniHeight = minSize.height;
                var miniPos = el.getPosition();

                miniPos.x += Math.round((el.offsetWidth - miniWidth)/2);
                miniPos.y += Math.round((el.offsetHeight - miniHeight)/2);

                var seebox = $(document.createElement('div'));
                var elAbsolute = $(document.createElement('img'));
                elAbsolute.src = el.src;
                
                elAbsolute.setStyles({
                    'width': miniWidth,
                    'height': miniHeight
                });

                seebox.setStyles({
                    'left': miniPos.x,
                    'top': miniPos.y
                });

                seebox.addClass('seeboxDiv');

                link.setStyle('visibility', 'hidden');
                seebox.appendChild(elAbsolute);

                var description;
                if(description = link.title){
                    // does the element have a description?
                    var descriptionbox = $(document.createElement('div'));
                    descriptionbox.innerHTML = description;
                    descriptionbox.addClass('description');
                    seebox.appendChild(descriptionbox);
                }

                if(!window.ie6){
                    // adding shadows for modern browsers...
                    var shadow1 = $(document.createElement('div'));
                    shadow1.id = "shadow1";
                    shadow1.setStyles({ 'width': miniWidth-1, 'height': miniHeight-1 });
                    seebox.appendChild(shadow1);
                    var shadow2 = $(document.createElement('div'));
                    shadow2.id = "shadow2";
                    shadow2.setStyles({ 'height': miniHeight-1 });
                    seebox.appendChild(shadow2);
                    var shadow3 = $(document.createElement('div'));
                    shadow3.id = "shadow3";
                    shadow3.setStyles({ 'width': miniWidth-1 });
                    seebox.appendChild(shadow3);
                    var shadow4 = $(document.createElement('div'));
                    shadow4.id = "shadow4";
                    seebox.appendChild(shadow4);
                }else{
                    // ...or 1px black border for IE6
                    miniPos.x -= 1;
                    miniPos.y -= 1;
                    seebox.setStyles({
                        'border-style': 'solid',
                        'border-color': '#000',
                        'border-width': '1px',
                        'left': miniPos.x,
                        'top': miniPos.y
                    });
                }

                // adding seebox to the DOM
                dBody.appendChild(seebox);
                if(description){
                    // hiding the description under the image
                    descriptionbox.setStyle('margin-top', descriptionbox.offsetHeight * -1);
                }
                
                // preloading big image
                new Asset.images([link.href], {onComplete: function(){
                    var size = getImageSize(link.href);
                    var zoomed = true;
                    // changing small image to the big one
                    elAbsolute.src = link.href;
                    
                    // scrolling description out
                    if(description){
                        if(window.ie6){
                            var descriptionFx = new Fx.Style(descriptionbox, 'margin-top', {duration: 300});
                        }else{
                            var descriptionFx = new Fx.Elements([descriptionbox, shadow1, shadow2], {duration: 300});
                        }
                    }
                    
                    // animating zoom in
                    if(window.ie6){
                        var elements = [seebox, elAbsolute];
                    }else{
                        var elements = [seebox, elAbsolute, shadow1, shadow2, shadow3, shadow4];
                    }
                    
                    var zoomFx = new Fx.Elements(elements, {transition: Fx.Transitions.Sine.easeOut, onComplete: function(){
                        if(zoomed){
                            if(description){
                                descriptionbox.setStyle('visibility', 'visible');
                                if(window.ie6){
                                    descriptionFx.start(descriptionbox.offsetHeight * -1, 0);
                                }else{
                                    descriptionFx.start({
                                        '0': {
                                            'margin-top': [descriptionbox.offsetHeight * -1, 0]
                                        },
                                        '1': {
                                            'height': size.height-1+descriptionbox.offsetHeight
                                        },
                                        '2': {
                                            'height': size.height-1+descriptionbox.offsetHeight
                                        }
                                    });
                                }
                            }
                            elAbsolute.setStyle('cursor', 'pointer');
                            elAbsolute.onclick = function(){
                                // zooming out
                                elAbsolute.onclick = function(){}
                                options = {
                                    '0': {
                                        'left': miniPos.x,
                                        'top': miniPos.y
                                    },
                                    '1': {
                                        'width': miniWidth,
                                        'height': miniHeight
                                    }
                                };
                                if(!window.ie6){
                                    // shadow animations for non IE6 browsers
                                    options['2'] = { 'width': miniWidth-1, 'height': miniHeight-1 };
                                    options['3'] = { 'height': miniHeight-1 };
                                    options['4'] = { 'width': miniWidth-1 };
                                }
                                if(description){
                                    if(!window.ie6){
                                        // resetting shadows to dimensions without the description
                                        shadow1.setStyle('height', size.height-1);
                                        shadow2.setStyle('height', size.height-1);
                                    }
                                    descriptionbox.setStyle('display', 'none');
                                    descriptionFx.stop();
                                }
                                zoomFx.start(options);
                                zoomed = false;
                            }
                        }else{
                            dBody.removeChild(seebox);
                            link.setStyle('visibility', 'visible');
                        }
                    }});

                    // getting window dimensions
                    var clientWidth = window.getWidth();
                    var clientHeight = window.innerHeight;
                    var clientScrollTop = window.getScrollTop();
                    if(window.ie){
                        clientWidth = document.documentElement.clientWidth;
                        clientHeight = document.documentElement.clientHeight;
                        clientScrollTop = document.documentElement.scrollTop;
                    }

                    // description should shift the vertical position
                    if(description){
                        size.height += descriptionbox.offsetHeight;
                    }
                    
                    options = {
                        '0': {
                            'left': Math.round((clientWidth - size.width)/2),
                            'top': Math.round((clientHeight - size.height)/2) + clientScrollTop
                        },
                        '1': {
                            'width': size.width,
                            'height': size.height
                        }
                    }
                    if(!window.ie6){
                        // shadow animations for non IE6 browsers
                        options['2'] = { 'width': size.width-1, 'height': size.height-1 };
                        options['3'] = { 'height': size.height-1 };
                        options['4'] = { 'width': size.width-1 };
                    }

                    zoomFx.start(options);
                }});

                return false;
            }
        }
    });
});