var PortfolioItem = Class.create({ 

    initialize: function(item) {
        
        console.log('initialize called');
        
        this.item = $(item);
            
        this.prepare();
        this.render();
    },
    
    prepare: function() {
        
        // Opmaak-stuff
        Position.center(this.item);
        
        // Handlers
        this._enableModalOptions();
    },
    
    render: function() {

        console.log('render called');
        
        this.overlay = new Overlay({ 
            afterCreation: function() { 
                new Effect.BlindDown(this.item, { 
                    duration: 0.3
                });
            }.bind(this) 
        });
    },
    
    close: function() {
        
        new Effect.BlindUp(this.item, { 
            duration: 0.3,
            afterFinish: function() {
                this.item.style.height = '400px';
                this.overlay.remove();        
            }.bind(this)
        });
        
    },
    
    changeImage: function(thumb) {
        
        var find = new RegExp('(.+)thumb_([0-9]+\.jpg)$');
        var replace = '$1$2';
        var thumbsource = thumb.getElementsByTagName('img')[0].src.replace(find, replace);
        
        var photolist = this.item.getElementsByClassName('portfolio-photos')[0];
        var largephotos = photolist.getElementsByTagName('li');
        
        for (var i = 0; i < largephotos.length; i++) {
            
            var image = largephotos[i].getElementsByTagName('img')[0];
            
            if (image.src == thumbsource) {
                var offset = i * -500;
                new Effect.Move(photolist, { 
                    duration: 0.3,
                    x: offset,
                    mode: 'absolute'
                });               
            }
        }
        
        if (this.activethumb) {
            this.activethumb.removeClassName('active');
        }
        
        this.activethumb = thumb;
        Element.addClassName(this.activethumb, 'active');
    },
    
    _enableModalOptions: function() { 
        
        // Thumbnails
        $A(this.item.getElementsByClassName('thumb')).each(function(thumb) {
            Event.observe(thumb, 'click', function(event) {  
                event.stop();
                this.changeImage(thumb);
            }.bind(this) );
        }.bind(this));

        // Sluit-knop
        var closer = this.item.getElementsByClassName('close')[0];
        Event.observe(closer, 'click', function(event) { 
            event.stop();
            this.close();
        }.bind(this) );
    }

});

function portfolioLinkClickEvent(element, params) {
    element = $(element);
    var pElement = $('portfolio_item_' + params.id);
    
    if (!pElement || typeof(pElement) == 'undefined') {
    
        var item = document.createElement('div');
        item.id = 'portfolio_item_' + params.id;
        Element.addClassName(item, 'portfolio-item');
        item.style.display = 'none';
        
        var b = document.getElementsByTagName("body").item(0);
        
        b.insertBefore(item, b.firstChild);
        
        new Ajax.Request(element.href, { 
            onLoading: function() { },
            onComplete: function(t) {
                item.innerHTML = t.responseText;
                var PortfolioItemObject = new PortfolioItem(item);
            }
        } );
    } else {
        var PortfolioItemObject = new PortfolioItem(pElement);
    }    
}

Event.observe(window, 'load', function() { 
    if (window.location.hash && window.location.toString().indexOf('portfolio') != -1) {
        var portfolioItem = window.location.hash.toString().replace('#', '');
        if (parseInt(portfolioItem)) {
            portfolioLinkClickEvent('portfolio_link_'+portfolioItem, { id: portfolioItem });
        }
    }
} );