var CSNcarousel = function (config) {
	
	this.carousel = null;
	this.currentIndex = 0;
	this.spotlight = null;	
	this.total = config.total;	
	this.targetElId = config.targetElId;	 
	this.visible = config.visible ? config.visible : [5, 2];
	this.itemSize = config.itemSize ? parseInt(config.itemSize) : 100;
    this.getUrl = config.getUrl ? config.getUrl : null;
	this.photoArray = config.photoArray && !this.getUrl ? config.photoArray : null;
	var cols = this.visible[0] ? this.visible[0] : this.visible;
	this.largeImageSize = config.largeImageSize ? config.largeImageSize : cols * this.itemSize;
	if (this.visible.NaN) {
		this.pageTotal = this.visible[0] * this.visible[1];
	} else {
		this.pageTotal = this.visible;
	}	
	
	this.init();
	
}

CSNcarousel.prototype.init = function() {
	var target = _$(this.targetElId);
	if (target) {
		
		
		var lists = target.getElementsByTagName('ol');
		if (!lists.length) {
			var list = new creaDomObject({tag: 'ol'});
			list.addTo(target);
		} else {
			var list = list[0];
		}
		if (this.spotlightId) {
            var spotlight = _$(this.spotlightId);
        } else {
            var spotlight = new creaDomObject ({
                tag: 'div',
                className: 'gallery-spotlight center'
			
            });
            addAfter(spotlight, target);
            spotlight = spotlight.domElement;
        }
		
		
		this.spotlight = spotlight;
		target.style.display = 'none';
		if (this.photoArray && this.photoArray.length) {
			
			this.total = this.photoArray.length;
			
			var prev = new creaDomObject({
            tag: 'img',
            src: '/images/prev.jpg',
            style: {
                    cursor: 'pointer'
                },
			wrapper: {
	                tag: 'li'
	            }
	        });
			prev.domElement.onmouseover = function() {
				this.src = '/images/prev-over.jpg';
			}
			prev.domElement.onmouseout = function() {
                this.src = '/images/prev.jpg';
            }
	        var count = new creaDomObject({
	            tag: 'li',
	            className: 'carousel-count',
	            html: parseInt(this.currentIndex + 1) + ' / ' + this.total
	        });
	        var next = new creaDomObject({
	            tag: 'img',
	            src: '/images/next.jpg',
				style: {
					cursor: 'pointer'
				},
	            wrapper: {
	                tag: 'li'
	            }
	        });
			next.domElement.onmouseover = function() {
                this.src = '/images/next-over.jpg';
            }
            next.domElement.onmouseout = function() {
                this.src = '/images/next.jpg';
            }
	        var navigation = new creaDomObject({
	            tag: 'ul',
	            className: 'dd-list-horizontal',
	            wrapper: {
	                tag: 'div',
	                params: {className: 'carousel-navigation center'}
	            },
	            elements: [prev, count, next]
	        });
	        var that = this;
	        prev.domElement.onclick = function() {
	            that.carousel.selectPreviousItem();	            
	        }
	        next.domElement.onclick = function() {
	            that.carousel.selectNextItem(); 
	        }
	        addBefore(navigation, spotlight);
			for (var i = 0; i < this.photoArray.length; i++) {
				var vmargin = hmargin = 0;
				var width = height = this.itemSize;
				if (this.photoArray[i].proportions > 1) {
					height = Math.round(width / parseFloat(this.photoArray[i].proportions));
					vmargin = Math.round((this.itemSize - height) / 2);
					
				} else if (this.photoArray[i].proportions < 1) {
					width = Math.round(parseFloat(this.photoArray[i].proportions) * height);
					hmargin = Math.round((this.itemSize - width) / 2);
				}
				var src = '/members_data/' + this.photoArray[i].userDirectory + '/images/100bbd/' + this.photoArray[i].fileName;
				var thumb = new creaDomObject({
					tag: 'img',
					src: src,
					style: {
						margin: vmargin + 'px ' + hmargin + 'px'
					},
					wrapper: {
						tag: 'div',
						params: {
							className: 'image-wrapper',
							style: {
								width: this.itemSize + 'px',
								height: this.itemSize + 'px',
								margin: '0px',
								cursor: 'pointer'
							}
						}
					}
				});
				var li = new creaDomObject({
					tag: 'li',
					style: {
						width: parseInt(this.itemSize + 5) + 'px',
						height: parseInt(this.itemSize + 5) + 'px'
					},
					elements: [thumb]
				});
				li.addTo(list);
			}
			var pageTotal = this.visible;
			if (!this.visible.NaN && this.pageTotal > this.total) {
				this.pageTotal = this.visible = this.total;
				
			} else {
				if (this.pageTotal > this.total) {
					while (this.visible[1] > 1) {
						this.visible[1]--;
						this.pageTotal = this.visible[0] * this.visible[1];
					}
					if (this.total > this.pageTotal) {
						this.visible[1]++;
					} else if (this.visible[1] == 1) {
						this.visible = this.pageTotal =  this.visible[0];
					}
					
				}
			}
			this.carousel = new YAHOO.widget.Carousel(this.targetElId, {
				animation: {speed: 0.5},
				numVisible: this.visible
			});
			this.carousel.render();
			target.style.display = 'block';
			var that = this;
			this.getLargeImage(0);
			this.carousel.on('itemSelected', function(index)
			{
				if (index == that.currentIndex) {
					return;
				}
				that.currentIndex = index;
				count.domElement.innerHTML = parseInt(index + 1) + ' / ' + that.total; 
				that.getLargeImage(index)
			});
			this.carousel.show();
			this.spotlight.style.width = target.clientWidth + 'px';
		}
	}	
}

