/**
 * Do not remove or change this notice.
 * Showcase - Prototype and Scriptaculous showcase plug-in
 * Copyright (c) 2008 - 2009 Templates Master www.templates-master.com
 *
 * @author Templates Master www.templates-master.com
 * @version 1.0 
 */

var Showcase = Class.create();
Showcase.prototype = {
    _options: {
        effect: 'fade', // none, fade (slide - not performed)
        effectDuration: 1,
        autoPlay: true,
        interval: 8000,
        canvasBg: '#EDEAE2',
        minZIndex: 1,
        slides: '.slides li',
        navigation: '.navigation li',
        navigationTitle: '.slide-title a',
        navigationText: '.slide-text p',
        textLength: 45,
        navigationThumbnail: 'img'
    },
    
    _activeSlide: 0,
    
    initialize: function(container, options)
    {
        this.container = container;
        var that = this;
        
        Object.extend(this._options, options);
        
        this._prepareNavigation();
        this._updateNavigation();
        this._prepareLayout();
        
        if (this._options.autoPlay) {
            this._start();
            $(this.container).observe('mouseover', this._stop.bind(this));
            $(this.container).observe('mouseout', this._start.bind(this));
        }
    },
    
    _prepareNavigation: function()
    {
        var that = this;
        var navigation = new Element('ul');
		navigation.addClassName('navigation');
        var prevSibling = $$(this._options.slides)[0].up();
        $$('#' + this.container + ' ' + this._options.slides).each(function(el, index){
            var navi = new Element('li');
            navi.insert(
                '<div class="thumbnail"><img src="' + el.select(that._options.navigationThumbnail)[0].getAttribute('src') + '"/></div>' + 
                '<div class="description">' + 
/*                    '<h5>' + el.select(that._options.navigationTitle)[0].innerHTML + '</h5>' + */
                    '<p>' + el.select(that._options.navigationText)[0].innerHTML.substr(0, that._options.textLength) + '...<p>' + 
                '</div>'
            
            );
            navi.value = index;
            navigation.insert(navi);
        })
        prevSibling.insert({ 'after': navigation })
    },
    
    _prepareLayout: function()
    {
        var that = this;
        switch (this._options.effect) {
            case 'fade':
                $$('#' + this.container + ' ' + this._options.slides).each(function(el, index){
                    if (index == 0) 
                        zIndex = that._options.minZIndex + 2;
                    else {
                        zIndex = that._options.minZIndex;
                        Effect.Fade(el, {duration: 0});
                    }
                    el.setStyle({zIndex: zIndex})
                })
                
                $$('#' + this.container + ' ' + this._options.navigation).each(function(el, index){
                    el.observe('click', that._fadeSlide.bind(that));
                    el.observe('mouseenter', that._hoverIn); 
                    el.observe('mouseleave', that._hoverOut);
                })
                
                this._addCanvas();
            break;
            
            case 'slide':
            break;
            
            default:
                $$('#' + this.container + ' ' + this._options.slides).each(function(el, index){
                    if (index == 0) zIndex = that._options.minZIndex + 2;
                    else zIndex = that._options.minZIndex;
                    el.setStyle({zIndex: zIndex})
                })
                
                $$('#' + this.container + ' ' + this._options.navigation).each(function(el, index){
                    el.observe('click', that._switchSlide.bind(that));
                    el.observe('mouseenter', that._hoverIn);
                    el.observe('mouseleave', that._hoverOut);
                })
                
                this._addCanvas();
            break;
        }
    },
    
    _addCanvas: function()
    {
        var prevSibling = $$('#' + this.container + ' ' + this._options.slides).last();
        var canvas = new Element('li');
        canvas.setStyle({
            background: this._options.canvasBg,
            zIndex: this._options.minZIndex + 1,
            width: $(this.container).getWidth() + 'px',
            height: $(this.container).getHeight() + 'px'
        })
        prevSibling.insert({
            'after': canvas
        });
    },
    
    _switchSlide: function(e)
    {
        var slides = $$('#' + this.container + ' ' + this._options.slides);
        
        var activeSlide = slides[this._activeSlide];
        
        if (e)
            var indexToActivate = this._getClickedIndex(e.element());    
        else 
            var indexToActivate = this._activeSlide >= slides.length - 2 ? 0 : this._activeSlide + 1;    
        
        var element = slides[indexToActivate];
        
        if (activeSlide == element)
            return;
        
        activeSlide.setStyle({
            zIndex: this._options.minZIndex
        })
        
        element.setStyle({
            zIndex: this._options.minZIndex + 2
        })
        
        this._activeSlide = indexToActivate;
        this._updateNavigation();
    },
    
    _fadeSlide: function(e)
    {
        var slides = $$('#' + this.container + ' ' + this._options.slides);
        
        var activeSlide = slides[this._activeSlide];
        
        if (e)
            var indexToActivate = this._getClickedIndex(e.element());    
        else 
            var indexToActivate = this._activeSlide >= slides.length - 2 ? 0 : this._activeSlide + 1;
        
        var element = slides[indexToActivate];
        
        if (activeSlide == element)
            return;
            
        var that = this;
        
        Effect.Fade(activeSlide, {
            duration: that._options.effectDuration,
            afterFinish: function(){
                activeSlide.setStyle({
                    zIndex: that._options.minZIndex
                })
            }
        });
        
        element.setStyle({
            zIndex: that._options.minZIndex + 2
        })
        Effect.Appear(element, {
            duration: that._options.effectDuration
        })
        
        this._activeSlide = indexToActivate;
        this._updateNavigation();
    },
    
    _next: function()
    {
        switch (this._options.effect) {
            case 'fade':
                this._fadeSlide();
            break;
            
            case 'slide':
            break;
            
            default:
                this._switchSlide();
            break;
        }
    },
    
    _stop: function()
    {
        window.clearInterval(this.interval);
    },
    
    _start: function(e)
    {
        if (this._bubbledFromChild(e))
            return;
        
        this.interval = setInterval(this._next.bind(this), this._options.interval);
    },
    
    _updateNavigation: function()
    {
    	var that = this;
        $$('#' + this.container + ' ' + this._options.navigation).each(function(el, index){
        	if (index == that._activeSlide) {
        		el.addClassName('active');
        	} else {
        		el.removeClassName('active');
        	}
        });
    },
    
    _getClickedIndex: function(el)
    {
        while (el.tagName != 'LI')
            el = el.parentNode;
        return el.value;
    },
    
    _hoverIn: function(e)
    {
        e.element().addClassName('hover');
    },
    
    _hoverOut: function(e)
    {
        e.element().removeClassName('hover');
    },
    
    _bubbledFromChild: function(event)
    {
        if (typeof event == 'undefined')
            return false;
            
        var target = event.element();
        return (event.relatedTarget && event.relatedTarget.descendantOf(target));
    }
}