var PreviewCase = new Class({
    Implements: [Options, Events],
    options: {
        autoplay: true,
        mousewheel: true,
        delay: 5000,
        dimension: [972, 441],
        teaser: [],
        fx: {link: 'chain', duration: 750, transition: Fx.Transitions.Sine.easeInOut, fps: 50}
    },

    initialize: function(container, options) {
        this.setOptions(options);
        this.bpContainer = this.setupContainer(container);
        this.timer = false;
        this.controls = true;
        this.teaserElements = this.buildTeaser(this.options.teaser);

        this.setupTeaser();
        this.buildControls();
		if (this.options.mousewheel == true) this.setupExtras();
        if (this.options.autoplay == true) this.timer = this.tweenRight.periodical(this.options.delay, this);
    },

    toElement: function() {
        return this.bpContainer;
    },

    buildControls: function() {
        var _this = this;
        var controls = {};
        controls.left = new Element('span', {
            'class': 'control left',
            'events': {
                'click': function() {
                    if(_this.controls != true) return false;
                    $clear(_this.timer);
                    _this.tweenLeft();
                    return void(0);
                }
            }
        });
        controls.right = new Element('span', {
            'class': 'control right',
            'events': {
                'click': function() {
                    if(_this.controls != true) return false;
                    $clear(_this.timer);
                    _this.tweenRight();
                    return void(0);
                }
            }
        });
        controls.play = new Element('span', {
            'class': 'control play',
            'events': {
                'click': function() {
                    if(_this.controls != true) return false;
                    $clear(_this.timer);
                    _this.tweenRight();
                    _this.timer = _this.tweenRight.periodical(_this.options.delay, _this);
                    return void(0);
                }
            }
        });
        controls.pause = new Element('span', {
            'class': 'control pause',
            'events': {
                'click': function() {
                    if(_this.controls != true) return false;
                    if(_this.timer) $clear(_this.timer);
                    return void(0);
                }
            }
        });
        this.bpContainer.grab(controls.left, 'bottom');
        this.bpContainer.grab(controls.right, 'bottom');
        this.bpContainer.grab(controls.play, 'bottom');
        this.bpContainer.grab(controls.pause, 'bottom');
        return void(0);
    },

    buildTeaser: function(objs) {
        var _this = this;
        var teaserElements = new Array();
        for(var i = 0, l = objs.length; i < l; i++) {
            teaserElements[i] = new Element('div', {
                'class': 'teaser',
                'id': objs[i].id,
                styles: {
                    'background': (objs[i].bg.indexOf('#') != -1) ? objs[i].bg : 'url(' + objs[i].bg + ') no-repeat',
                    'width': (i == 0) ? this.options.dimension[0] : 0
                }
            });
            this.bpContainer.grab(teaserElements[i], 'bottom');
			if(objs[i].content) this.setupContent(teaserElements[i], objs[i].content);
            teaserElements[i].store('tweenOut', new Fx.Morph(teaserElements[i], this.options.fx)
                .addEvent('complete', function() {
                    this.element.setStyle('width', 0);
                    _this.controls = true;
                    return void(0);
                }))
                    .store('tweenIn', new Fx.Morph(teaserElements[i], this.options.fx));
        }
        return teaserElements;
    },

	setupContainer: function(containerId) {
		return $(containerId)
				.empty()
				.addClass('PreviewCase')
				.setStyle('height', this.options.dimension[1])
				.addEvent('tweenNext', this.tweenRight.bind(this));
	},

    setupTeaser: function() {

        this.teaserState = {
            max: this.teaserElements.length-1,
            act: 0,
            nxt: 1,
            prv: this.teaserElements.length-1
        };

        this.teaserElements[this.teaserState.act].addClass('active');
        this.teaserElements[this.teaserState.nxt].addClass('next');
        this.teaserElements[this.teaserState.prv].addClass('prev');

    },

    setupContent: function(element, content) {
		if(!content) return void(0);

		var container = new Element('div', {
			styles: {
				'position': 'relative',
				'width': this.options.dimension[0],
				'height': this.options.dimension[1]
			}
		});
		element.grab(container, 'bottom');
		if(content.links) {
			var links = content.links;
			for(var i = 0, l = links.length; i < l; i++) {
				var wrapper = new Element('div', {
					'class': 'teaser link wrap',
					styles: {
						'position': 'absolute',
						'left': (links[i].xy[0]) ? links[i].xy[0] + 'px' : '0px',
						'top': (links[i].xy[1]) ? links[i].xy[1] + 'px' : '0px'
					}
				});
				container.grab(wrapper);
				var link = new Element('a', {
					'id': (links[i].id) ? links[i].id : null,
					'class': (links[i].cls) ? links[i].cls : null,
					'href': (links[i].href) ? links[i].href : '#',
					'target': (links[i].target) ? links[i].target : null,
					'html': (links[i].text) ? links[i].text : 'link',
					'title': (links[i].title) ? links[i].title : null
				});
				if(links[i].title) {
					var title = new Element('span', {
						'html': links[i].title + '<br />',
						'class': 'teaser link title'
					});
					wrapper.grab(title, 'top');
				}
				wrapper.grab(link, 'bottom');
			}
		}
		return void(0);
	},

    setupExtras: function() {
        var _this = this;
        this.bpContainer.addEvent('mousewheel', function(e) {
            if(_this.controls === true) {
                $clear(_this.timer);
                if(e.wheel === -1) {
                    _this.tweenRight();
                } else if(e.wheel === 1) {
                    _this.tweenLeft();
                }
            }
            return void(0);
        });
    },

	tweenRight: function() {
        this.controls = false;
        var xy = this.options.dimension;

        this.teaserElements[this.teaserState.prv].setStyle('z-index', '82').removeClass('prev');

        (this.teaserState.prv < this.teaserState.max) ? this.teaserState.prv++ : this.teaserState.prv = 0;
        (this.teaserState.act < this.teaserState.max) ? this.teaserState.act++ : this.teaserState.act = 0;
        (this.teaserState.nxt < this.teaserState.max) ? this.teaserState.nxt++ : this.teaserState.nxt = 0;

        this.teaserElements[this.teaserState.prv].setStyle('z-index', '84').removeClass('active').addClass('prev');
        this.teaserElements[this.teaserState.act].setStyle('z-index', '86').removeClass('next').addClass('active');
        this.teaserElements[this.teaserState.nxt].setStyle('z-index', '88').addClass('next');

        this.teaserElements[this.teaserState.prv].retrieve('tweenOut').start({'left': -xy[0]});
        this.teaserElements[this.teaserState.act].setStyle('left', xy[0]).setStyle('width', xy[0]).retrieve('tweenIn').start({'left': 0});

        return void(0);
    },

    tweenLeft: function() {
        this.controls = false;
        var xy = this.options.dimension;

        this.teaserElements[this.teaserState.nxt].setStyle('z-index', '82').removeClass('next');

        (this.teaserState.prv > 0) ? this.teaserState.prv-- : this.teaserState.prv = this.teaserState.max;
        (this.teaserState.act > 0) ? this.teaserState.act-- : this.teaserState.act = this.teaserState.max;
        (this.teaserState.nxt > 0) ? this.teaserState.nxt-- : this.teaserState.nxt = this.teaserState.max;

        this.teaserElements[this.teaserState.prv].setStyle('z-index', '84').addClass('prev');
        this.teaserElements[this.teaserState.act].setStyle('z-index', '86').removeClass('prev').addClass('active');
        this.teaserElements[this.teaserState.nxt].setStyle('z-index', '88').removeClass('active').addClass('next');

        this.teaserElements[this.teaserState.nxt].retrieve('tweenOut').start({'left': xy[0]});
        this.teaserElements[this.teaserState.act].setStyle('left', -xy[0]).setStyle('width', xy[0]).retrieve('tweenIn').start({'left': 0});

        return void(0);
    }
});