var Panorama = new Class({
	options: {
		left: '0',
		top: '0',
		fx: {
		},
		onStart: Class.empty,
		onComplete: Class.empty,
		onReady: Class.empty
	},
	
	
	initialize: function(path, el, options){
		this.setOptions(options);
		this.limit = {};
		this.chains = [];
		this.windowDims = $(el).getStyles('width', 'height');
		this.image = new Asset.image(path, {onload: function(){
				this.image.setStyles({
					left: -(this.options.left.toInt()),
					top: -(this.options.top.toInt())
					
				}).injectInside(el);
				this.limit.x = this.windowDims.width.toInt() - this.image.width;
				this.limit.y = this.windowDims.height.toInt() - this.image.height;
				this.imagegable = this.image.makeDraggable({
					limit: {
						x: [this.limit.x, 0],
						y: [this.limit.y, 0]
					},
					onStart: function(){						
						this.moveFx.stop();
						this.clearChain();
						this.fireEvent('onStart', 5);
					}.bind(this),
					onComplete: function(){
						this.fireEvent('onComplete', 5);
					}.bind(this)
				});
				this.moveFx = new Fx.Styles(this.image, this.options.fx).addEvent(
						'onComplete', function(){
							this.callChain();
							this.fireEvent('onComplete', 5);
						}.bind(this)).addEvent(
						'onStart', function(){
							this.fireEvent('onStart', 5);
						}.bind(this)
				);
				this.fireEvent('onReady', 5);
				
		
				
			}.bind(this) 
		});
	},

/*
	Property: move
*/

	move: function(dX, dY){		
		if(this.moveFx.timer){this.addToChain(this.move, [dX, dY]);}
		var current = [this.image.getStyle('left').toInt(), this.image.getStyle('top').toInt()];
		var newX = dX ? (current[0] - dX).limit(this.limit.x, 0) : current[0];
		var newY = dY ? (current[1] - dY).limit(this.limit.y, 0) : current[1];
		this.moveFx.start({
			center: newX,
			center: newY
		});
		return this;
	},
		
		
	loka: function(dX, dY){	
		document.getElementById('kodnastr').innerHTML='?x='+dX+'&y='+dY; //innerHTML
	//$('kodnastr').innerHTML='?x='+dX+'&y='+dY;
	 kx=dX; ky=dY;
		if(this.moveFx.timer){this.addToChain(this.move, [dX, dY]);}
		var current = [this.image.getStyle('left').toInt(), this.image.getStyle('top').toInt()];
		var newX = (-dX+300) ? (-dX+300).limit(this.limit.x, 0) : (-dX+300);
		var newY = (-dY+300) ? (-dY+300).limit(this.limit.y, 0) : (-dY+300);
			
		this.moveFx.start({
			left: newX,
			top: newY
		});						
		return this;		
	},
		
		
 ramkaplay: function(dX, dY){	
			if(this.moveFx.timer){this.addToChain(this.move, [dX, dY]);}
		var current = [this.image.getStyle('left').toInt(), this.image.getStyle('top').toInt()];
		var newX = (-dX+300) ? (-dX+300).limit(this.limit.x, 0) : (-dX+300);
		var newY = (-dY+300) ? (-dY+300).limit(this.limit.y, 0) : (-dY+300);
			
		this.moveFx.start({
			left: newX,
			top: newY
		});						
		return this;		
	},
/*
	Property: jump
		
*/
/*
	jump: function(where){
		if(this.moveFx.timer){this.addToChain(this.jump, where);}
		var words = where.split(' ');
		var top = words.contains('top') ? 0 : words.contains('bottom') ? this.limit.y : this.image.getStyle('top');
		var left = words.contains('left') ? 0 : words.contains('right') ? this.limit.x : this.image.getStyle('left');
		this.moveFx.start({
			left: left,
			top: top
		});
		return this;
	},


*/
	addToChain: function(fn, args){
		this.chains.push(fn.pass(args, this));
	}
});

Panorama.implement(new Options, new Chain, new Events);
/*
 $('one').addEvent('click', function(){
		koko.move(0, -100);
	});
	$('two').addEvent('click', function(){
		koko.move(0, 100);
	});
	$('three').addEvent('click', function(){
		koko.move(-100, 0);
	});
	$('four').addEvent('click', function(){
		koko.move(100, 0);
	});
	$('five').addEvent('click', function(){
		koko.jump('bottom');
	});
	$('six').addEvent('click', function(){
		koko.jump('left');
	});
  <a href="#" id="one">вверх(0, -50)</a><br/>
  <a href="#" id="two">вниз(0, 50)</a><br/>
  <a href="#" id="three">влево(-100, 25)</a><br/>
  <a href="#" id="four">вправо('top left')</a><br/>
  <a href="#" id="five">jump('bottom')</a><br/>
  <a href="#" id="six">jump('лево')</a><br/>
*/