var window_on_load_fired = false;

Event.observe(window, 'load', function() { window_on_load_fired = true; });

function add_reflection(image, h_coef, opacity_start, opacity_end, mode)
{
    return;
    var container  = document.createElement('span');
    var ref_height, ref_width, div_height, div_width;
   
    if (0 == mode) {
        ref_height = Math.floor(image.height * h_coef);
        ref_width  = image.width;
        div_height = Math.floor(image.height * (1 + h_coef));
        div_width  = ref_width;
    }
    else {
        ref_width  = Math.floor(image.width * h_coef);
        ref_height = image.height;
        div_height = ref_height
        div_width  = Math.floor(image.width * (1 + h_coef));
    }
   
    var reflection;
   
    if (!window.opera && document.all) {
        reflection = document.createElement('img');
        reflection.src = image.src;
        reflection.style.width = image.width + 'px';
       
        if (0 == mode) {
            reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity_start*100)+', style=1, finishOpacity='+(opacity_end*100)+', startx=0, starty=0, finishx=0, finishy='+(h_coef*100)+')';
        }
        else {
            reflection.style.filter = 'fliph progid:DXImageTransform.Microsoft.Alpha(opacity='+(opacity_start*100)+', style=1, finishOpacity='+(opacity_end*100)+', startx=0, starty=0, finishx='+(h_coef*100)+', finishy=0)';
        }

        container.style.width  = div_width + 'px';
        container.style.height = div_height + 'px';
        image.parentNode.replaceChild(container, image);
        container.appendChild(image);
        container.appendChild(reflection);
    }
    else {
        reflection  = document.createElement('canvas');
        var context = reflection.getContext('2d');
        reflection.style.height = ref_height + 'px';
        reflection.style.width  = ref_width + 'px';
        reflection.height       = ref_height;
        reflection.width        = ref_width;
       
        container.style.width  = div_width + 'px';
        container.style.height = div_height + 'px';
        image.parentNode.replaceChild(container, image);
        container.appendChild(image);
        container.appendChild(reflection);
       
        context.save();
        var gradient;
       
        if (0 == mode) {
            context.translate(0, image.height);
            context.scale(1, -1);
            gradient = context.createLinearGradient(0, 0, 0, ref_height);
        }
        else {
            context.translate(image.width, 0);
            context.scale(-1, 1);
            gradient = context.createLinearGradient(0, 0, ref_width, 0);
        }
       
        context.drawImage(image, 0, 0, image.width, image.height);
        context.restore();
       
        context.globalCompositeOperation = "destination-out";
        gradient.addColorStop(1, "rgba(255, 255, 255, " + (1 - opacity_end) + ")");
        gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity_start) + ")");
        context.fillStyle = gradient;
        if (-1 != navigator.appVersion.indexOf('WebKit')) {
            context.fill();
        }
        else {
            context.fillRect(0, 0, image.width, 2*ref_height);
        }
    }
    
    container.className = 'reflection';
}

window.Portfolio2 = Class.create();
window.Portfolio2.prototype = {
    initialize : function(expanded)
    {
        this.expanded = $(expanded);
        this._addMarkup();
        this._addEventHandlers();
    },
    
    items : 0,
    position : 0,
    
    _addMarkup : function()
    {
        $$('#categories > li').invoke('addClassName', 'collapsed');
        this.expanded.toggleClassName('collapsed').toggleClassName('expanded');
        
        if ($('prev') && 'undefined' == typeof window.Engine) {
            this.items = $$('#thumbs img').length;
            $('thumbs').up().style.height = '152px';
            $$('#thumbs-container a').invoke('observe', 'click', this._setPhoto.bindAsEventListener(this));
            if (this.items > 5) {
                $('prev').observe('click', this._moveRight.bindAsEventListener(this));
                $('next').show().observe('click', this._moveLeft.bindAsEventListener(this));
            }
            else {
        	$('thumbs-container').setStyle({ width : 'auto', textAlign : 'center' });
        	$('thumbs').style.marginLeft = '30px';
            }

            function addreflection()
            {
                $$('#thumbs-container img').each(
                    function(n)
                    {
                        add_reflection(n, 0.8, 0.3, 0, 0);
                    }.bind(this)
                );
            }

            if (false == window_on_load_fired) {
                Event.observe(window, 'load', addreflection);
            }
            else {
                addreflection();
            }
            
            $('large-image').observe('click', this._initProtobox.bindAsEventListener(this));
        }
    },
    
    _addEventHandlers : function()
    {
        $$('#categories > li > .ce').invoke('observe', 'click', this._colExHandler.bindAsEventListener(this));
        $$('#categories > li > .type').invoke('observe', 'click', this._colExHandler.bindAsEventListener(this)).invoke('setStyle', { cursor : 'pointer' });
    },
    
    _colExHandler : function(e)
    {
        e.element().up('li')
            .toggleClassName('collapsed')
            .toggleClassName('expanded');
    },
    
    _moveLeft : function(e)
    {
        if (-this.position < this.items - 1) {
            --this.position;
            $('prev').show();
            $('thumbs-container').style.marginLeft = 100*this.position + 'px';
        }
    },
    
    _moveRight : function(e)
    {
        if (0 != this.position) {
            ++this.position;
            $('thumbs-container').style.marginLeft = 100*this.position + 'px';
            if (0 == this.position) {
                $('prev').hide();
            }
        }
    },
    
    _setPhoto : function(e)
    {
        e.stop();
        var a = e.element().up('a');
        var i = a.down('img');
        var s = i.src.replace(/-thumbs/, '');
        $('large-image').src = s;
    },
    
    _initProtobox : function(e)
    {
        e.stop();
        var id = 'p' + $('large-image').src.replace(/^.*\//, '').replace(/\.jpg$/, '');
        window.myLightbox._start($(id));
    }
};

var Portfolio2;