var  Replica2 = new Class({
        /*     Uses ajax to fetch some html and insert in the bottom of a div                      
                How to use this class:
                        window.addEvent('domready', function() {               
                                 if($('add-chore')) { 
                                        count = 1;
                                        var replica = new Replica2('wrapper-div','addChore',count);  
                                        $('add-chore').addEvent('click', function(event) {
                                            event.preventDefault();
                                            replica.insert(count);
                                            count++;
                                        });
                                    }   
                         });
                         
                 Sample HTML:
                         <div id="wrapper-div">
                                <div id="chore-div">
                                       <p>Season:</p>
                                       <p><input type="text" name="chore[0][season]" id="chore0season /></p>
                                </div>
                         </div>
                         <p id="add-chore"><a href="">Add chore</a></p>                   
        */
        initialize:function(container,hidden_div,url) {
                this.container=$(container);                      //AJAX response is added to the bottom of this container  Must be a <div>
                this.hd = hidden_div;                                // hidden_div + count together make up the id of outermost element in the response.  Used for slide in effect
                this.url=url;                                               //URL of the function that returns the response
                                                
        },
        insert:function(count, optional_functions) {
              var that = this;
              var movie_request = new Request.HTML({
                      onComplete:function(tree,elements,response,js) {      
                        var new_container = new Element('div');
                        new_container.set('html', response);
                        that.container.grab(new_container);
                        var hidden_div = that.hd+count;
                        var myslide = new Fx.Slide(hidden_div).hide();
                        $(hidden_div).removeClass('hide');
                        myslide.slideIn().chain( function() {
                            optional_functions.each(function(item,index) {
                                item(count);
                            });
                           
                        });
                    }  
                }).get(this.url+'/'+count);  
        }
});

var MenuSlider = new Class({
    Implements: [Options, Events],
    options: {
      homepath: ''  
    },
    initialize:function(menu_div, slider_div,options) {
		this.setOptions(options);
        this.main = $(menu_div);
        this.slider = $(slider_div);
        this.slider.set('morph',{duration:500, transition: Fx.Transitions.Back.easeInOut}); 
        this.create_movers();
       
    },  
    create_movers:function() {
        this.main.getElements('a').each(function(item,index) {
               item.set('morph',{duration:500, transition: Fx.Transitions.Back.easeInOut});
               var coordinates=item.getPosition(this.main);
			   var size=item.getSize();
               var path = item.getProperty('id');
               if(path == this.options.homepath) {
				   item.setStyles({
                       'color':'#fff'
                   });
                   this.slider.setStyles({
                        'top':coordinates.y,
                        'left':(coordinates.x-5),
                        'width':(size.x +10)
                    });
				
               }
              
              item.addEvent('mouseover',function() {
                   item.morph({
                       'color':'#cccccc'
                   });
                   this.slider.morph({
                       'top':coordinates.y,
                       'left':(coordinates.x-5),
                       'width':(size.x+10)
                   });
               }.bind(this));
               item.addEvent('mouseout',function() {
                   if(item.getProperty('id') == this.options.homepath) {
                       item.tween('color','#cccccc');
                      
                   }
                   else {
                       
                       item.tween('color','#A89E7E');
                       var current = this.main.getElement('a[id='+this.options.homepath+']');
                       if (current) {
                           var cur_coords = current.getPosition(this.main);
                           var cur_size = current.getSize();
                           current.morph({
                               'color':'#cccccc'
                           });
                           this.slider.morph({
                               'top':cur_coords.y,
                               'left':(cur_coords.x-5),
                               'width':(cur_size.x+10)
                           });
                       
                        }
                   }     
                  
                       
               }.bind(this));
          
         }, this);
    },
    
    change_homepath:function(newHomePath) {
        this.options.homepath = newHomePath;   
    }
    
});


