/* **** start define SelectedSample **** */
colorapp.SelectedSample = function( paletteJSON ) {
	this.colors;
	this.init( paletteJSON );
}
	colorapp.SelectedSample.prototype.states = {
		'showColors':      'getColors',
		'showDarkToLight': 'getDarkToLight',
		'showLightToDark': 'getLightToDark'
	}
	colorapp.SelectedSample.prototype.validColorSets = [ 'getColors', 'getDarkToLight', 'getLightToDark' ];

	colorapp.SelectedSample.prototype.init = function( paletteJSON ) {
		this.colors = new colorapp.Colors( paletteJSON.color1, paletteJSON.color2, paletteJSON.color3, paletteJSON.color4 );
		this.setUpSelectedColors();
	}

	/* **** start define setUpSelectedColors **** */
	/**
	 *	Once colorapp.colors is set as a new colorapp.Colors object you can run this to set up
	 *	the selected color section.
	*/
	colorapp.SelectedSample.prototype.setUpSelectedColors = function() {
		this.setColorsBox();
		this.setDarkToLightBox();
		this.setLightToDarkBox();
		this.setSelectedColorSetBox();
	};
	/* **** end define setUpSelectedColors **** */

		colorapp.SelectedSample.prototype.setSelectedSampleColorSet = function( id, sortedColorSet, label ) {
			var ele = xGetElementById( id );
			var sqrs = xGetElementsByClassName( 'box', ele );
			var cs = sortedColorSet;
			for ( var i=0; i<cs.length; i++ ) {
				sqrs[i].style.backgroundColor = cs[i].toHexColor();
				sqrs[i].style.color = cs[i].getContrastColor();
				sqrs[i].innerHTML = ''
					+ '<p style="text-align:center;">' + cs[i].toHexColor() + '</p>'
				;
			}
		}

	colorapp.SelectedSample.prototype.setColorsBox = function() {
		this.setSelectedSampleColorSet( 'showColors', this.colors.getColors(), 'Colors' );
	}

	colorapp.SelectedSample.prototype.setDarkToLightBox = function() {
		this.setSelectedSampleColorSet( 'showDarkToLight', this.colors.getDarkToLight(), 'Dark To Light' );
	}

	colorapp.SelectedSample.prototype.setLightToDarkBox = function() {
		this.setSelectedSampleColorSet( 'showLightToDark', this.colors.getLightToDark(), 'Light To Dark' );
	}

	colorapp.SelectedSample.prototype.setSelectedColorSetBox = function(selectedColorSet) {
		function setBGColor( eleOrId, color ) {
			var bg = xGetElementById( eleOrId );
			bg.style.backgroundColor = color;
		}
		function setColor( eleOrId, color ) {
			var bg = xGetElementById( eleOrId );
			bg.style.color = color;
		}

		var isValid = false;
		for ( var i=0; i<this.validColorSets.length; i++ ) {
			if ( selectedColorSet == this.validColorSets[i] ) {
				isValid = true;
			}
		}
		if ( !isValid ) {
			selectedColorSet = 'getLightToDark';
		}

		var cs = this.colors[ selectedColorSet ]();
		this.setSelectedSampleColorSet( 'selectedColorSet', cs, 'Selected Color Set' );

		var cBackground = cs[0].toHexColor();
		var cStripe     = cs[1].toHexColor();
		var cLinks      = cs[2].toHexColor();
		var cColor      = cs[3].toHexColor();

		var disp = xGetElementById( 'display' );
		colorapp.colorScheme.setPageBackground( cs[0], disp );
		colorapp.colorScheme.setPageText( cs[3], disp );

		colorapp.colorScheme.setHeaderText( cs[3] );
		colorapp.colorScheme.setStripe( cs[1] );
		colorapp.colorScheme.setNavBorder( cs[0] );

		colorapp.colorScheme.setNavLink( cs[0] );
		colorapp.colorScheme.setNavLinkBackground( cs[1] );
		colorapp.colorScheme.setNavLinkHover( cs[2] );
		colorapp.colorScheme.setNavLinkHoverBackground( cs[0] );

		colorapp.colorScheme.setPageLink( cs[2] );
		colorapp.colorScheme.setPageLinkHover( cs[1] );

	}
/* **** end define SelectedSample **** */