var morphMargin = function (collection, top, right, bottom, left, callback) {
    onComplete = callback ? callback : function () {};
    var css = {}
    if (left)
        css['margin-left'] = left;
    if (right)
        css['margin-right'] = right;
    if (top)
        css['margin-top'] = top;
    if (bottom)
        css['margin-bottom'] = bottom;
        
    console.log("morphMarin: ", top);

    var dur = 500;
    if (typeOf(collection) == 'elements') {
        collection.each(function (b) {
            new Fx.Morph(b, {
                duration: dur,
                onComplete: onComplete
            }).start(css);
        });
    } else {
        new Fx.Morph(collection, {
            duration: dur,
            onComplete: onComplete
        }).start(css);
    }
};
var morphTopMargin = function (collection, top, callback) {
    morphMargin(collection, top, null, null, null, callback);
};
var morphRightMargin = function (collection, right, callback) {
    morphMargin(collection, null, right, null, null, callback);
};
var morphBottomMargin = function (collection, bottom, callback) {
    morphMargin(collection, null, null, bottom, null, callback);
};
var morphLeftMargin = function (collection, left, callback) {
    morphMargin(collection, null, null, null, left, callback);
};

document.addEvent('domready', function () {
    var galleries = [];

    // make the whole page fade in at once
    var body = $$('body');
    body.set('tween', {duration: 500});
    body.tween('opacity', 1);
    
    var expanded = false;
    var previous_box = null;
    
    // watch the document for changes in height
    /*
    var bbody = $$('body')[0]
    setInterval(function () {
        bh = bbody.getDimensions().height; //bbody.getStyle('height').toInt() + 26;
        if (typeOf(bh) == 'null') {
            return;
        }
        
        console.log(window.getSize().y);
        console.log(bh);
        
        if (window.getSize().y > bh) {
            bbody.setStyle('height', (window.getSize().y+26) + 'px');
        } else {
            bbody.setStyle('height', 'auto');
        }
    }, 500);
    */
    $$('body')[0].setStyle('min-height', (window.getSize().y - 26)+'px');
    window.addEvent('resize', function () {
        $$('body')[0].setStyle('min-height', (window.getSize().y - 26)+'px');
    });
    
    // logo rollover
    $$('#logo img').addEvent('mouseover', function () {
        event.target.set('src', 'images/logorollover.png');
    });
    $$('#logo img').addEvent('mouseout', function () {
        event.target.set('src', 'images/logo3.png');
    });
    
    // hide all but the first images of the groups
    $$('.portfoliopiece').each(function (port) {
        port.getElements('img').each(function (img, i) {
            if (i != 0)
                img.setStyle('display', 'none');
        });
    });
    
    var animatePos = function () {
        $$('.col1, .col2, .col3, .col4, .col5').setStyles({
            position: 'absolute'
        });
    
        for (var i = 0; i < 5; i++) {
            var m = 8 + (i*171);
            
            col = i+1;
            morphLeftMargin($$('.col'+col), m+'px');
        }
        
        for (var i = 0; i < 5; i++) {
            var m = 8 + (i*151);
            
            row = i+1;
            morphTopMargin($$('.row'+row), m+'px');
        }
        
        expanded = false;
    };
    
    var initPos = function () {
        $$('.col1, .col2, .col3, .col4, .col5').setStyles({
            position: 'absolute',
            margin: '8px'
        });
        for (var i = 0; i < 5; i++) {
            var m = 8 + (i*171);
        
            col = i+1;
            $$('.col'+col).setStyles({
                marginLeft: m+'px'
            });
        }
        
        for (var i = 0; i < 5; i++) {
            var m = 8 + (i*151);
            
            row = i+1;
            $$('.row'+row).setStyles({
                marginTop: m+'px'
            });
        }
    };
    initPos();
    
    // listeners for close and next clicks
    $$('div.box').each(function (b) {
        document.addEvent('close:'+b.get('id'), function (event) {
            $$('div.box').removeClass('selected');
            $$('div.box').removeEvents('click');
            $$('div.box').addEvent('click', handleBoxClick);
        
            // fade out the content
            new Fx.Morph(b.getElement('.content'), {
                duration: 250,
                onComplete: function (target) {
                    target.setStyle('display', 'none');
                    target.getParent().setStyles({
                        height: '135px',
                        width: '155px'
                    });
                    
                    target.getParent().getElements('.rollover, .label').each(function (targ) {
                        new Fx.Morph(targ, {
                            duration: 250,
                            onStart: function (targ) {
                                targ.setStyles({
                                    display: 'block'
                                });
                            }
                        }).start({
                            opacity: '1'
                        });
                        animatePos();
                    });
                    new Fx.Morph(target.getParent().getElement('.picture'), {
                        duration: 250,
                        onStart: function (targ) {
                            targ.setStyles({
                                display: 'inline'
                            });
                        }
                    }).start({
                        opacity: '0.5'
                    });
                }
            }).start({
                opacity: '0'
            });
        });
    });
    
    var handleBoxClick = function (event) {
        var box = $(event.target).getParent();
    
        if (!expanded) {
            expanded = true;
            var boxes = $$('div.box');
            
            // the expand animation
            var expand = function (current, boxes) {
                // fade out the old elements of the current box
                current.getElements('.rollover, .label, .picture').each(function (b) {
                    new Fx.Morph(b, {
                        duration: 250,
                        onComplete: function (target) {
                            target.setStyle('display', 'none');
                        }
                    }).start({
                        opacity: '0'
                    });
                });
            
                // expand the current box
                new Fx.Morph(current, {
                    duration: 500,
                    onComplete: function (current_box) {
                        current_box.addClass('selected');
                        // now fade the old elements in
                        var content = current_box.getElements('.content')[0];
                        new Fx.Morph(content, {
                            duration: 250,
                            onStart: function (target) {
                                target.setStyle('display', 'block');
                                
                                // center in height of 437px
                                /*target.getElements('.portfoliopiece img').each(function (img, i) {
                                    var h = img.getDimensions().x;
                                    var m = (437 - h);
                                    //img.setStyle('margin-top', m+'px');
                                });*/
                            },
                            onComplete: function (target) {
                                document.fireEvent('shown:'+current_box.get('id'));
                            }
                        }).start({
                            opacity: '1'
                        });
                    }
                }).start({
                    height: '437px',
                    width: '668px',
                    marginLeft: '8px',
                    marginTop: '8px'
                });
                
                // move the remaining boxes into place
                boxes = boxes.filter(function (b, i) {
                    if (b != current)
                        return true;
                });
                
                var row = 3;
                var col = 0;
                boxes.each(function (b, i) {
                    if (i == 0) {
                        morphLeftMargin(b, '692px');
                    } else if (i == 1) {
                        morphMargin(b, '159px', null, null, '692px');
                    } else if (i == 2) {
                        morphMargin(b, '310px', null, null, '692px');
                    } else {
                        // set up the current row
                        if (i % 8 == 0)
                            row++;

                        var top = 8 + (row*151);
                        morphTopMargin(b, top+'px');
                        
                        var left = 8 + (col*171);
                        morphLeftMargin(b, left+'px');
                        
                        // set up the current col
                        col++;
                        if (col > 4)
                            col = 0;
                    }
                });
            }
            
            
            expand(box, boxes);
            box.removeEvents('click');
            previous_box = box;
        } else {
            var reflow = function () {
                var boxes = $$('div.box');
                
                /*
                 * HANDLE OLD CONTENT
                 */
                previous_box.setStyles({
                    height: '135px',
                    width: '155px',
                    marginLeft: box.getStyle('margin-left'),
                    marginTop: box.getStyle('margin-top'),
                    display: 'block',
                    opacity: '0'
                });
                previous_box.getElements('.rollover, .label').setStyles({
                    opacity: '1',
                    display: 'block'
                });
                previous_box.getElements('.picture').setStyles({
                    opacity: '0.5',
                    display: 'inline'
                });
                
                new Fx.Morph(previous_box, {
                    duration: 250,
                    onStart: function (target) {
                        target.setStyle('display', 'block');
                        target.removeClass('selected');
                    },
                    onComplete: function (target) {
                        document.fireEvent('hid:'+target.get('id'));
                    }
                }).start({
                    opacity: '1'
                });
                
                /*
                 * HANDLE NEW CONTENT
                 */
                new Fx.Morph(box, {
                    duration: 250,
                    onStart: function (target) {
                        target.getElements('.rollover, .label, .picture').setStyles({
                            opacity: '0'
                        });
                        target.setStyles({
                            marginLeft: '8px',
                            marginTop: '8px'
                        });
                    },
                    onComplete: function (target) {
                        target.setStyles({
                            marginLeft: '8px',
                            marginTop: '8px'
                        });
                    
                        previous_box.addEvent('click', handleBoxClick);
                        previous_box = box;
                        
                        // fade in .content
                        new Fx.Morph(target.getElement('.content'), {
                            duration: 250,
                            onStart: function (target) {
                                target.setStyles({
                                    opacity: '0',
                                    display: 'block',
//                                    marginTop: '-135px'
                                });
                                target.addClass('selected');
                                
                                // center in height of 437px
                                target.getElements('.portfoliopiece img').each(function (img, i) {
                                    var h = img.getDimensions().x;
                                    var m = (437 - h);
                                    //img.setStyle('margin-top', m+'px');
                                });
                            },
                            onComplete: function (target) {
                                document.fireEvent('shown:'+target.getParent().get('id'));
                            }
                        }).start({
                            opacity: '1'
                        });
                    }
                }).start({
                    height: '437px',
                    width: '668px',
                    //marginLeft: '8px',
                    //marginTop: '8px'
                });
                
                box.getElements('.rollover, .label, .picture').each(function (ele) {
                    new Fx.Morph(ele, {
                        duration: 250,
                    }).start({
                        opacity: '0'
                    });
                });
                
                box.removeEvents('click');
                box.addClass('selected');
                previous_box.removeClass('selected');
            };
        
            var content = previous_box.getElements('.content')[0];
            new Fx.Morph(content, {
                duration: 250,
                onComplete: function (target) {
                    target.setStyles({
                        display: 'none'
                    });
                    
                    reflow();
                }
            }).start({
                opacity: '0'
            });
        }
    };
    
    $$('div.box').addEvent('click', handleBoxClick);
    
    ////
    ////
    // Gallery stuff
    ////
    ////
    var Gallery = new Class({
        initialize: function (view) {
            this.view = $(view);
            this.id = this.view.getParent().getParent().get('id');
            
            this.images = this.view.getElements('.portfoliopiece img');
            this.circles = this.buildCircles(this.images); //this.view.getElements('.viewing img');
            
            this.current = 0;
        
            this.circles.addEvent('click', function (event) {
                this.circles.each(function (deselect, i) {
                    deselect.set('src', 'images/circle.png');
                    if (deselect == event.target) {
                        this.current = i;
                    }
                }.bind(this));
                event.target.set('src', 'images/circleselected.png');
                this.view.getElement('.current').set('html', this.current+1);
                this.showImage(this.current);
            }.bind(this));
            
            this.images.addEvent('click', function (event) {
                event.stop();
                this.right();
            }.bind(this));
            
            this.images.addEvent('mouseover', function (event) {
                if ($(event.target).getNext('p'))
                    $(event.target).getNext('p').setStyle('display', 'block');
            }.bind(this));
            
            this.images.addEvent('mouseout', function (event) {
                if ($(event.target).getNext('p'))
                    $(event.target).getNext('p').setStyle('display', 'none');
            }.bind(this));
            
            this.keyboard = new Keyboard({
		        defaultEventType: 'keyup',
		        events: {
			        'left': this.left.bind(this),
			        'right': this.right.bind(this),
			        'j': this.left.bind(this),
			        'k': this.right.bind(this),
		        }
	        });
	        
	        // handle hiding and showing of the gallery
	        // set up as events because the elements controlling this
	        // may not have direct access to the Gallery instance
	        document.addEvent('shown:'+this.id, function () {
	            this.keyboard.activate();
	        }.bind(this));
	        
	        document.addEvent('hid:'+this.id, function () {
	            this.keyboard.deactivate();
	        }.bind(this));
	        
	        // close and next event handlers
	        this.view.getElement('.close').addEvent('click', this.close.bind(this));
	        //this.view.getElement('.next').addEvent('click', this.next.bind(this));
	        
	        // update counter
	        this.showImage(this.current);
	        if (this.view.getElement('.total'))
	            this.view.getElement('.total').set('html', this.images.length);
        },
        
        close: function (event) {
            event.stop();
            document.fireEvent('close:'+this.id);
        },
        
        next: function (event) {
            event.stop();
            document.fireEvent('next:'+this.id);
        },
        
        showImage: function (index) {
            if (this.view.getElement('.current'))
                this.view.getElement('.current').set('html', index+1);
            
            this.images.each(function (img, i) {
                if (i == index) {
                    img.setStyle('display', 'inline');
                } else {
                    img.setStyle('display', 'none');
                }
                
                if (img.getNext('p'))
                    img.getNext('p').setStyle('display', 'none');
            }.bind(this));
        },
        
        buildCircles: function (images) {
            var viewing = this.view.getElement('.viewing');
            var circles = [];
            
            images.each(function (c, i) {
                var src = 'images/circle.png'
                if (i == 0)
                    src = 'images/circleselected.png'
                circle = new Element('img', {
                    src: src,
                    'class': 'circle'
                });
                viewing.grab(circle);
                circles.push(circle);
            });
            
            return $$(circles);
        },
        
        // direction handlers
        left: function () {
            this.circles[this.current--].set('src', 'images/circle.png');
            if (this.current < 0)
                this.current = this.circles.length-1;
            this.circles[this.current].set('src', 'images/circleselected.png');
            
            this.showImage(this.current);
        },
        right: function () {
            this.circles[this.current++].set('src', 'images/circle.png');
            if (this.current > this.circles.length-1)
                this.current = 0;
            this.circles[this.current].set('src', 'images/circleselected.png');
            
            this.showImage(this.current);
        }
    });
    
    $$('.view').each(function (view) {
        galleries.push(new Gallery(view));
    });
});