Is very simple to use and can extract the browser name, minor version, and the platform name.

Click HERE for see the code of this class

I correct the error with a new version of the class.
Click HERE for see the code of this class

VIEW THE EXAMPLE FILE

Use this class is very simple:

First need to have mootools 1.2 javascript library
Second download MooEip class

The class:

var MooEip = new Class({

    //implements
    Implements: [Options,Events],

    //options
    options: {
        elements: '.eip',
        styleHover: 'eip-hover',
        styleInput: 'eip-input',
        styleTextarea: 'eip-textarea',
        styleLoading: 'eip-loading',
        idPrefix: 'id_',
        inputSave: 'Save',
        inputCanc: 'Cancel',
        saving: 'Saving...',
        empty: 'Click to Edit',
        hoverColor: '#ceffef',
        leaveColor: '#ffffff'
    },

    //initialization
    initialize: function(ajaxUrl, options) {
        // set ajax url
        this.ajaxUrl = ajaxUrl;
        //set options
        this.setOptions(options);

        this.run();
    },

    //a method that does whatever you want
    run: function() {
        //find the editable areas
        $$(this.options.elements).each(function(el) {
            var elId = el.getProperty('id');
            var elValue = el.get('text').trim();

            if (elValue.trim() == ''){
                el.set('text', this.options.empty);
            }

            if (el.getStyle('display') != '') {
                var displayStyle = el.getStyle('display');
            }
            else {
                var displayStyle = el.setStyle('display', 'block');
            }

            var editForm = new Element('form', {
                'name': 'form_' + elId,
                'events': {
                    'submit': function(e) {
                        el.setStyle('display', 'block');
                        //el.fireEvent('mouseleave');
                        e.preventDefault();

                        var request = new Request({
                            url: this.ajaxUrl,
                            data: 'value=' + editForm.fieldValue.value,
                            method: 'post',
                            onRequest: function(){
                                el.addClass(this.options.styleLoading);
                                el.set('text', this.options.saving);
                            }.bind(this),
                            onSuccess: function(){
                                el.removeClass(this.options.styleLoading);
                                el.set('html', (editForm.fieldValue.value.trim() == '' ? this.options.empty : editForm.fieldValue.value.trim().replace(new RegExp('\n', 'gi'), '<br />')));
                            }.bind(this),
                            onFailure: function(resp){
                                el.removeClass(this.options.styleLoading);
                                alert('ERROR ON THE SERVER !!\nCODE: ' + resp.status + ' - TEXT: ' + resp.statusText + '\nPLEASE SAVE THE TEXT AGAIN !!');
                                el.set('html', (editForm.fieldValue.value.trim() == '' ? this.options.empty : editForm.fieldValue.value.trim().replace(new RegExp('\n', 'gi'), '<br />')));
                            }.bind(this)
                        });
                        request.send();                        

                        editForm.dispose();

                        // set the new value from submited form value
                        elValue = editForm.fieldValue.value.trim();
                    }.bind(this)
                }
            });

            if(el.hasClass('input')) {
                var editField = new Element('input', {
                    'type': 'text',
                    'name': 'fieldValue',
                    'class': this.options.styleInput
                });
            }
            else {
                var editField = new Element('textarea', {
                    'name': 'fieldValue',
                    'class': this.options.styleTextarea
                });
                if (el.get('style') != '') {
                    editField.set('style', el.get('style'));
                }
            }

            var okButton = new Element('input', {
                'id': 'ok_' + elId,
                'type': 'submit',
                'value': this.options.inputSave,
                'events' : {
                    'click': function() {
                    editForm.dispose();
                    el.setStyle('display', displayStyle);
                    el.fireEvent('mouseleave');
                    }
                }
            });

            var cancelButton = new Element('input', {
                'id': 'cancel_' + elId,
                'type': 'reset',
                'value': this.options.inputCanc,
                'events': {
                    'click': function() {
                    editForm.dispose();
                    el.setStyle('display', displayStyle);
                    el.fireEvent('mouseleave');
                    }
                }
            });

            editField.inject(editForm);
            lb = new Element('br').inject(editField, 'after');
            okButton.inject(editForm);
            cancelButton.inject(editForm);

            var myeffect = new Fx.Tween(el, {duration: 500});

            el.addEvents({
                'mouseenter': function() {
                    el.setStyle('background-color', this.options.hoverColor);
                    el.addClass('eip-hover');
                }.bind(this),

                'mouseleave': function() {
                    myeffect.start('background-color', this.options.hoverColor, this.options.leaveColor);
                    el.removeClass('eip-hover');
                }.bind(this),

                'click': function() {
                    el.setStyle('display', 'none');
                    editField.value = (el.hasClass('input')) ? elValue.trim() : elValue.trim().replace(new RegExp('<br />', 'gi'),'\n');
                    editForm.inject(el, 'after');
                    editField.focus();
                    el.removeClass('eip-hover');
                }
            });
        }, this);
    }
});

