/**
 * @browser IE8
 * An issue exists in IE where the `innerHTML' property of elements added to
 * the DOM during the onload event are not accessible.
 */
function visage_maxlength( obj ) {
	if( obj.value.length > obj.maxLength ) {
		obj.value = obj.value.substring( 0, obj.maxLength );
	}
	
	var wordCount = obj.maxLength - obj.value.length;
	var wordCountElement = document.createElement( 'strong' );
	wordCountElement.appendChild( document.createTextNode( wordCount ) );
	
	clearNode( obj.statusBar );
	obj.statusBar.appendChild( wordCountElement );
	obj.statusBar.appendChild( document.createTextNode(
		' Character'+( wordCount == 1 ? '' : 's' )+' Remaining'
	) );
}

function show_definition( def ) {
/*	def.style.top	=
		(getObjY( this ) + getObjHeight( this ))
			+ 'px';

	def.style.left	=
		(getObjX( this ) + 24 + (isIE() ? 18 : 0))
			+ 'px';
		
	def.style.width =
		(getObjWidth( this ) - 20)
			+ 'px'*/
	
	def.style.display = 'block';
	
	if( isIE6( ) ) {
		this.style.color = '#3366FF';
		this.style.cursor = 'pointer';
	}
	
	if( isIE( ) ) {
		def.style.backgroundColor = 'white';
	}
}

function hide_definition( def ) {
	def.style.display = 'none';
	
	if( isIE6( ) ) {
		this.style.color = '';
		this.style.cursor = 'default';
	}
}