var AutoSearch = new Class({
        Implements: [Options, Events],
        options: {
              container:'auto-search-results',                   //the container to hold search results
              searchResultsClass:'.auto-search',               //the css class for items returned by search
              searchInputFields:[],                                   //the input field(s) to supply search term
              onChange: $empty
        },
 	initialize: function(input, url, options) {
                this.setOptions(options);
                this.options.container = $(this.options.container);
                this.input = $(input);                                 //input field to trigger the auto search
                this.url = url;                                             //the url of the method that executes the search and returns the html results
                this.input.addEvent('keyup',function(event) {
                        var event = new Event(event).stop();
                        this.style_container();
                        this.do_search();
                }.bind(this));
                window.document.addEvent('click', function(){
                   this.options.container.setStyle('display','none');  //hides the auto search results with a click in document window
                 }.bind(this));            
        },
        style_container: function() {
             // positions the container of search results just underneath the input box
            var coordinates = this.input.getCoordinates();
            var top = (coordinates.top + coordinates.height);
            var left = coordinates.left;
            var width = coordinates.width - 2;
            this.options.container.setStyles({
                'display':'block',
                'top':top,
                'left':left,
                'width':width
            
            });     
        },
        do_search: function() {
                //conducts the search and puts result in input box when clicked
                var that = this;
                var length = this.options.searchInputFields.length;
                if(length > 0) {
                        var post = new Object;
                         this.options.searchInputFields.each(function(item, index) {
                                 post[item]=$(item).getProperty('value');
                         });
                   
                } else {
                        var post = {'auto_search':this.input.getProperty('value')}; 
                }
              var auto_search = new Request.HTML({
                        url:this.url,
                        update:this.options.container,
                        onComplete:function(){
                               $$(that.options.searchResultsClass).each(function(element) {
                                       element.addEvent('click', function() {
                                                var text = element.get('text');
                                                that.input.setProperty('value',text);
                                        });    
                                });  
                        }
                }).post(post);
        }   
});


var  Replica = new Class({
        /*     Copies contents of a div, renames the form controls inside the copy and inserts the copy at the bottom of the parent div
                Assumptions:  names of controls in div to be copied have a '0' in them, which will be incremented each time a copy
                                        is added to the form. 
                Warning:  this class does not work in IE6 or IE7 with radio buttons                        
                Example: <input type="text" name="chore[0][season]"  />"
                                is copied to <input type="text" name="chore[1][season]" />
                                
                How to use this class:
                        window.addEvent('domready', function() {               
                                 if($('add-chore')) { 
                                        count = 1;
                                        $('add-chore').addEvent('click', function(event) {
                                            event.preventDefault();
                                            new Replicate('wrapper-div','chore-div',count);    
                                            count++;
                                        });
                                    }   
                         });
                         
                 Sample HTML:
                         <div id="wrapper-div">
                                <div id="chore-div">
                                       <p>Season:</p>
                                       <p><input type="text" name="chore[0][season]" id="chore0season /></p>
                                </div>
                         </div>
                         <p id="add-chore"><a href="">Add chore</a></p>
                         
                         
        */
        initialize:function(container,model,count) {
                this.container=$(container);                      //the container that holds the html to be copied and the copies.  Copies are added to the bottom of this container  Must be a <div>
                this.model=$(model);                               //the  container of the html to be copied.  Must   be a div. 
                this.count=count;                                      //the number of the copy
                this.copy();
                this.renameFormFields();
                this.insert();
        },
        copy:function() {
           this.copy = this.model.clone();
           this.id = 'copy'+this.count;
           this.copy.setProperty('id',this.id);
           this.copy.addClass('hide');
        },
        renameFormFields:function() {
             var form_controls = ['input','textarea','select'];
             form_controls.each(function(control, index) {
                     var controls = this.copy.getElements(control);
                     controls.each(function(item,index) {
                        item.setProperty('name', item.getProperty('name').replace('0',this.count));
                        //alert(item.getProperty('name'));
                        //item.setProperty('id', item.getProperty('id').replace(/0/,this.count));
                     });
             }.bind(this));
        },
        insert:function() {
            this.copy.inject(this.container);
            $(this.id).removeClass('hide');
            var myslide = new Fx.Slide(this.id).hide();
            myslide.slideIn();
        }
        
});