The javascript in the page:

<script src="js/mootools-1.2.3-core.js" type="text/javascript"  charset="utf-8"></script>
<script src="js/moo-eip-min.js" type="text/javascript"  charset="utf-8"></script>

<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
    var eip = new MooEip('edit.php');
});
//]]>
</script>

<!-- style for moo-eip -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- /style for moo-eip -->

The html

<div class="eip input" id="id_0">
</div>
<div class="eip" id="id_1" style="overflow:hidden;height:100px">
this is a editable text 1 with overflow of the text hidden and height fixed in 100px.
</div>
<div class="eip" id="id_2">
this is a editable text 2.
</div>

• Add var ajaxProxy for set ajax proxy
  
• Add css file for style the skype buttom

Add onLine example :

VIEW THE EXAMPLE FILE

Here are the class modification that I made on the class:

- Porting the class for use in php5
- Remove the define for images: SI_IMAGE_JPEG, SI_IMAGE_PNG, SI_IMAGE_GIF
- Add define for ttf font path SI_PATH_TTF_FONTS
- Add define for gd font path SI_PATH_GD_FONTS
- Add define for random background imagess path SI_PATH_BACKGROUND
- Add define for audio path SI_PATH_AUDIO
- Add define for wordlist path SI_PATH_WORDS
- Set static var for $charset
- Add var $automatic_random for enable / disable random font and background image
- Add var $lang_wordlist for have wordlist for any language
- Delete var $wordlist_file: the file now is on SI_PATH_WORDS.’wordlist-’.$lang_wordlist.’.txt’
- Add var $use_random_bg_image for set random extraction for the background image
- Modify var $gd_font_file: now can set only filename
- Modify var $gd_font_file: now can set only filename
- Modify var $audio_path: now can set only filename
- Add options array to the constructor function: $img = new Securimage(array(‘automatic_random’=>false,’lang_wordlist’=>’it’));
- Add generic function for set var in the class: (void)setOption($name, $value);
- Add generic function for set var in the class: (void)setBgImage(‘/path-to-my-bg-image/image-name.jpg’);
- Modify function show() and added the code for have random background and font in the class
- Added function getRandom() for charge random files

