/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
          Global Javascript Methods for [ Innovative-Studios.com All Rights Reserved. ]
     -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
   @Author - (Ra'Shaun Stovall Innovative Studios, LLC. Senior Web Developer)
   -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/*************************************************************************
* @Object - EditPanel
*-----------------------------------------------------------------------
* @param:  obj - The object reference containing editable node information used within EditPanel
*--
*
* Usage: Creates edit panel for ajaxy click-to-edit elements
//************************************************************************/
var EditPanel = Class.create({

initialize: function( obj ) {
 this.staticElem          = obj.node
 this.childElementObjects = new Array()
 this.id                  = this.staticElem.id
 this.updateUrl           = encodeURIComponent(obj.updateUrl)
 this.controls            = this.staticElem.select('.editor_controls')[0]
 this.btnEdit             = this.controls.select('.button')[0]
 this.btnSave             = new Element('input', {id: this.id + '_btnSave', type: 'button', value: 'Update'})
 this.btnCancel           = new Element('input', {id: this.id + '_btnCancel', type: 'button', value: 'Exit Edit Mode'})
 this.status              = new Element('div',   {id: this.id + '_status'})
 this.statusText          = new Element('span',  {id: this.id + '_status_text'}).update('You are in Edit Mode')
 this.statusIcon          = new Element('img',   {id: this.id + '_status_icon', src: 'global/ui/blank.gif', alt: 'Status Icon', width:'16', height:'16'})

 this.setClassNames()
 this.createEditableChildren(false)

 //-- Bind event handlers
 this.btnEdit.observe('click',   this.OnEditClicked.bindAsEventListener(this), false)
 this.btnSave.observe('click',   this.OnSaveClicked.bindAsEventListener(this), false)
 this.btnCancel.observe('click', this.OnCancelClicked.bindAsEventListener(this), false)		
 this.staticElem.observe("EditElement:OnSave", this.OnElementUpdate)
	
}, //[.ctor] initialize

createEditableChildren: function( blShowControls ) {
 this.staticElem.select('.edit')
   .each( function( elem ){ this.childElementObjects.push(
                              new EditElement({ id: this.id, node: elem, requestURI: this.updateUrl, controls: false, editMode: false }) ) }
																			         , this )
}, //createEditableChildren()

enable: function() {	
 this.btnSave.enable()
 this.childElementObjects.each(function( elem ) { elem.enable() })
}, //enable()

disable: function() {	
 this.btnSave.disable()
 this.childElementObjects.each(function( elem ) { elem.disable() })
}, //disable()

setClassNames: function() {
 this.controls.addClassName('editor_controls')
 this.status.addClassName('editor_status')
}, //setClassNames()

setStatus: function( params ) {
 this.statusText.update(params.label)
 this.statusIcon.setAttribute('src', params.icon)
}, //setStatus()

toggleControls: function( blForceShow ) {
 if(arguments.length==0 || arguments[0] == true){ // create controls
//-- create controls
  this.btnEdit.remove()
  this.staticElem.appendChild(this.status)
  this.controls.appendChild(this.btnSave)
//  Element.insert(this.btnSave, {after: ' OR '})
//		new Insertion.After(this.btnSave, ' OR ')
  this.controls.appendChild(this.btnCancel)	
  this.status.appendChild(this.statusIcon)
  this.status.appendChild(this.statusText)

 }else
  if(arguments[0] == false) {
   this.controls.appendChild(this.btnEdit)
   this.btnSave.remove()
   this.btnCancel.remove()
   this.status.remove()
  } // if()
}, //toggleEditControls()

OnElementUpdate: function( e ) {
//	alert(Event.element(e).value)
 alert('This is a test')
}, //OnElementUpdate()

OnEditClicked: function( e ) {
//-- place each element in edit mode
 this.childElementObjects.each(function( elem ) { elem.toggleControls(false);elem.edit() })
 this.toggleControls()
}, //OnEditClicked()

OnSaveClicked: function( e ) {
alert(

 Object.toJSON( $('frmMain').serialize(true) )
 ) //merge($H(  ) ) ).toJSON()
	
	
 this.disable()
 e.element().setAttribute('value', 'Updating...')
 this.setStatus({label: 'Saving please wait...', icon: 'icn_loading.gif'} )
//-- Run ajax script


 new Ajax.Request(this.updateUrl, {method: 'get', 
                                   contentType: 'application/json',
                                   onSuccess: this.OnAjaxResponse.bindAsEventListener(this),
				           onFailure: this.OnAjaxFailure.bindAsEventListener(this)})
}, //OnSaveClicked()

OnCancelClicked: function( e ) {
//-- place each element in static mode
 this.enable()	
 this.toggleControls(false)
 this.btnSave.setAttribute('value', 'Update')
 this.childElementObjects.each(function( elem ) { elem.static() })
 this.setStatus({label: 'You are in Edit Mode', icon:'global/ui/blank.gif'} )
}, //OnCancelClicked()

OnAjaxResponse: function( resp ) {
 var response = eval("( " + resp.responseText + " )")

 if (response.status == 200)  this.setStatus( {label: response.message, icon: 'global/ui/icn_check.gif'} ) 
 else  this.setStatus( {label: 'Failed to update! Please try again.', icon: 'global/ui/icn_x.gif'} )
		
 this.enable()	
 this.btnSave.setAttribute('value', 'Update')
}, //OnAjaxResponse()

OnAjaxFailure: function( resp ) {
// alert(resp.responseText)
 this.enable()	
 this.btnSave.setAttribute('value', 'Update')
 this.setStatus( {label: 'Failed to update! Please try again.', icon: 'global/ui/icn_x.gif'} )
} //OnAjaxResponse()

}) // [class] EditPanel

////////////////////////////////////////////////////////////////////////////////////////////////////////



/*************************************************************************
* @Object - EditElement
*-----------------------------------------------------------------------
* @param:  obj - The object reference containing editable node information used within EditPanel
*--
*
* Usage: Creates edit panel for ajaxy click-to-edit elements
//************************************************************************/
var EditElement = Class.create({

initialize: function( obj ) {

//--initialize internal fields
 this.staticElem      = obj.node
 this.requestURI      = obj.requestURI
 this.id              = obj.id //this.staticElem.id
 this.label           = this.getLabel( this.staticElem )
 this.name            = this.getName( this.staticElem.id )
 this.value           = this.properValue( this.staticElem.innerHTML )
 this.editMode        = (obj.editMode == undefined)? false : obj.editMode
 this.controlsVisible = (obj.controls == undefined)? true  : obj.controls 

//-- main edit container
 this.container  = new Element('div', {id: this.id + '_editor'})
 this.header     = new Element('h5', {id: this.id + '_editHeader'}).update(this.label)

//-- dynamically create Prev. and Next photo widget navigation buttons
 var txtTitle    = new Element('input', { type: 'text', id: this.id + '_txtTitle', name: this.name, value: this.value, title: 'Enter updates' })
 var txtDetails  = new Element('textarea', { id: this.id + '_txtDetails', name: this.name, cols: '70', rows: '10', title: 'Enter updates'  }).update( this.value )

//-- create controls
 this.controls   = new Element('div', {id: this.id + '_editor_controls'})
 this.btnSave    = new Element('input', {id: this.id + '_editor_btnSave', type: 'button', value: 'Update'})
 this.btnCancel  = new Element('input', {id: this.id + '_editor_btnCancel', type: 'button', value: 'Exit Edit Mode'})
 this.status     = new Element('div', {id: this.id + '_editor_status'})
 this.statusIcon = new Element('img', {id: this.id + '_editor_status_icon', src: 'global/ui/blank.gif', alt: 'Loading...', width:'16', height:'16'})
 this.statusText = new Element('span', {id: this.id + '_status_text'}).update('Now editing <strong>' + this.name.capitalize() + '</strong>')

//-- set class names
 this.setClassNames()

// remove the following
txtTitle.addClassName('editor_textbox')
txtDetails.addClassName('editor_textbox')	

this.editElem = (this.staticElem.tagName.toLowerCase() != 'p')? txtTitle : txtDetails

 // put edit element together
 this.container.appendChild(this.header)
 this.container.appendChild(this.editElem)

 //--display controls (or not)
 this.toggleControls(this.controlsVisible)

//-- Bind event handlers
 Event.observe(this.btnSave,    'click', this.OnSaveClicked.bindAsEventListener(this), false)
 Event.observe(this.btnCancel,  'click', this.OnCancelClicked.bindAsEventListener(this), false)
 Event.observe(this.staticElem, 'click', this.OnStaticElementClicked.bindAsEventListener(this))

//-- swap static element for edit element
 if(this.editMode)	edit() // control is automatically in edit mode

}, // [.ctor] initialize()

AJAXRequest: function() {
//	alert(this.toNameValuePair( this.properValue( this.editElem.value ) ))
 new Ajax.Request( this.requestURI, 
  { method:     'get',
    parameters: this.toNameValuePair( this.properValue( this.editElem.value ) ), 
    onSuccess:  this.OnAJAXRequestSuccess.bindAsEventListener(this), 
    onFailure:  this.OnAJAXRequestFailure.bindAsEventListener(this) }
 ) // Ajax.Request
}, //AJAXRequest

OnAJAXRequestSuccess: function(resp) {
 var response = eval("( " + resp.responseText + " )")
	
alert(response.parameters.pid)
alert(response.parameters.name)
alert(response.parameters.description)


 this.staticElem.update( this.getValue() )
 this.enable()
 this.btnSave.setAttribute('value', 'Update')
	
 if (response.status == 200)
 this.setStatus( {label: response.message, icon: 'global/ui/icn_check.gif'} ) 
 else
  this.setStatus( {label: 'Failed to update! Please try again.', icon: 'global/ui/icn_x.gif'} )
}, // OnAJAXRequestSuccess

OnAJAXRequestFailure: function(resp) {
 this.setStatus( {label: 'Failed to update! Please try again.', icon: 'global/ui/icn_x.gif'} )
 this.btnSave.setAttribute('value', 'Update')
 this.enable()
}, // OnAJAXRequestFailure

toJSON: function() {
 return   '{ \"id\": \"' + this.id + '\", \"' + this.name + '\": \"' + ((arguments.length>0)? arguments[0] : this.value) + '\" }'
}, //toJSON

toNameValuePair: function() {
 return   'pid=' + this.id + '&' + this.name + '=' + encodeURIComponent((arguments.length>0)? arguments[0] : this.value)
}, //toNameValuePair

properValue: function( str ) {	
 return str.replace(/[\n]/g ,'') 
}, //properValue

getName: function( str ) {
 var regArr = /_(\w+)/.exec( str )
 return (regArr != null)? regArr[1] : null 
}, //getName()

getValue: function () {
 this.value = this.properValue( this.editElem.value )
 return this.value
}, //properValue ()

getLabel: function( ele ) {
 switch(ele.tagName.toLowerCase()) {
  case 'h4': { return 'Staff Member Name'; break }
  case 'p' : { return 'Description'; break }
 } //switch	
}, //getLabel()

setId: function( str ) {
 var regArr = /(\w+)_/.exec( str )
 return (regArr != null)? regArr[1] : null 
}, //setId()

setClassNames: function() {
 this.container.addClassName('editor')
 this.header.addClassName('editor_header')
 this.controls.addClassName('editor_controls')
 this.status.addClassName('editor_status')
}, //setClassNames()

setStatus: function( params ) {
 this.statusText.update(params.label)
 this.statusIcon.setAttribute('src', params.icon)
}, //setStatus()

toggleControls: function( blForceShow ){
 if(arguments.length==0 || arguments[0] == true){ // create controls
  this.container.appendChild(this.controls)
  this.controls.appendChild(this.btnSave)
//Element.insert(this.btnSave, {after: ' OR '})
//		new Insertion.After(this.btnSave, ' OR ')
  this.controls.appendChild(this.btnCancel)	
  this.container.appendChild(this.status)
  this.status.appendChild(this.statusIcon)
  this.status.appendChild(this.statusText)
//	 this.status.insert({after: '<br />'})	
  this.controlsVisible = true // controls are now visible
 }else
  if(arguments[0] == false) { // do not show controls
   if(this.controls.parentNode) this.controls.remove()		
   if(this.status.parentNode) this.status.remove()		
   this.controlsVisible = false // controls are now hidden
  } //if
 return this.controlsVisible  // whether or not edit controls are visible
}, // toggleControls()

enable: function() {
 if(this.btnSave.parentNode)  this.btnSave.enable()
 if(this.editElem.parentNode) this.editElem.enable()
}, //enable()

disable: function() {	
 if(this.btnSave.parentNode)  this.btnSave.disable()
 if(this.editElem.parentNode) this.editElem.disable()
}, //disable()

edit: function() {
 if(this.editMode==false){ 
  this.editMode = true
  this.editElem.value = this.properValue( this.staticElem.innerHTML )
  if(this.staticElem.parentNode) Element.replace(this.staticElem, this.container)
 } // if
}, //edit()

static: function() {
 if(this.editMode == true){
  this.editMode = false
  if(this.container.parentNode) Element.replace(this.container, this.staticElem)
   this.setStatus({label: 'Now editing <strong>' + this.name.capitalize() + '</strong>', icon:'global/ui/blank.gif'} )
 } // if
}, //static()

OnStaticElementClicked: function( e ) {
this.toggleControls(true) // show controls
this.edit() 
}, //OnStaticElementClicked

OnSaveClicked: function( e ) {
 this.disable()
 // fire event
 e.element().fire("EditElement:OnSave", { element: this })
 this.setStatus({label: 'Saving please wait...', icon:'global/ui/icn_loading.gif'} )
 e.element().setAttribute('value', 'Updating...')
//	Element.replace(this.container, this.staticElem)

this.AJAXRequest()
}, //OnSaveClicked()

OnCancelClicked: function( e ) {
// alert(Event.element(e).value) // returns the button clicked
 this.enable()
 this.static()
 this.setStatus({label: 'Now editing ' + this.name.capitalize(), icon:'global/ui/blank.gif'} )
 this.btnSave.setAttribute('value', 'Update')
} //OnCancelClicked()

}) // [class] EditElement

////////////////////////////////////////////////////////////////////////////////////////////////////////


/* -=-=-=-=-=-=-=-=-=-=-=-= Site Specific Functions -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/*************************************************************************
* @function - initEditables()
*-----------------------------------------------------------------------
* @param: 
*--
* @returns: void
*
// 
* Usage: Function initializes editables
//************************************************************************/
var initEditables = function() {// cannot do any calculations if not uplevel browser
 var url = 'ajax.aspx'
 var editPanels = new Array()
 $$('.editPanel').each( function(elem){ editPanels.push(new EditPanel( {node:elem, updateUrl: url } ))  } )
} // initEditables()

var editableClicked = function( e ) { var ede = new EditElement({ node: Event.element(e) }) } // editbaleClicked()

Event.observe(window, 'load', this.initEditables.bindAsEventListener(this), false)