var CarouselItem = Class.create();

var Carousel = Class.create();

Carousel.prototype = {
	
	handleEl: null,
	
	handleParams: {cX: 0, cY: 0, sX: 0, sY: 0},
	imgParams: {maxW: 0, maxH: 0, minW: 0, minH: 0},
	offset: {x: 0, y: 0},
	pointer: {x: 0, y: 0},
	exec: null,
	
	speed: 25,
	step: 0.1,
	
	imgItems: Array(),
	
	position: 0.0,
	
	canShow: false,
	
	initialize: function() {
		this.imgItems = Array();
		this.handleEl = document.createElement('div');
		$(this.handleEl).setStyle({
			width: '1px',
			height: '1px',
			position: 'absolute',
			display: 'none'
		});
		document.body.appendChild(this.handleEl);
		$(this.handleEl).observe("mousemove", this.eMouseMove.bind(this));
		$(this.handleEl).observe("mouseover", this.eMouseOver.bind(this));
		$(this.handleEl).observe("mouseout", this.eMouseOut.bind(this));
		this.loadedImages=0;
	},
	
	init: function(elementId) {
		var el = $(elementId);
		if(el == null) {
			this.canShow = false;
			return -1;
		}
		
		var dims = $(el).getDimensions();
		var offset = $(el).cumulativeOffset();
		
		var ip = this.imgParams;
		
		var _cX = dims.width/2;
		var _cY = dims.height/2 - ip.minH/4;
		var _sX = Math.round(dims.width - (ip.maxW-ip.minW)*2);
		var _sY = Math.round(dims.height - (ip.maxH+ip.minH)/2);
		
		this.handleParams = {
			cX: _cX, cY: _cY, sX: _sX, sY: _sY
		}
		
		this.showlog(this.handleParams);
		
		this.offset = {x: offset.left, y: offset.top};
		
		$(this.handleEl).setStyle({
			width: dims.width+'px',
			height: dims.height+'px',
			left: offset.left+'px',
			top: offset.top+'px'
		});
		
		this.canShow = true;
		return 0;
	},
	
	addImg: function(address){
		var img = new CarouselItem(this, address);
		this.imgItems.push(img);
		this.showlog('Image "'+address+'" added');
//		return img.imgHandle;
		return img;
	},
	
	show: function() {
		if(!this.canShow) {
			this.showlog("Crousel can not be load");
			return -1;
		}
		
		this.showlog("Crousel start showing...");
		
		this.position = 0.0;
		
		for(var i=0;i<this.imgItems.length;i++)
			this.imgItems[i].show();
		
		if(this.loadedImages == this.imgItems.length) {
			$(this.handleEl).show();
			this.restruct();
			this.showlog("Carousel showed");
		}
	},
	
	hide: function() {
		$(this.handleEl).hide();
		
		this.showlog("Carousel hided");
	},
	
	getSpeed: function() {
		var hp = this.handleParams;
		var speed = (this.pointer.x - hp.cX) / hp.cX * this.speed;
		return speed;
	},
	
	restruct: function() {
		var iCnt = this.imgItems.length;
		var zIndexes = Array(iCnt);
		var hp = this.handleParams;
		var ip = this.imgParams;
		var params = Array(iCnt);
		var newparams = Array(iCnt);
		for(var i=0;i<iCnt;i++) {
			var angleDegr = this.position + 360/iCnt*i;
			if(angleDegr>360.0) angleDegr -= 360.0;
			var angle = Math.PI * (angleDegr) / 180.0;
			params[i] = {pX: 0, pY: 0, w: 0, h: 0};
			var _w = (ip.maxW - ip.minW)*(Math.cos(angle)+1)/2 + ip.minW;
			var _h = (ip.maxH - ip.minH)*(Math.cos(angle)+1)/2 + ip.minH;
			var newProp = _w / _h;
			if(this.imgItems[i].prop > newProp)
				_h = Math.round(_w / this.imgItems[i].prop);
			else
				_w = Math.round(_h * this.imgItems[i].prop);
			_pX = hp.cX - Math.round(Math.sin(angle) * hp.sX / 2) - Math.round(_w/2);
			_pY = hp.cY + Math.round(Math.cos(angle) * hp.sY / 2) - Math.round(_h/2);
			_op = (Math.cos(angle)+1)/2;
			if(_op < 0.2) _op = 0.2;
			params[i] = {pX: _pX, pY: _pY, w: _w, h: _h, op: _op};
			zIndexes[i] = { ind: i, val: (Math.cos(angle)+1)/2 };
		}
		zIndexes.sort(
			function(X1, X2) {
				if(X1.val>X2.val)return 1;
				else if(X1.val<X2.val)return -1;
				else return 0;
			});
		for(i=0;i<iCnt;i++) {
			newparams[zIndexes[i].ind] = {
				pX: params[zIndexes[i].ind].pX,
				pY: params[zIndexes[i].ind].pY,
				w: params[zIndexes[i].ind].w,
				h: params[zIndexes[i].ind].h,
				zI: i,
				op: params[zIndexes[i].ind].op
			};
		}
		for(i=0;i<iCnt;i++){
			this.imgItems[i].params = newparams[i];
			this.imgItems[i].commit();
		}
	},
	
	nextStep: function() {
		this.exec = setTimeout(this.nextStep.bind(this), 100);
		this.position += this.step * this.getSpeed();
		if(this.position < 0.0) this.position += 360;
		else if(this.position > 360.0) this.position -= 360;
		this.restruct();
	},
	
	loadedImages: 0,
	
	imgLoaded: function(e) {
		this.loadedImages ++;
		
		if(this.loadedImages == this.imgItems.length) {
			$(this.handleEl).show();
			for(i=0;i<this.imgItems.length;i++){
				var dims = $(this.imgItems[i].imgHandle).getDimensions();
				this.imgItems[i].prop = dims.width / dims.height;
			}
			this.restruct();
			this.showlog("Carousel showed");
		}
	},
	
	eMouseMove: function(e) {
		this.pointer = {
			x: Event.pointerX(e) - this.offset.x,
			y: Event.pointerY(e) - this.offset.y
		};
	},
	
	eMouseOver: function(e) {
		this.exec = setTimeout(this.nextStep.bind(this), 100);
	},
	
	eMouseOut: function(e) {
		clearTimeout(this.exec);
	},
	
	showlog: function(tlog) {
		if(typeof console != 'undefined') {
			console.log(tlog);
		} 
	}
	
}

