function Map( frame ) {
	this.frame = frame;
	this.tiles = [];
	this.dragging = false;
	this.timer = null;
	this.loadData = function(){
		new Ajax.Request('/ajax.php?request=gettiles', {
			onSuccess: this.process.bind(this)
		} );
	}
	this.process = function( transport ) {
		var data = transport.responseText.evalJSON(true);
		this.size = data.mapsize;
		var sizes = this.frame.getDimensions();
		var place = this.frame.viewportOffset();
		this.viewport = {
			left: place.left,
			top: place.top,
			right: sizes.width + place.left,
			bottom: sizes.height + place.top,
			width: sizes.width,
			height: sizes.height
		};
		data.tiles.each( (function( options ) {
			this.tiles.push(
				new Tile( options, this  )
			);
		}).bind(this) );
		this.current = {
			x:data.start.x + this.viewport.width/2,
			y:data.start.y + this.viewport.height/2
		};
		this.frame.observe( 'mousedown', this.startdrag );
		document.observe( 'mousemove', this.mousemove );
		document.observe( 'mouseup', this.stopdrag );
		this.draw();
	}
	this.startdrag = (function(event){
		if ( !Event.isLeftClick(event) ) {
			return;
		}
		this.linked = Event.element(event).up('.tile');
		if ( this.linked != null ) {
			this.linking = true;
		}
		this.dragging = true;
		this.moveframes = 0;
		this.drag = {
			x : Event.pointerX(event) - this.current.x,
			y : Event.pointerY(event) - this.current.y
		};
		Event.stop(event);
	}).bind(this);
	this.mousemove = (function(event){
		if ( this.dragging ) {
			this.current.x = Event.pointerX(event) - this.drag.x;
			this.current.y = Event.pointerY(event) - this.drag.y;
			this.moveframes++;
			if ( this.moveframes > 5) {
				this.linking = false;
				this.moveframes = 0;
				this.draw();
			}
		}
		Event.stop(event);
	}).bind(this);
	this.stopdrag = (function(event){
		if ( this.dragging ) {
			if ( this.linking > 0 ) {
				swfobject.embedSWF(
					'TdValleyOfPower.swf',
					'mapframe',
					'800',
					"600",
					'9.0.0'
				);
			}
			this.dragging = false;
		}
		Event.stop(event);
	}).bind(this);
	this.draw = function() {
		this.tiles.each( (function(tile){
			tile.drawOn(this.current.x, this.current.y);
		}).bind(this) );
	}
}

function Tile( options, map ){
	this.offset = { x:options.x, y:options.y };
	this.tile = options.tile;
	this.camp = options.camp;
	this.alt = options.alt;
	this.id = options.id;
	this.map = map;
	this.pos = { x:0, y:0 };
	this.handle = null;
	this.width = 138;
	this.height = 110;
	this.rowheight = 80;
	this.wasInView = false;
	this.drawOn = function( x, y ) {
		this.placeOn(x,y);
		var isInView = this.inview();
		if ( this.wasInView || isInView ) {
			if ( this.handle == null ) {
				this.create();
			}
			this.handle.setStyle( {
				left: this.pos.x + 'px',
				top:  this.pos.y + 'px'
			} );
		}
		this.wasInView = isInView;
	};
	this.placeOn = function( x, y ) {
		this.pos.x = x + this.offset.x;
		this.pos.y = y + this.offset.y;
		if ( this.pos.x > this.map.viewport.width) {
			while ( this.pos.x > this.map.viewport.width ) {
				this.pos.x -= this.width * ( this.map.size + 1);
			}
		}
		else {
			while ( this.pos.x + this.width < 0) {
				this.pos.x += this.width * ( this.map.size + 1);
			}
		}
		if ( this.pos.y > this.map.viewport.height) {
			while ( this.pos.y > this.map.viewport.height ) {
				this.pos.y -= this.rowheight * ( this.map.size + 1);
			}
		}
		else {
			while ( this.pos.y + this.height < 0) {
				this.pos.y += this.rowheight * ( this.map.size + 1);
			}
		}
	}
	this.create = function() {
		this.handle = new Element('div',{
			'id':this.id,
			'class':'tile'
		});
		this.map.frame.appendChild(this.handle);
		var img = new Element('img',{
			src:this.tile,
			alt:this.alt,
			title:this.alt
		});
		this.handle.appendChild(img);
		if ( this.camp != '' ) {
			img = new Element('img',{
				src:this.camp,
				alt:this.alt,
				title:this.alt
			});
			img.setStyle({
				position:'absolute',
				top:'5px',
				left:'21px'
			});
			this.handle.appendChild(img);
		}
	};
	this.inview = function() {
		if (
			this.pos.x + this.width > 0 &&
			this.pos.x < this.map.viewport.width &&
			this.pos.y + this.height > 0 &&
			this.pos.y < this.map.viewport.height ) {
			return true;
			}
		else {
			return false;
		}
	}
}

var map;
document.observe('dom:loaded',function(){
	map = new Map($('mapframe'));
	map.loadData();
} );