//default values
var PLAYERSEED_WIDTH = '400';
var PLAYERSEED_HEIGHT = '255';

var playerCustomization = null;

var PlayerCustomization = new Class({
	initialize: function(wrapperID, generateCodePlayerSeedObj, playerSeedIndex) {
		var classRef = this;
		this.wrapper = $(wrapperID);
		this.generateCodePlayerSeedObj = generateCodePlayerSeedObj;
		this.playerSeedIndex = playerSeedIndex;

		this.txtPlayerWidth = this.wrapper.getElement("input[name=txtPlayerWidth]");
		this.txtPlayerHeight = this.wrapper.getElement("input[name=txtPlayerHeight]");
		this.ratioButtons = this.wrapper.getElements("input[name=group" + this.playerSeedIndex + "]");
		this.txtColor = this.wrapper.getElement("input[name=txtColor]");
		this.chkTextOnHeader = this.wrapper.getElement(".id-chkTextOnHeader");

		this.FillSizes(); //Set default sizes (set playerSeed.width and playerSeed.height in HTML of GetPlayerSeed.ascx)

		this.txtPlayerWidth.addEvent('blur', function(e) {
			this.WidthBlur();
		} .bind(this));

		this.txtPlayerHeight.addEvent('blur', function(e) {
			this.HeightBlur();
		} .bind(this));

		$$(this.ratioButtons[0], this.ratioButtons[1]).addEvent('click', function(e) {
			this.FillSizes(); //return textBox's values after click on custom
			this.completePlayerHeightRatio();
		} .bind(this));

		this.ratioButtons[2].addEvent('click', function(e) {
			this.txtPlayerWidth.value = '';
			this.txtPlayerHeight.value = '';

			if (this.generateCodePlayerSeedObj)
				this.generateCodePlayerSeedObj.generate();
		} .bind(this));

		var trigger = this.wrapper.getElement(".colorpicker-trigger");

		var _changeColorTimeout = null;

		this.colorPicker = new ColorPicker(
			this.wrapper.getElement(".colorpicker-input"),
				this.wrapper.getElement(".colorpicker-trigger"),
			{
				onChange: function(color) {
					if (_changeColorTimeout)
						_changeColorTimeout = $clear(_changeColorTimeout);

					_changeColorTimeout = function() {
						classRef.ChangeColor();
					} .delay(500);
				}
			}
		);

		var ulColorPicker = this.wrapper.getElement(".colors ul");

		var colors = ulColorPicker.getElements("span");

		for (var i = 0; i < colors.length; i++) {
			colors[i].addEvent('click', function(e) {

				classRef.txtColor.value = this.getStyle('background-color');
				classRef.ChangeColor();
				trigger.style.backgroundColor = this.style.backgroundColor;
			});
		}
	},

	WidthBlur: function() {

		if (getRadioGroupIndex(this.ratioButtons) == 2)//custom
		{
			var hasWidth = this.LimitWidth();

			if (hasWidth && Trim(this.txtPlayerHeight.value) != '') //user fill width and height
			{
				this.loadPlayerSeed();

				if (this.generateCodePlayerSeedObj != null)
					this.generateCodePlayerSeedObj.generate();
			}
		}
		else
			this.completePlayerHeightRatio();
	},

	HeightBlur: function() {

		if (getRadioGroupIndex(this.ratioButtons) == 2)//custom
		{
			var hasHeight = this.LimitHeight();

			if (hasHeight)
				this.AddHeight();

			if (hasHeight && Trim(this.txtPlayerWidth.value) != '') //user fill width and height
			{
				this.loadPlayerSeed();

				if (this.generateCodePlayerSeedObj != null)
					this.generateCodePlayerSeedObj.generate();
			}
		}
		else
			this.completePlayerWidthRatio();
	},

	FillSizes: function() {
		this.txtPlayerWidth.value = playerSeed.width;
		this.txtPlayerHeight.value = playerSeed.height;
	},

	ChangeColor: function() {

		//if pick the same color - return
		if (playerSeed.videoControlDisplayColor == this.txtColor.value)
			return;

		playerSeed.videoControlDisplayColor = this.txtColor.value;
		playerSeed.Load();

		if (this.generateCodePlayerSeedObj != null)
			this.generateCodePlayerSeedObj.generate();
	},

	LimitWidth: function() {

		if (this.txtPlayerWidth.value == '')
			return false;

		//set minimum width
		if (parseInt(this.txtPlayerWidth.value) < 300) {
			this.txtPlayerWidth.value = '300';
		}
		//set maximum width
		if (parseInt(this.txtPlayerWidth.value) > 600) {
			this.txtPlayerWidth.value = '600';
		}
		return true;
	},

	LimitHeight: function() {

		if (this.txtPlayerHeight.value == '')
			return false;

		//set minimum height
		if (parseInt(this.txtPlayerHeight.value) < 169) {
			this.txtPlayerHeight.value = '169';
		}
		//set maximum height
		if (parseInt(this.txtPlayerHeight.value) > 500) {
			this.txtPlayerHeight.value = '500';
		}
		return true;
	},

	completePlayerWidthRatio: function() {

		this.LimitHeight();

		//subtract 30 for control panel of player
		var height = parseInt(this.txtPlayerHeight.value) - 30;

		//if player has header - subtract 20
		if (this.chkTextOnHeader && this.chkTextOnHeader.checked)
			height -= 20;

		switch (getRadioGroupIndex(this.ratioButtons)) {
			case 0:
				this.txtPlayerWidth.value = Math.round(height / 9 * 16);
				break;
			case 1:
				this.txtPlayerWidth.value = Math.round(height / 3 * 4);
				break;
		}

		this.loadPlayerSeed();

		if (this.generateCodePlayerSeedObj != null) {
			this.generateCodePlayerSeedObj.generate();
		}
	},

	completePlayerHeightRatio: function() {

		this.LimitWidth();

		switch (getRadioGroupIndex(this.ratioButtons)) {
			case 0:
				this.txtPlayerHeight.value = Math.round(this.txtPlayerWidth.value / 16 * 9);
				break;
			case 1:
				this.txtPlayerHeight.value = Math.round(this.txtPlayerWidth.value / 4 * 3);
				break;
		}

		this.AddHeight();

		this.loadPlayerSeed();

		//no generateCode in AccountSettings.aspx (I send null from there to generateCodePlayerSeedObj parameter)
		if (this.generateCodePlayerSeedObj != null)
			this.generateCodePlayerSeedObj.generate();
	},

	AddHeight: function() {
		//add 30 for control panel of player
		this.txtPlayerHeight.value = parseInt(this.txtPlayerHeight.value) + 30;

		//if player has header - add 20
		if (this.chkTextOnHeader && this.chkTextOnHeader.checked)
			this.txtPlayerHeight.value = parseInt(this.txtPlayerHeight.value) + 20;
	},

	loadPlayerSeed: function() {
		playerSeed.width = this.txtPlayerWidth.value;
		playerSeed.height = this.txtPlayerHeight.value;
		playerSeed.Load();
	}
});