CarouselItem.prototype = {
	
	carousel: null,
	address: null,
	imgHandle: null,
	loaded: false,
	actDiv: null,
	
	params: {pX: 0, pY: 0, zI: 0, w: 0, h: 0, op: 0},
	prop: 0.0,
	
	initialize: function(par, address) {
		this.loaded = false;
		this.carousel = par;
		this.address = address;
		this.actDiv = document.createElement('div');
		$(this.actDiv).setStyle({
			//border: '1px solid red',
			position: 'absolute',
			background: 'transparent',
			visibility: 'hidden'
		});
		this.imgHandle = new Image();
		par.handleEl.appendChild(this.imgHandle);
		
		var ramkeImg = new Image();
		ramkeImg.src = '/images/ramka2.png';
		$(ramkeImg).setStyle({
			width: '100%',
			height: '100%'
		});
		this.actDiv.appendChild(ramkeImg);
		par.handleEl.appendChild(this.actDiv);
	},
	
	show: function() {
		if(!this.loaded) {
			$(this.imgHandle).observe("load",this.eLoad.bind(this));
			$(this.imgHandle).observe("load",this.carousel.imgLoaded.bind(this.carousel));
			this.imgHandle.src = this.address;
			$(this.imgHandle).setStyle({
				cursor: "pointer"
			});
			this.loaded = true;
		}
	},
	
	commit: function() {
		var p = this.params;
		$(this.imgHandle).setStyle({
			position: 'absolute',
			width: p.w+'px',
			height: p.h+'px',
			zIndex: p.zI,
			left: p.pX+'px',
			top: p.pY+'px',
			opacity: p.op
		});
		$(this.actDiv).setStyle({
			position: 'absolute',
			width: (p.w+10)+'px',
			height: (p.h+10)+'px',
			zIndex: p.zI+1,
			left: (p.pX)+'px',
			top: (p.pY)+'px',
			opacity: p.op
		});

//		if(typeof $(this.imgHandle).style.filter != 'undefined')
//			$(this.imgHandle).filters[0].opacity = Math.round(p.op*100);
	},
	
	displayRamka: function() {
		$(this.actDiv).setStyle({
			visibility: ''
		});
	},
	
	hideRamka: function() {
		$(this.actDiv).setStyle({
			visibility: 'hidden'
		});
	},
	
	eLoad: function(e) {
		this.showlog('Image "'+this.address+'" loaded');
	},
	
	showlog: function(tlog) {
		if(typeof console != 'undefined') {
			console.log(tlog);
		}
	}
	
}