var Site = {
    start: function(){
        var editableForms = $$('.textholder');
        editableForms.each(function(ef, i){
            new eip( ef, '/update.php', {update: '1', updatecontent: '1'});
        });
        Site.toolTips();
        Site.createForms();
        Site.pageConf();
        Site.changeFont();
        Site.externalLinks();
	//Site.overlay($('right'));
	if ($('left') && $('right')) Site.overlay($('left'),$('right'));
        if ($('accordion')) { Site.accord(); Site.doneForms();}
	
    },
	
    overlay : function(where, wherenot) {
	var fade1 = new Fx.Style(where, 'opacity', {duration: 500,wait:false});
	var fade2 = new Fx.Style(wherenot, 'opacity', {duration: 500,wait:false});
	where.addEvent('mouseenter', function(e) {
	    fade2.start(1,0.4);
	});
	where.addEvent('mouseleave', function(e) {
	    fade2.start(0.4,1);
	});
	wherenot.addEvent('mouseenter', function(e) {
	    fade1.start(1,0.4);
	});
	wherenot.addEvent('mouseleave', function(e) {
	    fade1.start(0.4,1);
	});
	
	//this.overlayOpacity = 0.7;
	/*this.overlay = new Element('div', {
	    id: 'sbox-overlay',
	    styles: {
		display: 'block',
		zIndex: 65555
	    }
	});
	$(document.body).adopt(this.overlay);
	this.fx = {
	    overlay: this.overlay.effect('opacity', {
	    duration: 700,
	    wait: false}).set(0)
	}
	this.fx.overlay.start('0.7');
	alert("got here");*/
	/*if ($('overlaybox-'+wherenot)) {
	    $('overlaybox-'+wherenot).remove();
	}
	if (!$('overlaybox-'+where)) {
	    var box = new Element('box', {
		'id': 'overlaybox-'+where,
		'styles': {
			'background-color': '#333333',	// light dark color or png image
			'position': 'absolute',
			//'top': '0px',
			//'left': '0px',
			'top': $(where).getStyle('top'),
			'left' : $(where).getStyle('left'),
			'opacity': '0.7',
			'width' : $(where).getStyle('width'),
			'height' : $(where).getStyle('height')
			//'width': window.getWidth() + 'px',
			//'height': window.getHeight() + 'px'
		}
	});
	}
	$(where).adopt(box);
	*/
    },
    
    externalLinks : function() {
        $$('a.external').each(function(link) {
            link.target = '_blank';
        });
    },
    
    pop: function(url,w,h) {
        url = url.replace("/portfolio/","");
        var h=window.availHeight;
        var w=window.availWidth/2;
        var l=0;
        var t=window.availHeight/2;
        window.open("/gallery/"+url,'_blank', 'height='+h+',left=75,location=0,resizable=1,toolbar=0,top=100,width='+w+',scrollbars=1',false);
    },
    
    pop2: function(url,w,h) {
        window.open(url,'_blank', 'height='+h+',left=75,location=0,resizable=1,toolbar=0,top=100,width='+w+',scrollbars=1',false);
    },
    
    toolTips : function() {
        var myTips = new Tips($$('.toolTip'), {
            //offsets: {'x': 75, 'y': 0}
        });
    },        
    
    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();
                    }
                }});
            //}
        });
    },
    
    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'
            }).injectTop($('container'));
            
            var form = new Element('form', {
                'id': 'form_config',
                'method' : 'post',
                'class' : 'bigform',
                'action': '/update.php'
            });
            var si = new Element('div', {'class' : 'submit-inputs' }).injectInside(form);
            
            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(si);
            
            // Create a textarea or input for user
            var input1 = new Element('textarea', {
                'name': 'title',
                'style':'height:32px',
                'id' : 'pagetitleage'
            }).appendText('Getting content from server...').injectInside(si);
            
            new Element('div', { 'style':'clear:both' }).injectInside(si);
            
            new Element('label', {
                'for' : 'headline'
            }).appendText('Page Description:').injectInside(si);
            
            
            // Create a textarea or input for user
            var input = new Element('textarea', {
                'name': 'content',
                'style':'height:32px',
                'id' : 'headline'
            }).appendText('Getting content from server...').injectInside(si);
            
            new Element('div', { 'style':'clear:both' }).injectInside(si);
            
            new Element('label', {
                'for' : 'keywords'
            }).appendText('Page Keywords:').injectInside(si);
            
            // Create a textarea or input for user
            var input2 = new Element('textarea', {
                'name': 'keywords',
                'style':'height:32px',
                'id' : 'keywords'
            }).appendText('Getting content from server...').injectInside(si);
            
            new Element('div', { 'style':'clear:both' }).injectInside(si);
            
            new Element('label', {
                'for' : 'weight'
            }).appendText('Page Weight:').injectInside(si);
            
            // Create a textarea or input for user
            var input3 = new Element('textarea', {
                'name': 'weight',
                'style':'height:32px',
                'id' : 'weight'
            }).appendText('Getting content from server...').injectInside(si);
            
            new Element('div', { 'style':'clear:both' }).injectInside(si);
            
            var subform = new Element('div', { 'class':'submit'}).injectInside(si);
            
            // Add a submit button
            new Element('input', {
                'type': 'submit',
                'value': 'save',
                'class': 'button1',
                'events': {
                    'click': function(evt){
                        (new Event(evt)).stop();
                        form.send({update: el});
                        //setTimeout(function(){$('settings').remove();},4000);
                    }
                }
            }).injectInside(subform);
            
            
            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();
            
            url = "?getcontent=1&id="+id+"&target=weight";
            var rq = new Ajax("/update.php"+url, {
                method: 'get',
                onComplete:function(resp){
                    var content = resp;
                    input3.setText(resp);
                    $$('form input.submitbutton').each(function(i, c) { i.setProperty('disabled', ''); });
                    el.setProperty('disabled', '');
                }
            }).request();
        });
        }
        
    },
    
    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');
            });
        });
            
    },
    
    
    
    changeFont: function() {
            
            if ($('font-biggest') && $('font-normal')) {
                /* 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);
                    });
                });
                var myMorph = new Fx.Morph('content', {wait: false});
                var fontsize = new Hash.Cookie('fs',{duration: 60});
                fs = fontsize.get('class');
                if (fs == 'fontbiggest') { myMorph.start('fontbiggestclass');$('font-biggest').addClass('sel');}
                else if (fs == 'fontnormal') { myMorph.start('fontnormalclass');$('font-normal').addClass('sel');}
                else { $('font-normal').addClass('sel'); }
                
                    $('font-biggest').addEvent('click', function(e){
                        fontsize.set('class','fontbiggest');
                        fontsize.save();
                        myMorph.start('fontbiggestclass');
                        $('font-biggest').addClass('sel'); $('font-normal').removeClass('sel');
                        new Event(e).stop();
                    });
                    $('font-normal').addEvent('click', function(e){
                        fontsize.set('class','fontnormal');
                        fontsize.save();
                        myMorph.start('fontnormalclass');
                        $('font-biggest').removeClass('sel'); $('font-normal').addClass('sel');
                        new Event(e).stop();
                    });
            }
    }
};

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();
        //height = height + 12 + 'px';
        (height < 85) ? height = height + 'px' : height = height + 24 + '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;',
            'class': 'editboxholder'
        }).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',
            'style': 'margin-left:4px;',
            '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-left:4px;',
            //'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 = $('whitebgholder').getStyle('width').toInt();
                        input.setStyles({
                        'position': 'absolute',
                        'display': 'block',
                        'left' : '-1px',
                        '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);
        
        
        if ($type(picsarray) === 'array') {
            var myselect = new Element('select', {
                    'class': 'submitbutton',
                    'name': 'images',
                    'style': 'width:140px;padding:0;margin:0;',
                    'class': 'submitbutton',
                    '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);
                                if (this.getText().contains("t_:")) {
                                    var name = this.getText().split(":")[1];
                                    var d = name.split("/")[0];
                                    var n = name.split("/")[1];
                                    //ninput.insertAtCursor('<a onclick="Site.pop(\''+name+'\');return false" href="/gallery/'+d+"/"+name+'"><img src="/gallery/'+d+'/thumb_'+name+'" alt="'+name+'" /></a>');
                                    ninput.insertAtCursor('<a style="float:left;margin-right:20px" onclick="Site.pop(\''+name+'\',800,600);return false" href="/gallery/'+name+'"><img src="/gallery/'+d+'/thumb_'+n+'" alt="'+n+'" /></a>');
                                } else {
                                    ninput.insertAroundCursor({before:'<a style="float:left;margin-right:20px" onclick="Site.pop(\''+this.getText()+'\');return false" href="/gallery/'+this.getText()+'">',after:'</a>'});
                                }
                            }
                        }
                    }).setText(picsarray[i]).injectInside(myselect);
                }
        }
        else {
            new Element('a', {
                'href' : '#',
                'id': 'helplink',
                'style': 'margin:0;margin-left:50px;padding-left:20px;width:80px;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('Hide Help');
                        }
                        else {
                            $('helplink').setHTML('Hide Help');
                            new Element('div', {
                                'id' : 'helpbox',
                                'style': 'position: relative;width:410px;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><h1>Headline Title</h1></td></tr><tr><td>***Sub Title***</td><td><h2>Mini Title</h2></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('Show Help').injectInside(divholder);
        }
                        
        new Element('input', {
            'type': 'button',
            'value': '-',
            'class': 'submitbutton',
            'style': 'margin:0;margin-left:80px;margin-right:4px;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 + 160;
                    var myH = new Fx.Style(input, 'height', {duration: 100}).start(h, nh);
                }
            }
        }).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);
    }

});



// needs to be domready instead of load for ie6
window.addEvent('domready', Site.start);