function getWinHeight() {
  var myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight;
}

function getWinWidth() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

var beltconf = {
	
	el: null,
	
	belt: null,

	beltColor: 'black',
	rivetColor: 'gold',

	offset: 15,
	zoom:0.1,
	
	beltHeight: 300,
	beltWidth: 3600,
	containerWidth: 2200,
	
	charHeight: 130,
	charPixelLength: 0,
	
	textFieldValue: '',
	isFullSize: false,

	init: function() {
		this.el = Ext.select(".beltconf").item(0);
		
		if (this.el) {

			this.el.show();

			var textField = this.el.down('.control .text');
			var zoomIn = this.el.down('.view .zoomin');
			var zoomOut = this.el.down('.view .zoomout');
			var fullsize = this.el.down('.view .fullsizebtn');
			var cross = this.el.down('.control .cross');
			var heart = this.el.down('.control .heart');
			var peace = this.el.down('.control .peace');
			var at = this.el.down('.control .at');
			
			var beltBrown = this.el.down('.control .beltBrown');
			var beltBlack = this.el.down('.control .beltBlack');
			var rivetSilver = this.el.down('.control .rivetSilver');
			var rivetGold = this.el.down('.control .rivetGold');
			var rivetBlack = this.el.down('.control .rivetBlack');
			
			textField.addListener('keypress', this.textFieldKeyPress, this);
			textField.addListener('keyup', this.textFieldKeyUp, this);
			zoomIn.addListener('mousedown', this.zoomInMouseDown, this);
			zoomIn.addListener('mouseup', this.zoomInMouseUp, this);
			zoomOut.addListener('mousedown', this.zoomOutMouseDown, this);
			zoomOut.addListener('mouseup', this.zoomOutMouseUp, this);
			fullsize.addListener('click', this.fullSize, this);
			cross.addListener('click', this.crossClick, this);
			heart.addListener('click', this.heartClick, this);
			peace.addListener('click', this.peaceClick, this);
			at.addListener('click', this.atClick, this);
	
			beltBrown.addListener('click', this.beltBrownClick, this);
			beltBlack.addListener('click', this.beltBlackClick, this);
			rivetSilver.addListener('click', this.rivetSilverClick, this);
			rivetGold.addListener('click', this.rivetGoldClick, this);
			rivetBlack.addListener('click', this.rivetBlackClick, this);
			
			this.initZoom();
			this.loadBelt(this.beltColor);
			this.loadCharContainer();
			this.loadChars(textField.dom.value.toUpperCase(), this.rivetColor);
			this.zoomTo.defer(500, this, [0.22]);
		}
	},
	
	initZoom: function() {
		var view = this.el.down('.view');
		
		this.zoom = view.getWidth() / this.beltWidth
	},
	
	refreshAll: function() {
		var view = this.el.down('.view');
		view.select('img').remove();
		view.select('.charContainer').remove();
		
		this.loadBelt(this.beltColor);
		this.loadCharContainer();
		
		var textField = this.el.down('.control .text').dom;		
		this.removeChars();
		this.loadChars(textField.value.toUpperCase(), this.rivetColor);
	},
	
	loadBelt: function(color) {
		var view = this.el.down('.view');

		var value = color == 'black' ? 12: 13;
		Ext.get('beltinput').dom.value = value;

		var belts = this.el.select('.control .belt');
		belts.removeClass('highlight');

		var belt = this.el.down('.control .belt' + color.charAt(0).toUpperCase() + color.substr(1));
		belt.addClass('highlight');

		var top  = -Math.floor((this.beltHeight/2)*this.zoom)+(view.getHeight()/2);
		var left = -Math.floor((this.beltWidth/2)*this.zoom)+(view.getWidth()/2);
		
		var belt = view.createChild({
			tag: 'img',
			cls: 'belt',
			width: Math.floor(this.beltWidth*this.zoom),
			src: '/templates/gambio/beltconfigurator/data/belts/' + color + '.jpg',
			style: 'top:' + top + 'px;left:' + left + 'px'
		})
	},
	
	loadCharContainer: function() {
		var view = this.el.down('.view');

		var offsetLeft = -160;
		
		var top = -Math.round(((this.charHeight+5)/2)*this.zoom)+(view.getHeight()/2);
		var left = -Math.round((this.containerWidth/2)*this.zoom)+ (offsetLeft*this.zoom) +(view.getWidth()/2);
		var height = Math.round(this.charHeight*this.zoom);
		var width = Math.round(this.containerWidth*this.zoom)

		var charContainer = view.createChild({
			tag: 'div',
			cls: 'charContainer',
			style: 'height:' + height + 'px;width:' + width + 'px;left:' + left + 'px;top:' + top + 'px;'
 		})
	},
	
	loadChars: function(chars, color) {
		var charContainer = this.el.down('.view .charContainer');
		var textField = this.el.down('.control .text');
		
		var belts = this.el.select('.control .rivet');
		belts.removeClass('highlight');
		
		switch(color) {
			case 'gold': value = 16;
				break;
			case 'silver': value = 17;
				break;
			case 'black': value = 18;
				break;
		}
		Ext.get('rivetinput').dom.value = value;

		var belt = this.el.down('.control .rivet' + color.charAt(0).toUpperCase() + color.substr(1));
		belt.addClass('highlight');
		
		var tempChars = '';
		this.charPixelLength = 0;
		
		for (var i=0; i < chars.length; i++) {
			var char = chars.charAt(i);
			if (char == '{') {
				char = '';
				for (i = i; i < chars.length; i++) {
					if (chars.charAt(i) != '}') {
						char = char + chars.charAt(i);
					} else {
						char = char + '}';
						break;
					}
				}
			}
			
			image = this.loadChar(char, color);

			if (image.getTop() > charContainer.getTop() + (100*this.zoom)) {

				image.remove();
				break;
			} else {
				tempChars = tempChars + char;
			}
		}
		textField.dom.value = tempChars;
	},
	
	removeChars: function() {
		var charContainer = this.el.down('.view .charContainer');
		this.charPixelLength = 0;
		charContainer.select('.rivet').remove();
	},	
	
	loadChar: function(char, color) {
		var charContainer = this.el.down('.view .charContainer');

		if (char == '{CROSS}')
			char = 'cross';
			
		if (char == '{HEART}')
			char = 'heart';
			
		if (char == '{PEACE}')
			char = 'peace';

		if (char == ' ')
			char = 'space';
			
		if (char == '@')
			char = 'at';

		var margin = (this.offset/2) * this.zoom;

		var image = charContainer.createChild({
			tag: 'img',
			cls: 'rivet',
			height: this.charHeight*this.zoom,
			src: '/templates/gambio/beltconfigurator/data/rivets/' + color + '/' + char + '.png',
			style: 'padding-left:' + margin + 'px;padding-right:' + margin + 'px;'
		})
		
		return image;
	},
	
	textFieldKeyPress: function(e, t, o) {

		var textField = this.el.down('.control .text').dom;		
		var allowedKeys = [35,36,46,8,37,39];

		var char = String.fromCharCode(e.getKey());
		
		char = char.toUpperCase();
		
		if (this.checkChar(char)) {

		} else {
			if (allowedKeys.indexOf(e.keyCode) < 0) {
				e.stopEvent();
			}
		}
	},
	
	textFieldKeyUp: function(e,t,o) {
		var textField = this.el.down('.control .text').dom;		
		this.removeChars();
		this.loadChars(textField.value.toUpperCase(), this.rivetColor);
	},
	
	checkChar: function(char) {
		var allowedChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@{} ';
		char = char.toUpperCase();
		
		return allowedChars.indexOf(char) >= 0;
	},
	
	zoomInMouseDown: function(e, t, o) {
		Ext.TaskMgr.start({
			run: this.zoomIn,
			scope: this,
			args: [1, 0.02],
			interval: 10
		})
	},
	
	zoomInMouseUp: function(e, t, o) {
		Ext.TaskMgr.stopAll();
		var zoomIn = this.el.down('.view .zoomin');
		zoomIn.removeClass('highlight');
	},
	
	zoomIn: function(endZoom, step) {
		this.zoom = this.zoom + step;

		var zoomIn = this.el.down('.view .zoomin');
		zoomIn.addClass('highlight');

		if (this.zoom > endZoom) {
			this.zoom = endZoom;
			Ext.TaskMgr.stopAll();
			zoomIn.removeClass('highlight');
		}
		this.refreshAll();
	},

	zoomOutMouseDown: function(e, t, o) {
		Ext.TaskMgr.start({
			run: this.zoomOut,
			scope: this,
			args: [0.15, 0.02],
			interval: 10
		})
	},
	
	zoomOutMouseUp: function(e, t, o) {
		Ext.TaskMgr.stopAll();
		var zoomOut = this.el.down('.view .zoomout');
		zoomOut.removeClass('highlight');
	},
	
	zoomOut: function(endZoom, step) {
		this.zoom = this.zoom - step;

		var zoomOut = this.el.down('.view .zoomout');
		zoomOut.addClass('highlight');

		if (this.zoom < endZoom) {
			this.zoom = endZoom;
			Ext.TaskMgr.stopAll();
			zoomOut.removeClass('highlight');
		}
		this.refreshAll();
	},
	
	zoomTo: function(endZoom) {
		var startZoom = this.zoom;
		var step = 0.005;
		if (startZoom < endZoom) {
			
			Ext.TaskMgr.start({
				run: this.zoomIn,
				scope: this,
				args: [endZoom, step],
				interval: 10
			})	
		}
	},
	
	fullSize: function() {
		var fullsizeBtn = this.el.down('.view .fullsizebtn');

		Ext.TaskMgr.stopAll();

		if (this.el.hasClass('fullsize')) {
			this.el.removeClass('fullsize');

			fullsizeBtn.removeClass('highlight');
			this.el.clearPositioning();
			this.el.setWidth(this.tempWidth, false);

			this.initZoom();
			this.refreshAll();
			this.zoomTo.defer(500, this, [0.22]);
		}else {
			this.tempWidth = this.el.getWidth();			
			this.el.addClass('fullsize');
			this.el.position('absolute');
			fullsizeBtn.addClass('highlight');

			var width = getWinWidth() - 80;
						
			this.el.setWidth(width, false);
			this.el.setXY([(getWinWidth() / 2)-(width / 2),(getWinHeight() / 2)-(this.el.getHeight() / 2)], false);
			this.initZoom();
			this.refreshAll();
		}
	},
	
	crossClick: function() {
		var textField = this.el.down('.control .text').dom;
		textField.value = textField.value + '{cross}';
		this.refreshAll();
	},
	
	heartClick: function() {
		var textField = this.el.down('.control .text').dom;
		textField.value = textField.value + '{heart}';
		this.refreshAll();
	},
	
	peaceClick: function() {
		var textField = this.el.down('.control .text').dom;
		textField.value = textField.value + '{peace}';
		this.refreshAll();
	},
	
	atClick: function() {
		var textField = this.el.down('.control .text').dom;
		textField.value = textField.value + '@';
		this.refreshAll();
	},
	
	beltBrownClick: function() {
		this.beltColor = 'brown';
		this.refreshAll();
	},
	
	beltBlackClick: function() {
		this.beltColor = 'black';
		this.refreshAll();
	},
	
	rivetSilverClick: function() {
		this.rivetColor = 'silver';
		this.refreshAll();
	},
	
	rivetGoldClick: function() {
		this.rivetColor = 'gold';
		this.refreshAll();
	},
	
	rivetBlackClick: function() {
		this.rivetColor = 'black';
		this.refreshAll();
	}
};

Ext.onReady(beltconf.init, beltconf);