var BentLines = Class.create({
	initialize: function(){
		this.TileSize		= 25;
		this.TileOffset		= 31;
		this.Diamonds 		= [];
		Event.observe(window, 'load', function(){
			this.CanvasWidth	= Math.floor(parseInt($('Canvas').offsetWidth / this.TileSize) - 1);
			this.CanvasHeight 	= Math.floor(parseInt($('Canvas').offsetHeight / this.TileSize) - 1);
			this.drawDiamonds();				   
		}.bind(this));
	},
	
	drawDiamonds: function(){
		for(var Y = 0; Y < this.CanvasHeight; Y++){
			for(var X = 0; X < this.CanvasWidth; X++){
				var Index = (Y * this.CanvasHeight) + X;
				this.Diamonds[Index] = new this.Diamond(X, Y, Index);
			}
		}
	},
	
	Diamond: Class.create({
		initialize: function(X, Y, Index){
			this.Element			= document.createElement('div');
			this.Index				= Index;
			this.X					= X;
			this.Y					= Y;
			
			if(this.Index % 2 == 0){
				this.State = 'V';
			}else{
				this.State = 'H';
			}
			
			var PaddingY = parseInt($('Canvas').offsetTop + App.TileOffset);
			var PaddingX = parseInt($('Canvas').offsetLeft + App.TileOffset);

			this.Element.className	= 'Diamond ' + this.State;
			this.Element.style.top	= parseInt(this.Y * App.TileSize + PaddingY) + 'px';
			this.Element.style.left	= parseInt(this.X * App.TileSize + PaddingX) + 'px';
			
			Event.observe(this.Element, 'click', function(){
				if(this.className == 'Diamond V'){
					this.className = 'Diamond H';
				}else{
					this.className = 'Diamond V';
				}
			})
			
			$('Canvas').appendChild(this.Element);
		}
	})
});

var App = new BentLines;