//
//  ImageViewer
//
//  Created by Kevin Armstrong on 2009-10-09.
//  Copyright (c) 2009 kevinandre. All rights reserved.
//
Ext.ns('ka.ImageViewer');
(function(){
	function _getVisibleImage(){
		var images = Ext.select('.ux-carousel-slide{visibility=visible} img', this.viewerWindow);
		if(images.getCount() > 0){
			return images.item(0);
		}
	}
	
	ka.ImageViewer = Ext.extend(Ext.util.Observable, {
		constructor: function(element, options){
			this.addEvents({ 'change': true });
			this.element = Ext.get(element);
			if(Ext.isEmpty(this.element)){
				throw new Error('Cannot create ImageViewer class without a DOM element');
			}
			if(Ext.isEmpty(this.element.query('.imageviewer-caption'))){
				//this.viewerCaption = Ext.query('.imageviewer-caption', this.element);
			} else {
				this.viewerCaption = Ext.select('.imageviewer-caption', this.element).item(0);
			}
			if(Ext.isEmpty(this.element.query('.imageviewer-window'))){
				//this.viewerWindow = Ext.query('.imageviewer-window', this.element);
			} else {
				this.viewerWindow = Ext.select('.imageviewer-window', this.element).item(0);
			}
			//this.element.hover(this.showCaption, this.hideCaption, this);
			this.carousel = new Ext.ux.Carousel(this.viewerWindow, Ext.apply({
				interval: 4,
				autoPlay: true,
				transitionType: 'fade',
				hideNavigation: false,
				freezeOnHover: false,
				pauseOnNavigate: true
			}, options));
			this.carousel.on('change', this.makeAdjustments, this);
			this.viewerWindow.select('.ux-carousel-slide').each(function(elm, scope, index){
				if(index == 0){
					this.makeAdjustments(elm, index);
				} else {
					elm.setVisible(false);
				}
			}, this);
			this.captionVisible = true;
			this.hideCaption();
		},
		hideCaption: function(){
			if(!this.captionVisible){
				return;
			}
			this.viewerCaption.slideOut('t', {
				block: true,
				callback: (function(){
					this.captionVisible = false;
				}).createDelegate(this)
			});
		},
		showCaption: function(){
			if(this.captionVisible){
				return;
			}
			this.viewerCaption.slideIn('t', {
				block: true,
				callback: (function(){
					this.captionVisible = true;
				}).createDelegate(this)
			});
		},
		makeAdjustments: function(slide, index){
			var visibleImage = slide.down('img');
			var boxSize = ( this.viewerWindow.getPadding('tl') + this.viewerWindow.getBorderWidth('tl') );
			if(!Ext.isEmpty(visibleImage)){
				//this.viewerWindow.setWidth(visibleImage.getWidth() + boxSize);
				//this.viewerWindow.setHeight(visibleImage.getHeight() + boxSize);
			}
			this.setCaptionText(slide, index);
		},
		setCaptionText: function(slide, index){
			var visibleImage = slide.down('img');
			if(!Ext.isEmpty(visibleImage)){
				this.viewerCaption.update(visibleImage.getAttribute('alt')); 
				this.viewerCaption.setWidth(visibleImage.getWidth());
			}
		},
		clear: function(){
			this.carousel.clear();
		}
	});
})();