function visage_attach_attributes( ) {
	
	var txtArr = document.getElementsByTagName( 'textarea' );
	var iptArr = document.getElementsByTagName( 'input' );
	var divArr = document.getElementsByTagName( 'div' );
	var fldSetArr = document.getElementsByTagName( 'fieldset' );
	var lblArr = document.getElementsByTagName( 'label' );
	var trArr = isIE6( ) ? [] : $$( 'tr[class*=hier]' );
	
	var ctlArr = [];

	for( var ii = 0; ii < txtArr.length; ii++ ) {
		ctlArr.push( txtArr[ii] );
		}

	for( var ii = 0; ii < iptArr.length; ii++ ) {
		ctlArr.push( iptArr[ii] );
		}
		
	for( var ii = 0; ii < divArr.length; ii++ ) {
		ctlArr.push( divArr[ii] );
		}
	
	for( var ii = 0; ii < fldSetArr.length; ii++ ) {
		ctlArr.push( fldSetArr[ ii ] );
	}
	
	for( var ii = 0; ii < lblArr.length; ii++ ) {
		ctlArr.push( lblArr[ ii ] );
	}
	
	for( var ii = 0; ii < trArr.length; ii++ ) {
		ctlArr.push( trArr[ ii ] );
	}
	
	if( ctlArr ) {
		for( var ii = 0; ii < ctlArr.length; ii++ ) {
			var attr = ctlArr[ii].className.split( ' ' );
			var ctl	 = $( ctlArr[ii] );
			for( var jj = 0; jj < attr.length; jj++ ) {
				if( attr[jj].length > 1 ) {
					var p = attr[jj].split( ':' );
					if( p.length > 1 ) {
						switch( p[0] ) {
							
							case 'hier':
								ctl.addEvents( {
									 'mouseenter': function( e, id ) {
										$$( 'tr.sib-'+id ).addClass( 'siblings' );
									  }.bindWithEvent( null, p[1] )
									
									,'mouseleave': function( e, id ) {
										$$( 'tr.sib-'+id ).removeClass( 'siblings' );
									  }.bindWithEvent( null, p[1] )
								} );
								break;
							
							case 'tab':
								var tabViewId = p[0]+':'+p[1];
								ctl = $( ctl );
								
								if( !$( tabViewId ) ) {
									var tabView = getSplayTabCollection( tabViewId );
									tabView.attach( ctl, 'before' );
								}
								
								tabView.add( new SplayTab(
									  decodeURIComponent( p[3] )
									, ctl
								) );
								
								break;
							
							case 'tabToggle':
								var tabView = getSplayTabCollection( 'tab:'+p[1] );
								var tabLabel = decodeURIComponent( p[2] );
								var checkBox = $( ctl.htmlFor );
								
								checkBox.onclick = bind(
									  checkBox
									, function( label ) {
										if( this.checked ) {
											tabView.showLabel( label );
										}
										else {
											tabView.hideLabel( label );
										}
									  }
									, tabLabel
								);
								
								if( !checkBox.checked ) {
									tabView.hideLabel( tabLabel );
								}
								break;
							
							case 'autosize':
								var yes	= (p[1] == 'yes');
								if( yes ) {
									if( !ctlArr[ii].style.height ) {
										var vlen = ctlArr[ii].value.length;
										ctlArr[ii].style.height =
											 parseInt( 6 + vlen / 66 )
											+'em';
										}
									}
								break;
								
							case 'maxlength':
								var maxlen = parseInt( p[1] );
								
								ctlArr[ii].statusBar =
									appendSibling(
										 ctlArr[ii]
										,document.createElement( 'div' )
										);

								ctlArr[ii].statusBar.className =
									'viStatusBar';
										
								ctlArr[ii].maxLength	= parseInt( p[1] );
								
								ctlArr[ii].onkeyup		=
								ctlArr[ii].onchange		=
									bind(
										 null
										,visage_maxlength
										,ctlArr[ii]
										);
									
								if( ctlArr[ii].tagName == 'textarea' ) {
									ctlArr[ii].style.height	=
										parseInt(
											 6 + ctlArr[ii].maxLength / 66
											) + 'em';
									}
										
										
								visage_maxlength( ctlArr[ii] );
								
								break;
							}
						}
					else {
						switch( p[ 0 ] ) {
							case 'wysiwyg':
								ctl = ctl.getElementsByTagName( 'textarea' )[0];
								if( !ctl.style.height ) {
									var vlen = 6 + ctl.value.length / 66;
									var maxlen = window.screen.availHeight * .7;
									ctl.setStyle( 'height', parseInt( vlen )+'em' );
									ctl.setStyle( 'height', parseInt(
										Math.min( getObjHeight( ctl ), maxlen )
									)+'px' );
								}
								tinyMCE.execCommand(
									 'mceAddControl'
									, false
									, ctl.id
								);
								break;
								
							case 'copy':
								$( ctl ).getFirst( ).addEvent(
									 'change'
									, function( ) {
										this.set( 'tween', { duration: 'short' } );
										this.tween( 'background-color', '#fff' );
									  }
								);
								break;
							
							case 'collapsable':
							case 'expandable':
								var lgnd = ctl.getElementsByTagName( 
									'legend'
								);
								if( lgnd ) {
									lgnd = lgnd[ 0 ];
									lgnd.onclick = bind(
										  lgnd
										, toggle_fieldset
										, ctl
									);
								}
								break;
							
							case 'definition':
								var lbl = ctl
									.parentNode
									.getElementsByTagName( 'label' )[ 0 ];
								
								var inpt = ctl
									.parentNode
									.getElementsByTagName( 'input' )[ 0 ];
								
								if( lbl ) {
//									ctl.parentNode.removeChild( ctl );
//									document.body.appendChild( ctl );
									ctl.className = 'viHoverDefinition';
									
/*									if( isIE6( ) ) {
										continue;
									}*/
									
									lbl.onfocus
										= lbl.onmouseover
										= inpt.onfocus
										= inpt.onmouseover
//										= ctl.onfocus
//										= ctl.onmouseover
										= bind( lbl, show_definition, ctl );

									lbl.onblur
										= lbl.onmouseout
										= lbl.onclick
										= inpt.onblur
										= inpt.onmouseout
										= inpt.onclick
//										= ctl.onblur
//										= ctl.onmouseout
//										= ctl.onclick
										= bind( lbl, hide_definition, ctl );
									}
								break;
							}
						}
					}
				}
			}
		}
	}

