/* my code */


var mawater = {
    morph : function() {
    /* fx morph */
        Fx.Morph = Fx.Styles.extend({
            start: function(className){
                var to = {};
                $each(document.styleSheets, function(style){
                    var rules = style.rules || style.cssRules;
                    $each(rules, function(rule){
                        if (!rule.selectorText.test('\.' + className + '$')) return;
                        Fx.CSS.Styles.each(function(style){
                                if (!rule.style || !rule.style[style]) return;
                                var ruleStyle = rule.style[style];
                                to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
                        });
                    });
                });
                return this.parent(to);
            }
    });
    Fx.CSS.Styles = ["backgroundColor", "backgroundPosition", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
    Fx.CSS.Styles.extend(Element.Styles.padding);
    Fx.CSS.Styles.extend(Element.Styles.margin);
    Element.Styles.border.each(function(border){
        ['Width', 'Color'].each(function(property){
            Fx.CSS.Styles.push(border + property);
        });
    });    
    },
    
    
    doEdit : function() {
        var eip = new Class({
        /**
         * Initialize
         * @param elements els An array of elements.
         * @param string action the path to the file to target with form.
         * @param object params (optional) Any extra parameters you would like to send with the AJAX call.
         * @param object options (optional) Override the default classes with this.
         */
	initialize: function(els, action, params, options) {
            // Handle array of elements or single element
            if ($type(els) == 'array') {
                    els.each(function(el){
                            this.prepForm(el);
                    }.bind(this));
            } else if ($type(els) == 'element') {
                    this.prepForm(els);
            } else {
                    return;
            }
    
            // Store the action (path to file) and params
            this.action = action;
            this.params = params;
    
            // Default options
            this.options = Object.extend({
                    overCl: 'over',
                    hiddenCl: 'hidden',
                    editableCl: 'edittextarea',
                    textareaCl: 'textarea'
            }, options || {} );
	},
        
        /**
         * Add events to element
         * @param element el Your target element.
         */
	prepForm: function(el) {
            var obj = this;
            el.addEvents({
                    'mouseover': function(){this.addClass(obj.options.overCl);this.setProperty('title','Double click here to edit')},
                    'mouseout': function(){this.removeClass(obj.options.overCl);},
                    'dblclick': function(){obj.showForm(this);}
            });
	},


	/**
        * Build and/or show form
        * @param element el Your target element.
        */
	showForm: function(el) {
            var classes = el.getProperty('class').split(" ");
            for (i=classes.length-1;i>=0;i--) {
                if (classes[i].contains('type:')) {
		    var target = classes[i].split(":")[1];
                }
                else if (classes[i].contains('id:')) {
                    var id = classes[i].split(":")[1];
                }
            }
            var height = el.getStyle('height').toInt();
            if (height <= 200) { height = 200; }
            height = height + 12 + 'px';
            
            
            // Hide target element
            el.addClass(this.options.hiddenCl);

            // If the form exists already, let's show that
            if (el.form) {
                el.form.removeClass(this.options.hiddenCl);
                //el.form[target].focus();
                return;
            }

            // Create new form
            var form = new Element('form', {
                'id': 'form_' + id,
                'action': this.action,
                'class': this.options.editableCl
            });

            // Store new form in the element
            el.form = form;
            
            // Need this to pass to the buttons
            var obj = this;

            var divholder = new Element('div', {
                'style': 'display:block;'
            }).injectInside(form);

            // Add a submit button
            new Element('input', {
                'type': 'submit',
                'value': 'save',
                'class': 'submitbutton',
                'style': 'font-weight: bold',
                'events': {
                    'click': function(evt){
                        (new Event(evt)).stop();
                        el.empty();
                        el.appendText('saving...');
                        obj.hideForm(form, el);
                        form.send({update: el});
                    }
                }
            }).injectInside(divholder);
            

            // Add a cancel button
            new Element('input', {
                'type': 'button',
                'value': 'cancel',
                'class': 'submitbutton',
                'events': {
                    'click': function(form, el){
                        obj.hideForm(form, el);
                        //alert("form: "+form+" el: "+el);
                        //(new Event(form,el)).stop();
                    }.pass([form, el])
                }
            }).injectInside(divholder);
            
            var big = 0;
            var oldstyles;
            new Element('input', {
                'type': 'button',
                'value': '<->',
                'class': 'submitbutton',
                //'style': 'margin:0;margin: 0 0 0 305px; padding: 0',
                'title': 'Expand/Contract width of EditBox',
                'events': {
                    'click': function(form, el){
                        (new Event(form,el)).stop();
                        if (big == 0) {
                            // change to big
                            var neww = $('rightholder').getStyle('width').toInt();
                            input.setStyles({
                            'position': 'absolute',
                            'display': 'block',
                            'left': '-4px',
                            'width': neww +"px",
                            'overflow': 'visible',
                            'z-index': '5000'
                            });
                            big = 1;
                            return 0;
                        }
                        else if (big == 1) {
                            //change to normal
                            input.setStyles(oldstyles);
                            big = 0;
                            return 0;
                        }
                        return 0; // will never get here
                    }
                }}).injectInside(divholder);
            
            new Element('input', {
                'type': 'button',
                'value': '-',
                'class': 'submitbutton',
                'style': 'margin:0;margin: 0 5px 0 5px; padding: 0',
                'title': 'Decrease EditBox Size',
                'events': {
                    'click': function(form, el){
                        (new Event(form,el)).stop();
                        var h = input.getStyle('height').toInt();
                        var nh = h - 60;
                        if (nh <17) { nh = 17; }
                        var myH = new Fx.Style(input, 'height', {duration: 250}).start(h, nh);
                    }
                }
            }).injectInside(divholder);
            
            new Element('input', {
                'type': 'button',
                'value': '+',
                'class': 'submitbutton',
                'style': 'padding: 0;margin:0;',
                'title': 'Increase EditBox Size',
                'events': {
                    'click': function(form, el){
                        (new Event(form,el)).stop();
                        var h = input.getStyle('height').toInt();
                        var nh = h + 60;
                        var myH = new Fx.Style(input, 'height', {duration: 250}).start(h, nh);
                    }
                }
            }).injectInside(divholder);
            
            var myselect = new Element('select', {
                'class': 'submitbutton',
                'name': 'images',
                'style': 'width:100px;padding:0;margin:0;',
                'title': 'Insert an image'
            }).injectInside(divholder);
            
            var ninput = $('textbox-'+id);
            for (var i=0; i<picsarray.length; i++) {
                new Element('option', {
                    'name': i,
                    'events': {
                        'click': function(form,el) {
                            var ninput = $('textbox-'+id);
                            ninput.insertAroundCursor({before:'<a href="/files/'+this.getText()+'" class="external">',after:'</a>'});
                        }
                    }
                }).setText(picsarray[i]).injectInside(myselect);
            }
            
            new Element('a', {
            'href' : '#',
            'id': 'helplink',
            'style': 'margin:0;padding-left:15px;width:25px;background:url(/images/lightbulb.png) no-repeat 0% 0%;',
            'events': {
                'click': function(link) {
                    (new Event(link)).stop();
                    if ($('helpbox') && $('helpbox').getStyle('display') != 'none') {
                        //$('helplink').setHTML('Show Help');
                        $('helpbox').setStyle('display', 'none');
                    }
                    else if ( $('helpbox') && $('helpbox').getStyle('display') == 'none') {
                        $('helpbox').setStyle('display', 'block');
                        //$('helplink').setHTML('H');
                    }
                    else {
                        //$('helplink').setHTML('Hide Help');
                        new Element('div', {
                            'id' : 'helpbox',
                            'style': 'position: relative;width:500px;height:auto;'
                        }).setHTML('<style type="text/css">table.help { background-color:#F8F2D1;width:100%; border:1px solid #E0CA7C}table.help th {font-size:14px;font-style:italic;color:#888; background-color:#F7EDBD }table.help td { padding: 10px;background: #fff; }</style><table class="help"><tr><th>You Type:</th><th>You See:</th></tr>  <tr><td>===Sub Title===</td><td><div class="subtitle">Sub Title</div></td></tr><tr><td>[Click here to visit the About Us Page](/About_Us)</td><td><a href="/About_Us">Click here to visit the About Page</a></td></tr><tr><td>&lt;b&gt;This is important&lt/b&gt;</td><td><b>This is important</b></td></tr><tr><td>&lt;i&gt;"Difficulties mastered are opportunities won." - Winston Churchill&lt;/i&gt;</td><td><i>"Difficulties mastered are opportunities won." - Winston Churchill</i></td></tr><tr><td>He\'s &lt;u&gt;NOT&lt;/u&gt; the Messiah, He\'s a &lt;u&gt;very&lt;/u&gt; naughty boy!</td><td>He\'s <u>NOT</u> the Messiah, He\'s a <u>very</u> naughty boy!</td></tr></table>').injectAfter(divholder);
                    }
                }
            }
        }).setText('?').injectInside(divholder);

            // For every param, add a hidden input
            for (param in this.params) {
                new Element('input', {
                    'type': 'hidden',
                    'name': param,
                    'value': this.params[param]
                }).injectInside(form);
            }

            //
            new Element('input', {
                'type': 'hidden',
                'name': 'id',
                'value': id
            }).injectInside(form);
            
            // inject our target
            new Element('input', {'type': 'hidden','name': 'target','value': target }).injectInside(form);

            // Add the form after the target element
            form.injectAfter(el);

            // Create a textarea or input for user
            var input = new Element('textarea', {
                'name': 'content',
                'style': 'height: '+height,
                'class': 'editbox',
                'id' : 'textbox-'+id
            }).appendText('Getting content from server...').injectInside(form);
            
            this.ajaxGet(id,input,target);
            
            oldstyles = input.getStyles('position','display','width','overflow','z-index');

            // Focus on the input
            input.focus();
	},
        
        /**
         * Ajax Get
         * @param id to pass to php script
         * @param element to update with content
         */
        ajaxGet: function(id, el, target) {
            $$('form input.submitbutton').each(function(i, c) { i.setProperty('disabled', 'true'); });
            el.setProperty('disabled', 'true');
            if (!el) { el = $('textbox'); }
            url = "?getcontent=1&id="+id+"&target="+target;
            var rq = new Ajax("/update.php"+url, {
                method: 'get',
                onComplete:function(resp){
                    var content = resp;
                    el.setText(resp);
                    $$('form input.submitbutton').each(function(i, c) { i.setProperty('disabled', ''); });
                    el.setProperty('disabled', '');
                }
            }).request();
        },        

        /**
         * Hide form
         * @param element form Your target form.
         * @param element el Your target element.
         */
	hideForm: function(form, el) {
		form.addClass(this.options.hiddenCl);
		el.removeClass(this.options.hiddenCl);
	}

        });
        new eip( $$('.textholder'), '/update.php', {update: '1', updatecontent: '1'});
    },
    
    createForms : function() {
        var ajaxForms = $$('.ajaxform');
	ajaxForms.each(function(forms, i){
            //if (!window.ie6) {
                new FormValidator(forms, {onFormValidate: function(isPassed, form) {
                    if (isPassed == true) {
                        var sz = form.getProperty('action');
                        //if (form.hasClass('szu')) { sz = '/update.php' }
                        //else if (form.hasClass('szl')) { sz = '/login.php' }
                        //var cFH = form.getParent().empty().addClass('ajax-loading');
                        var cFH = form.getParent().addClass('ajax-loading');
                        var myAjax = new Ajax(sz,{
                            postBody: form,
                            update: cFH,
                            onComplete: function(resp) {
                                cFH.removeClass('ajax-loading');
                                //new Event(isPassed).stop();
                            }
                        }).request();
                    }
                }});
            //}
        });
    },
    
    externalLinks : function() {
        $$('a.external').each(function(link) {
            link.target = '_blank';
        });
    },
    
    
    toolTips : function() {
        var myTips = new Tips($$('.toolTip'), {
            offsets: {'x': 75, 'y': 0}
        });
    },
    
    
    accord : function() {
        if ($chk('accordion')) {
            var openElement = Cookie.get('inboxElement');
            
            var accordion = new Accordion('h3.atStart', 'div.atStart', {
                opacity: false,
                alwaysHide: true,
                show: [],
                
                onActive: function(toggler, element){
                    if (toggler.hasClass('done')) toggler.setStyle('color', '#DDEEC2');
                    else toggler.setStyle('color', '#ff3300');
                    Cookie.set("inboxElement", toggler.getProperty('val'), {duration: 3600});
                },
         
                onBackground: function(toggler, element){
                        toggler.setStyle('color', '#222');
                }
            }, $('accordion'));
            if (openElement != '') {
                $$('h3.atStart').each(function(element,i) {
                    if (openElement == element.getProperty('val'))
                        accordion.display(i);
                });
            } else { accordion.display(0); }
        }
    },
    
    doneForms : function() {
        var ajaxForms = $$('.doneForm');
	ajaxForms.each(function(forms, i){
            forms.isDone.addEvent('click', function(e){
                var sz = forms.getProperty('action');
                var myAjax = new Ajax(sz,{
                    postBody: forms,
                    onComplete: function(resp) {
                        if (resp == 1) {
                            var par = forms.getParent().getParent();
                            var parnext = par.getNext();
                            par.addClass('done'); par.setStyle('color', '#DDEEC2'); par.setStyle('background','#B2D281');
                            parnext.addClass('donesub');
                        }
                        else {
                            var par = forms.getParent().getParent();
                            var parnext = par.getNext();
                            par.removeClass('done'); par.setStyle('color', '#ff3300');par.setStyle('background','#EEEEEE');
                            parnext.removeClass('donesub');
                        }
                    }
                }).request();
            });
        });
        var fh3 = $$('h3.flashing');
        fh3.each(function(el, i) {
            if (el.hasClass('done')) { var sclass = 'done'; } else { var sclass = 'tnorm'; }
            var myMorph = new Fx.Morph(el, {wait: false, duration: 1000, onComplete: function(){
                if (el.hasClass('flashing')) {
                    var myMorph1 = new Fx.Morph(el, { wait: false, duration: 1500, onComplete: function() { myMorph.start(sclass) }});
                    myMorph1.start('tflash');
                }
 	    }});
            myMorph.start(sclass);
            el.addEvent('click', function(e) {
                var id = el.getProperty("val");
                var myAjax = new Ajax("/update.php?update=isRead&id="+id,{
                    onComplete: function(resp) {
                        if (resp == 1) {
                            el.removeClass('flashing');
                            el.removeClass('tnorm');
                            el.addClass('togglerbackup');
                        }
                        else {
                            alert("Error: Don't double click just single click in future please :)");
                        }
                    }
                }).request();
                //el.removeClass('flashing');
                //el.removeClass('tnorm');
                //el.addClass('togglerbackup');
            });
        });
            
    },
    
    pop: function(i) {
	window.open(i,'_blank', 'height=750,left=75,location=0,resizable=1,toolbar=0,top=100,width=790,scrollbars=1',false);
    },
    
    pageConf : function() {
        if ($chk($('pageConf'))) {
        $('pageConf').addEvent('click', function(e) {
            // get id
            var tid = $('pageConf').getProperty('class');
            var id = tid.substring(2);
            
            var myDiv = new Element('div', {
                'name': 'content',
                'id' : 'pageConfig',
                'style': 'margin-left:250px'
            }).injectBefore($('pagesettings'));
            
            var form = new Element('form', {
                'id': 'form_config',
                'method' : 'post',
                'action': '/update.php'
            });
            
            el = myDiv;
            target = 'headline';

            // Store new form in the element
            el.form = form;
            
            // Need this to pass to the buttons
            var obj = this;
            
            new Element('label', {
                'for' : 'pagetitleage'
            }).appendText('Page Title:').injectInside(form);
            
            // Create a textarea or input for user
            var input1 = new Element('textarea', {
                'name': 'title',
                'style': 'height: 15px;width: 750px;',
                'id' : 'pagetitleage'
            }).appendText('Getting content from server...').injectInside(form);
            
            new Element('label', {
                'for' : 'headline'
            }).appendText('Page Description:').injectInside(form);
            
            // Create a textarea or input for user
            var input = new Element('textarea', {
                'name': 'content',
                'style': 'height: 15px;width: 750px;',
                'id' : 'headline'
            }).appendText('Getting content from server...').injectInside(form);
            
            new Element('label', {
                'for' : 'keywords'
            }).appendText('Page Keywords:').injectInside(form);
            
            // Create a textarea or input for user
            var input2 = new Element('textarea', {
                'name': 'keywords',
                'style': 'height: 15px;width: 750px;',
                'id' : 'keywords'
            }).appendText('Getting content from server...').injectInside(form);
            
            
            // Add a submit button
            new Element('input', {
                'type': 'submit',
                'value': 'save',
                'class': 'submitbutton',
                'style': 'font-weight: bold;',
                'events': {
                    'click': function(evt){
                        (new Event(evt)).stop();
                        form.send({update: el});
                    }
                }
            }).injectInside(form);
            
            
            new Element('input', {
                'type': 'hidden',
                'name': 'id',
                'value': id
            }).injectInside(form);
            new Element('input', { 'type': 'hidden', 'name': 'update', 'value': 1}).injectInside(form);
            new Element('input', { 'type': 'hidden', 'name': 'updatecontent', 'value': 1 }).injectInside(form);
            
            // inject our target
            new Element('input', {'type': 'hidden','name': 'target','value': target }).injectInside(form);

            // Add the form after the target element
            form.injectInside(el);
            
            // now populate our ajax request
            url = "?getcontent=1&id="+id+"&target="+target;
            var rq = new Ajax("/update.php"+url, {
                method: 'get',
                onComplete:function(resp){
                    var content = resp;
                    input.setText(resp);
                    $$('form input.submitbutton').each(function(i, c) { i.setProperty('disabled', ''); });
                    el.setProperty('disabled', '');
                }
            }).request();
            
            // now populate our ajax request
            url = "?getcontent=1&id="+id+"&target=title";
            var rq = new Ajax("/update.php"+url, {
                method: 'get',
                onComplete:function(resp){
                    var content = resp;
                    input1.setText(resp);
                    $$('form input.submitbutton').each(function(i, c) { i.setProperty('disabled', ''); });
                    el.setProperty('disabled', '');
                }
            }).request();
            
            url = "?getcontent=1&id="+id+"&target=keywords";
            var rq = new Ajax("/update.php"+url, {
                method: 'get',
                onComplete:function(resp){
                    var content = resp;
                    input2.setText(resp);
                    $$('form input.submitbutton').each(function(i, c) { i.setProperty('disabled', ''); });
                    el.setProperty('disabled', '');
                }
            }).request();
        });
        }
        
    },
    
    init : function() {
        this.morph();
        this.doEdit();
        this.createForms();
        this.toolTips();
        this.externalLinks();
        this.accord();
        this.doneForms();
        this.pageConf();
    }
};


window.onDomReady(mawater.init.bind(mawater));