Wel I find a nice script for oscommerce ( http://www.oscommerce.com/community/contributions,5321/category,12/search,pdf_customer_invoice ) that have a nice view of  the pdf invoice; Than I port this script and make a class for use in all indipendent cms …

Here can download the example output of the invoice class:

Ininvoice pdf

Here is an example of use:

<?php
$dir = dirname(__FILE__).'/';
define('FPDF_FONTPATH', $dir.'font/');
include($dir.'fpdf.php');
include($dir.'cat-pdf-invoice.inc.php');

$pdf = new Pdf_Invoice(array('locale'=>false,'lang'=>'en','show_watermark'=>true,'watermark_text'=>'Invoice copy'));
$params = array(
'customer_id'=>1,
'payment_method'=>'Paypal',
'carrier_method'=>'Flat rate',
'carrier_price'=>5.25,
'order_id'=>222,
'order_date'=>'2009/02/11',
'invoice_address'=>"street name\ncity zip\nstate\ncountry\n",
'delivery_address'=>"street name\ncity zip\nstate\ncountry\n",
'store_name'=>'My store name',
'store_address'=>"store street name\nstore city zip\nstore state\nstore country\n",
'store_tel'=>'+39 011222222',
'store_fax'=>'+39 011333333',
'store_email'=>'info@mystore.com',
'store_web'=>'http://mystore.com',
'store_tax_number'=>87039097397390,
'img_logo'=>$dir.'invoice-logo.jpg',
'img_logo_correction'=>0.18,
'invoice_footer'=>'Thank you for your purchase'
);
$pdf->SetInvoiceParams($params);

$product = array(
'qty'=>2,
'name'=>'product 1 name',
'model'=>'product 1 model',
'attributes'=>'color: red, size: xl',
'price'=>23.00,
'tax'=>20.00
);
$pdf->SetProduct($product);
$product = array(
'qty'=>10,
'name'=>'product 2 name',
'model'=>'product 2 model',
'attributes'=>'color: blue, size: xxl',
'price'=>13.00,
'tax'=>18.00
);
$pdf->SetProduct($product);
$product = array(
'qty'=>3,
'name'=>'product 3 name',
'model'=>'product 3 model',
'attributes'=>'color: blue, size: xxl',
'price'=>5.00,
'tax'=>18.00
);
$pdf->SetProduct($product);
$product = array(
'qty'=>10,
'name'=>'product 4 name',
'model'=>'product 4 model',
'attributes'=>'color: blue, size: xxl',
'price'=>90.00,
'tax'=>18.00
);
$pdf->SetProduct($product);
$product = array(
'qty'=>10,
'name'=>'product 5 name',
'model'=>'product 5 model',
'attributes'=>'color: blue, size: xxl',
'price'=>43.00,
'tax'=>22.00
);
$pdf->SetProduct($product);

$pdf->GetInvoice($dir.'lang/');
?>

Add too a compressed version of the class.

It have a nice effect for the button taken from http://davidwalsh.name/skype-mootools.

Thanks David Your site is a good reference for me

VIEW THE EXAMPLE FILE

var MooSkype = new Class({

Implements: [Options],

options: {
// Flag use efect
useEffect: true,
// Class name for hock skype button action
element: 'skype-button',
// Class name for the skype image
image: 'skype-image',
// Default action when user is disponible
defaultAction: 'call',
// Default language, possibles: 'en','de','fr','it','pl','ja','es','pt','pt-br','se','zh-cn','zh-tw'
language: 'en',
// Path to images
imagesPath: 'img/',
// Path to languages
languagesPath: './languages/'
},

initialize: function(options) {
this.setOptions(options);

this.setSkype();
},

setSkype: function() {
// charge js language
new Asset.javascript(this.options.languagesPath + this.options.language + '.js', {id: 'skypeLanguage'});

var href = $(this.options.element).getProperty('href');
var tmpUser = href.replace('skype:', '');
var user = tmpUser.replace(tmpUser.substring(tmpUser.lastIndexOf('?'),tmpUser.length), '');

var request = new Request({
url: 'http://localhost/moo-skype/proxy.php',
method: 'get',
data: 'user=' + user,
onFailure: function() {
this.getButton(user, 0);
}.bind(this),
onSuccess: function(resp){
this.getButton(user, resp.toInt());
}.bind(this)
});
request.send();
},

getButton: function(user, status) {
var link = $(this.options.element);
var img = $(this.options.image).clone();
var statusText = i18n[status];

switch(status){
case 2:
case 3:
case 7:
var href = link.set({'href': 'skype:' + user + '?' + this.options.defaultAction, 'title': statusText, 'text': statusText});
break;
default:
var href = link.set({'href': 'skype:' + user + '?add', 'title': statusText, 'text': statusText});
}

img.set({'src': this.options.imagesPath + status + '.gif', 'alt': statusText}).inject(href, 'top');

if (this.options.useEffect) {
this.setEffect(img);
}
},

setEffect: function(img) {
var running = false;

var fx2 = new Fx.Morph(img, {duration: 100, link: 'chain', onChainComplete:function() { running = false; } });
var fx1 = new Fx.Morph(img, {duration: 200, link: 'chain', onComplete:function() {
fx2.start({'top':'-7px'}).start({'top':'-4px'}).start({'top':'-6px'}).start({'top':'-4px'});
}
});
img.addEvent('mouseenter',function() {
if(!running) {
fx1.start({'top':'-10px'}).start({'top':'-4px'});
running = true;
}
});
}
})

For initialize the class use this:

window.addEvent('domready', function() {
var skype = new MooSkype({'language':'es'});
});

The html is here:

<div>
<a href="skype:davcaffa?call" id="skype-button">
<img src="img/2.gif" alt="Call me" id="skype-image" />Call me</a>
</div>

For use the ajax call need to use a proxy that read the state of users on skype server.

Here is the script:

<?php
if (!isset($_GET['user'])) {
echo 0;
}
else {
echo file_get_contents('http://mystatus.skype.com/'.$_GET['user'].'.num');
}
?>

Add example in the zip file

VIEW THE EXAMPLE FILE

With this class can made multiple text slider and configure text, styles and more.

VIEW THE EXAMPLE FILE

var MooSlider = new Class({

Implements: [Options],

options: {
createToggle: true,
tagToggle: 'a',
cssHide: '.hide',
cssToggle: '.toggle',
slideDuration: 340,
slideMode: 'vertical',
slideTransitions: Fx.Transitions.Bounce.easeOut,
textOpen: '+ Open',
textClose: '- Close',
elementsOpen: []
},

initialize: function(elements, options) {
this.setOptions(options);

// Set elements
this.setSlide(elements);
},

setSlide: function(elements) {
var status = {
'true': this.options.textOpen,
'false': this.options.textClose
};

$$(elements).each(function(div){

var isClose = (this.options.elementsOpen.indexOf(div.getProperty('id')) == -1);

if (this.options.createToggle) {
var link = new Element(this.options.tagToggle, { 'html': isClose?this.options.textOpen:this.options.textClose, 'class': this.options.cssToggle.replace('.',''), 'style': 'cursor:pointer;' } ).inject(div, 'top');
}
else {
var link = div.getElement(this.options.cssToggle).setStyle('cursor', 'pointer').set('class', this.options.cssToggle.replace('.',''));
}

this.hide = div.getElement(this.options.cssHide);

var fx = new Fx.Slide(this.hide, {
duration: this.options.slideDuration,
mode: this.options.slideMode,
transition: this.options.slideTransitions
})

fx.addEvent('complete', function() {
link.set('html', fx.open?status[false]:status[true]);
});

if (isClose) {
fx.hide();
}
else {
fx.show();
}

link.addEvent('click', function(e){
e.stop();
fx.toggle();
});

}, this);
}
})

For init the class use this:

<script src="mootools-1.2.2-core.js" type="text/javascript"  charset="utf-8"></script>
<script src="mootools-1.2.2.2-more.js" type="text/javascript"  charset="utf-8"></script>
<script src="moo-slider-min.js" type="text/javascript"  charset="utf-8"></script>
<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
<pre id="line1">    var slider = new MooSlider('.slide', {
    createToggle: true,
    tagToggle: 'a',
    cssHide: '.hide',
    cssToggle: '.toggle',
    slideDuration:340,
    slideMode: 'vertical',
    slideTransitions: Fx.Transitions.Pow.easeOut,
    textOpen: '+ View more',
    textClose: '- Close more',
    elementsOpen: []
    });
});
//]]></pre>
</script>

And this is the html for the sliders contents:

<div class="slide">
<div class="hide">
<h1>Slide 1</h1>
This is my html code for this slide
</div>
</div>
<div class="slide">
<div class="hide">
<h1>Slide 2</h1>
This is my html code for this slide
</div>
</div>