function toggle_fieldset( fldSet ) {
	var newClassName = 'collapsable';
	var oldClassName = 'expandable';
	
	if( hasClass( fldSet, 'collapsable' ) ) {
		newClassName = 'expandable';
		oldClassName = 'collapsable';
	}
	
	swapClass( fldSet, newClassName, oldClassName );
}

function visage_attach_array_ctls( ) {
	var path = auri( 'resource/image/splay/' );
	
	var addBtn = new Asset.image(
		  path+'add.png'
		, { 'title': 'Add a new one' }
	).addClass( 'add' );
	
	var delBtn = new Asset.image(
		  path+'remove.png'
		, { 'title': 'Delete this one' }
	).addClass( 'remove' );
	
	var mvUBtn = new Asset.image(
		  path+'up.png'
		, { 'title': 'Move up one' }
	).addClass( 'up' );
	
	var mvDBtn = new Asset.image(
		  path+'down.png'
		, { 'title': 'Move down one' }
	).addClass( 'down' );
	
	var onclick = function( e, ctlGroup, arrayGroup ) {
		switch( this.get( 'type' ) ) {
			case 'add':
				var newCtlGroup = ctlGroup.clone( );
				newCtlGroup.getElements( '.nav' )[0].destroy( );
				cloneNav( newCtlGroup, arrayGroup );
				
				newCtlGroup
					.getElements( 'input, select, textarea' )
					.each( function( ctl ) {
						ctl.erase( 'value' );
					} );
				
				var vaultCtls = newCtlGroup.getElements( 'label.vault' );
				vaultCtls.each( function( newVaultCtl, i ) {
					var span = newVaultCtl.getElements( 'span' )[0];
					var input = newCtlGroup.getElements( 'input' )[0];
					
					var id = ctlGroup.getElements( 'label' )[i]
						.getElements( 'input' )[0]
						.get( 'id' )
						.replace( /(\d+)/, function( m ) { return ++m; } );
					
					span.empty( ).set( { 'id': id+'_hardpoint', 'html': 'Loading Vault control&hellip;' } );
					input.set( { 'id': id , 'name': id } );
				} );
				
				newCtlGroup.inject( ctlGroup, 'after' );
				
				vaultCtls.each( function( ctl, i ) {
					var boundControl = ctlGroup.getElements( 'label' )[i]
						.getElements( 'span' )[0]
						.retrieve( 'vaultControl' );
					
					new boundControl.constructor(  // Could be WriteOnlyVC or VC
						  ctl.getElements( 'span' )[0].get( 'id' )
						, ctl.getElements( 'input' )[0].get( 'id' )
						, 0
						, null
						, boundControl.getDynamic( )
						, boundControl.getImageWidth( )
						, boundControl.getImageHeight( )
						, boundControl.getSavePath( )
						, boundControl.getAssetKind( )
					);
					
					if( !ctlGroup.didEndClick ) {
						ctlGroup.didEndClick = function( ) {
							this.onclick( );
							ctlGroup.didEndClick = null;
						}.bind( ctl.getElements( '.vaultSummary .icon img' )[0] );
					}
				} );
				break;
			case 'remove':
				// FIXME: maybe add an undo/redo feature instead?
				if( isCtlEmpty( ctlGroup ) || confirm( 'Really delete?' ) ) {
					if( arrayGroup.getChildren( ).length == 1 ) {
						ctlGroup.didEndClick = function( ) {
							ctlGroup.didEndClick = null;
						}
						ctlGroup.getElements( '.nav img.add' )
							.fireEvent( 'click' );
					}
					ctlGroup.destroy( );
				}
				break;
			case 'up':
				var prev = ctlGroup.getPrevious( );
				if( prev ) {
					ctlGroup
						.dispose( )
						.inject( prev, 'before' );
				}
				break;
			case 'down':
				var next = ctlGroup.getNext( );
				if( next ) {
					ctlGroup
						.dispose( )
						.inject( next, 'after' );
				}
				break;
		}
		
		arrayGroup.refresh( );
		
		if( ctlGroup.didEndClick ) {
			ctlGroup.didEndClick( );
		}
	}
	
	var isCtlEmpty = function( ctl ) {
		var ctls = ctl.getElements( 'input, select, textarea' );
		for( var i = ctls.length - 1; i >= 0; i-- ) {
			if( ctls[ i ].get( 'value' ) != false ) {
				return false;
			}
		}
		return true;
	}
	
	var navClick = null;
	var nav = new Element( 'div', { 'class': 'nav' } )
		.adopt( [ addBtn, mvUBtn, mvDBtn, delBtn ] );
	
	nav.enable = function( btn, args ) {
		btn.addClass( 'hoverable' ).removeClass( 'inactive' );
		
		// Reset click event. Clear it first to prevent dup events.
		btn.removeEvents( 'click' );
		btn.addEvent( 'click', onclick.bindWithEvent( btn, args ) );
	}
	nav.disable = function( btn ) {
		btn.addClass( 'inactive' ).removeClass( 'hoverable' );
		btn.removeEvents( 'click' );
	}
	
	var cloneNav = function( ctl, group ) {
		var ctlNav = nav.clone( false );
		nav.getChildren( ).each( function( btn ) {
			var cbtn = btn.clone( );
			cbtn.set( 'type', btn.get( 'class' ) );
			cbtn.addEvent( 'click', navClick = onclick.bindWithEvent( cbtn, [ ctl, group ] ) );
			ctlNav.grab( cbtn );
		} );
		
		ctl.grab( ctlNav, 'bottom' );
		ctlNav.setStyle( 'opacity', .1 );
		
		ctl.addEvent( 'mouseenter', function( e ) {
			ctlNav.fade( 'show' );
		} );
		
		ctl.addEvent( 'mouseleave', function( e ) {
			ctlNav.setStyle( 'opacity', .1 );
		} );
	}
	
	var refreshGroup = function( ) {
		var groups = this.getChildren( );
		groups.each( function( group, groupID ) {
			group
				.removeClass( 'first' )
				.removeClass( 'last' );
			
			group.getElements( '.nav' )[0].getChildren( ).each( function( btn ) {
				nav.enable( btn, [ group, this ] );
				
				switch( btn.get( 'type' ) ) {
					case 'up':
						if( groupID == 0 ) {
							group.addClass( 'first' );
							nav.disable( btn );
						}
						break;
					case 'down':
						if( groupID == groups.length - 1 ) {
							group.addClass( 'last' );
							nav.disable( btn );
						}
						break;
					case 'remove':
					case 'add':
						break;
				}
			}.bind( this ) );
			
			group
				.getElements( 'input' )
				.extend( group.getElements( 'select' ) )
				.extend( group.getElements( 'textarea' ) )
				.each( function( ctl ) {
					ctl.set( 'name', ctl.name.replace( /\d+/, groupID ) );
				} );
			
			group.getElements( 'label.vault' ).each( function( ctl ) {
				var input = ctl.getElements( 'input' )[0]
				var id = input.get( 'id' ).replace( /\d+/, groupID );
				
				ctl.getElements( 'span' )[0].set( 'id', id+'_hardpoint' );
				input.set( 'id', id ).set( 'name', id );
			} );
		}.bind( this ) );
	}
	
	$$( '.viArrayGroup' ).each( function( group ) {
		group.getElements( '.viControlGroup' ).each( function( ctl ) {
			cloneNav( ctl, group );
		} );
		group.refresh = refreshGroup;
		group.refresh( );
	} );
}

window.addEvent( 'domready', visage_attach_attributes );
window.addEvent( 'domready', visage_attach_array_ctls );