var PhotoScroll = new Class({
    initialize:function(kwargs) { //config, leftButton, rightButton, showFunction, count, insertInto){
        this.container = $(kwargs.containerId);
        this.insertInto = kwargs.insertInto || 'a';
        // Destroy all photos
        this.container.getChildren().each(function(item){item.destroy()});

        // Initial configs
        this.conf = kwargs.config;
        this.count = kwargs.count || 7;
        this.leftButton = kwargs.leftButton;
        this.rightButton = kwargs.rightButton;
        this.itemConstructor = kwargs.itemConstructor || function (item, index) {
            var imgTag = new Element('img', {
                'src':item.preview,
                'alt':index,
                'title':item.photo});
            var aTag = new Element('a', {
                'href':item.photo,
                'rel':'milkbox[gal]',
                'title':item.title
            });
            var show = function(e) {
                e.stop();
                var index = $(e.target).getProperty('alt');
                index = new Number(index);
                Milkbox.openMilkbox(Milkbox.galleries[0], index);
            };
            aTag.addEvent('click', show.bind(this));
            imgTag.inject(aTag);
            return aTag;
        };
        this.activePhoto = null;
        $(this.leftButton).addEvent('click', this.leftArrow.bind(this));
        $(this.rightButton).addEvent('click', this.rightArrow.bind(this));
        this.currentIndex = 0;

        this.drawPhotos();
        if (this.conf.length > this.count)
            $('aright').removeClass('hide');
        this.move(0)
    },

    leftArrow:function(e){
        e.stop();
        this.move(-1);
    },

    rightArrow:function(e){
        e.stop();
        this.move(1);
    },

    drawPhotos:function(){
        for (var i=0; i < this.count; i++) {
            var index = i+this.currentIndex;
            if (this.conf.length < index + 1)
                return
            var item = this.conf[index];
            var constructedItem = this.itemConstructor(item, i+this.currentIndex);
            constructedItem.inject(this.container);
        }
    },

    move:function(position){
        if (this.conf.length < this.count ||
            this.conf.length - (this.currentIndex + position) < this.count ||
            this.currentIndex + position < 0 )
            return;
        this.currentIndex = this.currentIndex + position;
        // Destroy all photos
        this.container.getChildren().each(function(item){item.destroy()});
        this.drawPhotos()
        if (this.currentIndex > 0) {
            if ($('nleft'))
                $('nleft').setProperty('text', this.currentIndex);
            $(this.leftButton).removeClass('hide');
        } else {
            $(this.leftButton).addClass('hide');
            if ($('nleft'))
                $('nleft').setProperty('text', '');
        }
        var rightRested = this.conf.length - this.currentIndex - this.count;
        if (rightRested > 0) {
            if ($('nright'))
                $('nright').setProperty('text', rightRested);
            $(this.rightButton).removeClass('hide');
        } else {
            $(this.rightButton).addClass('hide');
            if ($('nright'))
                $('nright').setProperty('text', '');
        }
    }
});

var VideoPopup = function (kwargs) {
    this.overlay = new Element('div', { 'id':'video-overlay','styles':{ 'opacity':'0','visibility':'visible' }}).inject($(document.body));
    this.overlay.addEvent('click', function(e){
        e.stop();
        this.disappear();
    }.bind(this));
    this.center = new Element('div', {'id':'video-center', 'styles':{'width':kwargs.width,'height':kwargs.height,'marginLeft':-(kwargs.width/2),'opacity':0}}).inject($(document.body));
    this.image = new Element('div', {'id':'video-container', style:'height: 305px; width: 350px;'}).inject(this.center);
    var closeContainer = new Element('div', {'class':'closeButton','style':'font-size:10px; position:absolute; top:10px; right:0px;}'}).inject(this.center);
    var flagContainer = new Element('div', {'style':'position:absolute; top:0; right:0; width:4px; height:118px;'}).inject(this.center);
    var flag = new Element('img').inject(flagContainer);
    flag.set('src','/img/flag.gif');
    this.bottom = new Element('div',{'id':'mbBottom', 'styles':{width:kwargs.width}}).inject(this.center).setStyle('visibility','visible');
    this.navigation = new Element('div',{'id':'mbNavigation'}).setStyle('visibility','hidden');
    desc = new Element('div',{"class":"desc"});
    this.date = new Element('div',{"class":"date"}).inject(desc);
    this.description = new Element('h6').inject(desc);
    this.bottom.adopt(this.navigation,desc);
    this.close = new Element('a',{'id':'mbCloseLink'}).inject(closeContainer);
    this.close.addEvent('click', function(e) {
        this.disappear();
    }.bind(this));
    texts = new Element('div').inject(this.close);
    var container = kwargs.container || $(document.body);
    $$(container).adopt(this.overlay);
    $$(container).adopt(this.center);
    this.render = function (player, title, date) {
        this.image.innerHTML = player;
        this.description.innerHTML = title;
        this.date.innerHTML = date;
        this.overlay.setStyle('top', '-168px');
        this.overlay.setStyle('height', '1000px');
        this.overlay.tween('opacity', 0.7);
        this.center.setStyle('visibility', 'visible');
        this.center.tween('opacity', 1);
    };
    this.disappear = function() {
        this.center.setStyle('visibility', 'hidden');
        this.center.setStyle('opacity', 0);
        this.image.innerHTML = '';
        this.overlay.setStyle('opacity', 0);
        this.overlay.setStyle('top', '0');
        this.overlay.setStyle('height', '0');
    };
};