CSNcarousel.prototype.getLargeImage = function (index) {
	
	var spotlight = this.spotlight;
	var that = this;
	if (this.photoArray[index].largeImage) {
		spotlight.innerHTML = this.photoArray[index].largeImage;
		spotlight.firstChild.onclick = function () {
            that.carousel.selectNextItem(); 
        }
		this.appendData(index);
		return; 
	}
	var margin = index  ? Math.round((spotlight.clientHeight - 32) / 2) - 13 : 100;
	
	spotlight.innerHTML = '<img src="/images/ajax-loader-medium-grey.gif" alt="loading" style="margin: ' + margin + 'px 0px;" />';
	var oCallback = {                
        success : function (o) {
            spotlight.innerHTML = o.responseText;
			spotlight.firstChild.onclick = function () {
				that.carousel.selectNextItem(); 
			}
			that.photoArray[index].largeImage = o.responseText;
			that.appendData(index);
        },
        
        failure : function (o) {
            spotlight.innerHTML = o.statusText;
        },
        timeout: CreatoorSN.common.iAjaxTimeout
        
    };
    YAHOO.util.Connect.asyncRequest(
        "GET",
        "/default/ajax/generate-image/?fileName=" + encodeURIComponent(this.photoArray[index].fileName) + "&userDirectory=" + this.photoArray[index].userDirectory + "&size=" + this.largeImageSize,
        oCallback
    );
}

CSNcarousel.prototype.appendData = function (index) {
	if (this.photoArray[index].photoTitle || this.photoArray[index].photoDescription) {
        margin = Math.round((this.spotlight.clientWidth - this.largeImageSize) / 2);
        var descriptionDiv = new creaDomObject({
            tag: 'div',
            className: 'cg-photo-data',
            style: {
				width: (this.largeImageSize - 10) + 'px',
                marginLeft: margin + 'px'
            }
        });
        if (this.photoArray[index].photoTitle) {
            var title = new creaDomObject({
				tag: 'div',
				className: 'title',
				html: this.photoArray[index].photoTitle
			});
			title.addTo(descriptionDiv);
        }
        if (this.photoArray[index].photoDescription) {
            var description = new creaDomObject({
                tag: 'div',
                className: 'description',
                html: this.photoArray[index].photoDescription
            });
            description.addTo(descriptionDiv);
        }
		descriptionDiv.addTo(this.spotlight);
		//this.photoArray[index].descriptionDiv = descriptionDiv;
    }
}

CSNcarousel.prototype.getThumbnail = function (fileName, userDirectory, size) {
	
}

CreatoorSN.namespace('galleries');
CreatoorSN.galleries = {
	total: 0,
	numVisible: 10,
	animate: true,
	thumbSize: 100,
	carousel: null,
	carouselEl: null,
	spotlight: null,	
	
	initialize : function (config) {
		
	}
}