/*	PAX Hint (tool-tip) demo
	
	The below javascript will add hints to various elements.
*/
pax.load.onloaded( function() {
	//	Simple hint, with all the default options
	pax.widget.hint.init( {
		'hintme': 'Just text in the initialisation, using the defaultModel for the configuration'
	} );
	
	//	Two hints initialised in one statement, and the use of default configuration options (2nd argument).
	pax.widget.hint.init( {
		'hintme2': {
			message: 'This text is offset, to show below the element, and has default delays',
			x: -70,
			y: 16
		},
		'hintme3': {
			//	Note the use of opacity: 0, as we're applying the pax.fx.fadeIn function on show.
			hideFunc: pax.fx.fadeOut,
			opacity: 0,
			showFunc: pax.fx.fadeIn,
			message: 'This text fades in and out, with a hide delay of 1000ms (overridden from 300ms)',
			showDelay: 0,
			hideDelay: 1000
		}
	}, {	//	Set defaults for all hints. You could optionally set show and hide function here
		width: 200,
		showDelay: 200,
		hideDelay: 300
	} );
	
	//	Hint with various options including a chained effect for showing the hint.
	pax.widget.hint.init( {
		'hintme4': {
			message: 'Here we set the CSS class, custom show function<br/><br/>Click to hide.',
			opacity: 0,
			hintClass: 'errorMessage',
			showFunc: function( id ) {
				var ele = pax.$( id );
				ele.style.display = 'none';
				ele.style.overflow = 'hidden';
				pax.util.setPosition( ele, { height: 0 } );
				pax.css.opacity( ele, 100 );
				pax.fx.chain( [
					{	target: id,
						effect: 'reveal',
						value: { endSize: 90 },
						duration: 1000,
						direction: true
					},
					{	effect: 'colourFade', 
						value: {startColour: 'ffaaaa', endColour: 'ffffff'},
						duration: 500
					},
					{	effect: 'colourFade', 
						value: {startColour: 'ffffff', endColour: 'ffaaaa'},
						duration: 300
					}
				] );
			},
			clickToHide: true
		}
	} );
	
	//	This uses the title by default
	pax.widget.hint.init( ['hintme5'] );
	
	//	This uses the alt attribute, and fades in / out
	pax.widget.hint.init( {
		'hintme6': {
			messageAttribute: 'ALT',
			hideFunc: pax.fx.fadeOut,
			opacity: 0,
			showFunc: pax.fx.fadeIn
		},
		'hintme7': {
			hintClass: 'hintGrowMessage',
			width: '',
			message:	'This is a test for a wide text hint.<br/>' +
						'Notice that we set the width to empty string in the initialisation<br/>' +
						'The hint will grow with the content.'
		}
	} );

	//	This uses the title by default
	pax.widget.hint.init( ['hintme8'], {
		hideDelay: 2000,
		dontHideOnHover: true
	} );
	
    //	This shows the hint both on mouseover and focus
	pax.widget.hint.init( {
        'hintme9': {
            message: 'You can also use hints in the validation system, with complete control over individual hints!',
            events: ['mouseover', 'focus']
        }
	} );
	
	
} );