/*
 * @author Olivier B. Deland
 * @copyright 2007
 */

var AirRichCaroussel = new Class({
	
	options: {
        thumbWidth:100,
		thumbHeight:100,
		thumbContainer:null,
		createContainer:true,
		fullHeight:300,
		fullWidth:300,
		duration:1000,
		transition:Fx.Transitions.Quad.easeInOut,
		scoll:Class.empty,
        thumbScroll:Class.empty,
		onProgress:Class.empty,
		onComplete:Class.empty
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.pics = [];
		this.loadedImgs = [];
		this.anchors = $ES('a',this.options.thumbContainer);
		this.thumbOffset = 0;
		
		// check if we must create the container and create it with options
		if ( this.options.createContainer ) {
			this.container = new Element('div', {
				'id':'fullpic'/*,
				'styles':{
					'width':this.options.fullWidth,
					'height':this.options.fullHeight,
					'display':'block',
					'white-space':'nowrap',
					'overflow':'hidden'
				}*/
			}).injectAfter(this.options.thumbContainer);
		}
		
		// Resize the thumb container and hide overflow
/*		$(this.options.thumbContainer).setStyles({
			'overflow':'hidden',
			'white-space':'nowrap',
			'height': this.options.thumbHeight
		});
*/
		// attach event to thumbnail pictures
		if ( this.anchors.length > 0 ) {
			// collect our links to image
			this.anchors.each(function(element,index) {
				this.pics.push(element.getProperty('href'));
				element.onclick = this.scrollTo.pass(element,this);
			},this);
		}
		
		// load full size pictures
		this.images = new Asset.images(this.pics, {
			onProgress:this.onProgress.bind(this),
			onComplete:this.onComplete.bind(this)
			}
		);

		// prepare our scroll effect for full size pictures
		this.options.scroll = new Fx.Scroll(this.container, {
			wait: false,
			duration: this.options.duration,
			offset: {'x': -20, 'y': 0},
			transition: this.options.transition
		});
		
		// create our scroll effect for thumbnails
		this.options.thumbScroll = new Fx.Scroll($(this.options.thumbContainer), {
            wait: false,
            duration: 200,
            offset: {'x':0,'y':0},
            transition: this.options.transition
        });
        
        // add arrows to thumbscroll
        this.leftarrow = new Element('a', {
            'id': 'leftarrow',
            'class': 'arrow',
            'rel':'left',
            'href':'#',
            'events': {
                'click':this.scrollThumbs.bindWithEvent(this)
            }
        }).setHTML('<').injectBefore(this.options.thumbContainer);
        this.rightarrow = new Element('a', {
            'id':'rightarrow',
            'class':'arrow',
            'rel':'right',
            'href':'#',
            'events': {
                'click':this.scrollThumbs.bindWithEvent(this)
            }
        }).setHTML('>').injectAfter(this.options.thumbContainer);
	},
	onProgress: function(i) {
		this.loadedImgs[i] = this.images;
	},
	onComplete: function(){
		this.images.each(function(image, i) {
			image.injectInside($('fullpic'));
		},this);
	},
	scrollTo: function(link) {		
		// get index
		for(i=0;this.anchors[i]!=link.href;i++)
		{}
		this.options.scroll.toElement(this.images[i]);
		return false;
	},
	
	scrollThumbs: function(event) {
        event.stop();

        if ( event.target.rel == 'left' ) {
            if ( this.thumbOffset > 0 )
                this.options.thumbScroll.scrollTo(this.thumbOffset-=112,0);
        } else if ( event.target.rel == 'right' ) {
            if ( this.thumbOffset < ( (this.images.length * 112) - $(this.options.thumbContainer).getStyle('width').toInt() ) )
                this.options.thumbScroll.scrollTo(this.thumbOffset+=112,0);
        }
        return false;
    }
});
AirRichCaroussel.implement(new Events, new Options);

// Load our stuff onDomReady
window.addEvent('domready', function() {
	var ourWidget = new AirRichCaroussel({
        thumbWidth:100,
		thumbHeight:100,
		thumbContainer:'thumbphoto',
		createContainer:true,
		fullHeight:300,
		fullWidth:300,
		duration:1000,
		transition:Fx.Transitions.Quad.easeInOut,
		scoll:Class.empty,
		onProgress:Class.empty,
		onComplete:Class.empty
	});
});