/lenasys/trunk

/*

PIE: CSS3 rendering for IE

Version 1.0.0

http://css3pie.com

Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.

*/

(function(){

var doc = document;var PIE = window['PIE'];

if( !PIE ) {

    PIE = window['PIE'] = {

        CSS_PREFIX: '-pie-',

        STYLE_PREFIX: 'Pie',

        CLASS_PREFIX: 'pie_',

        tableCellTags: {

            'TD': 1,

            'TH': 1

        },

        /**

         * Lookup table of elements which cannot take custom children.

         */

        childlessElements: {

            'TABLE':1,

            'THEAD':1,

            'TBODY':1,

            'TFOOT':1,

            'TR':1,

            'INPUT':1,

            'TEXTAREA':1,

            'SELECT':1,

            'OPTION':1,

            'IMG':1,

            'HR':1

        },

        /**

         * Elements that can receive user focus

         */

        focusableElements: {

            'A':1,

            'INPUT':1,

            'TEXTAREA':1,

            'SELECT':1,

            'BUTTON':1

        },

        /**

         * Values of the type attribute for input elements displayed as buttons

         */

        inputButtonTypes: {

            'submit':1,

            'button':1,

            'reset':1

        },

        emptyFn: function() {}

    };

    // Force the background cache to be used. No reason it shouldn't be.

    try {

        doc.execCommand( 'BackgroundImageCache', false, true );

    } catch(e) {}

    (function() {

        /*

         * IE version detection approach by James Padolsey, with modifications -- from

         * http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/

         */

        var ieVersion = 4,

            div = doc.createElement('div'),

            all = div.getElementsByTagName('i'),

            shape;

        while (

            div.innerHTML = '<!--[if gt IE ' + (++ieVersion) + ']><i></i><![endif]-->',

            all[0]

        ) {}

        PIE.ieVersion = ieVersion;

        // Detect IE6

        if( ieVersion === 6 ) {

            // IE6 can't access properties with leading dash, but can without it.

            PIE.CSS_PREFIX = PIE.CSS_PREFIX.replace( /^-/, '' );

        }

        PIE.ieDocMode = doc.documentMode || PIE.ieVersion;

        // Detect VML support (a small number of IE installs don't have a working VML engine)

        div.innerHTML = '<v:shape adj="1"/>';

        shape = div.firstChild;

        shape.style['behavior'] = 'url(#default#VML)';

        PIE.supportsVML = (typeof shape['adj'] === "object");

    }());

/**

 * Utility functions

 */

(function() {

    var vmlCreatorDoc,

        idNum = 0,

        imageSizes = {};

    PIE.Util = {

        /**

         * To create a VML element, it must be created by a Document which has the VML

         * namespace set. Unfortunately, if you try to add the namespace programatically

         * into the main document, you will get an "Unspecified error" when trying to

         * access document.namespaces before the document is finished loading. To get

         * around this, we create a DocumentFragment, which in IE land is apparently a

         * full-fledged Document. It allows adding namespaces immediately, so we add the

         * namespace there and then have it create the VML element.

         * @param {string} tag The tag name for the VML element

         * @return {Element} The new VML element

         */

        createVmlElement: function( tag ) {

            var vmlPrefix = 'css3vml';

            if( !vmlCreatorDoc ) {

                vmlCreatorDoc = doc.createDocumentFragment();

                vmlCreatorDoc.namespaces.add( vmlPrefix, 'urn:schemas-microsoft-com:vml' );

            }

            return vmlCreatorDoc.createElement( vmlPrefix + ':' + tag );

        },

        /**

         * Generate and return a unique ID for a given object. The generated ID is stored

         * as a property of the object for future reuse.

         * @param {Object} obj

         */

        getUID: function( obj ) {

            return obj && obj[ '_pieId' ] || ( obj[ '_pieId' ] = '_' + ++idNum );

        },

        /**

         * Simple utility for merging objects

         * @param {Object} obj1 The main object into which all others will be merged

         * @param {...Object} var_args Other objects which will be merged into the first, in order

         */

        merge: function( obj1 ) {

            var i, len, p, objN, args = arguments;

            for( i = 1, len = args.length; i < len; i++ ) {

                objN = args[i];

                for( p in objN ) {

                    if( objN.hasOwnProperty( p ) ) {

                        obj1[ p ] = objN[ p ];

                    }

                }

            }

            return obj1;

        },

        /**

         * Execute a callback function, passing it the dimensions of a given image once

         * they are known.

         * @param {string} src The source URL of the image

         * @param {function({w:number, h:number})} func The callback function to be called once the image dimensions are known

         * @param {Object} ctx A context object which will be used as the 'this' value within the executed callback function

         */

        withImageSize: function( src, func, ctx ) {

            var size = imageSizes[ src ], img, queue;

            if( size ) {

                // If we have a queue, add to it

                if( Object.prototype.toString.call( size ) === '[object Array]' ) {

                    size.push( [ func, ctx ] );

                }

                // Already have the size cached, call func right away

                else {

                    func.call( ctx, size );

                }

            } else {

                queue = imageSizes[ src ] = [ [ func, ctx ] ]; //create queue

                img = new Image();

                img.onload = function() {

                    size = imageSizes[ src ] = { w: img.width, h: img.height };

                    for( var i = 0, len = queue.length; i < len; i++ ) {

                        queue[ i ][ 0 ].call( queue[ i ][ 1 ], size );

                    }

                    img.onload = null;

                };

                img.src = src;

            }

        }

    };

})();/**

 * Utility functions for handling gradients

 */

PIE.GradientUtil = {

    getGradientMetrics: function( el, width, height, gradientInfo ) {

        var angle = gradientInfo.angle,

            startPos = gradientInfo.gradientStart,

            startX, startY,

            endX, endY,

            startCornerX, startCornerY,

            endCornerX, endCornerY,

            deltaX, deltaY,

            p, UNDEF;

        // Find the "start" and "end" corners; these are the corners furthest along the gradient line.

        // This is used below to find the start/end positions of the CSS3 gradient-line, and also in finding

        // the total length of the VML rendered gradient-line corner to corner.

        function findCorners() {

            startCornerX = ( angle >= 90 && angle < 270 ) ? width : 0;

            startCornerY = angle < 180 ? height : 0;

            endCornerX = width - startCornerX;

            endCornerY = height - startCornerY;

        }

        // Normalize the angle to a value between [0, 360)

        function normalizeAngle() {

            while( angle < 0 ) {

                angle += 360;

            }

            angle = angle % 360;

        }

        // Find the start and end points of the gradient

        if( startPos ) {

            startPos = startPos.coords( el, width, height );

            startX = startPos.x;

            startY = startPos.y;

        }

        if( angle ) {

            angle = angle.degrees();

            normalizeAngle();

            findCorners();

            // If no start position was specified, then choose a corner as the starting point.

            if( !startPos ) {

                startX = startCornerX;

                startY = startCornerY;

            }

            // Find the end position by extending a perpendicular line from the gradient-line which

            // intersects the corner opposite from the starting corner.

            p = PIE.GradientUtil.perpendicularIntersect( startX, startY, angle, endCornerX, endCornerY );

            endX = p[0];

            endY = p[1];

        }

        else if( startPos ) {

            // Start position but no angle specified: find the end point by rotating 180deg around the center

            endX = width - startX;

            endY = height - startY;

        }

        else {

            // Neither position nor angle specified; create vertical gradient from top to bottom

            startX = startY = endX = 0;

            endY = height;

        }

        deltaX = endX - startX;

        deltaY = endY - startY;

        if( angle === UNDEF ) {

            // Get the angle based on the change in x/y from start to end point. Checks first for horizontal

            // or vertical angles so they get exact whole numbers rather than what atan2 gives.

            angle = ( !deltaX ? ( deltaY < 0 ? 90 : 270 ) :

                        ( !deltaY ? ( deltaX < 0 ? 180 : 0 ) :

                            -Math.atan2( deltaY, deltaX ) / Math.PI * 180

                        )

                    );

            normalizeAngle();

            findCorners();

        }

        return {

            angle: angle,

            startX: startX,

            startY: startY,

            endX: endX,

            endY: endY,

            startCornerX: startCornerX,

            startCornerY: startCornerY,

            endCornerX: endCornerX,

            endCornerY: endCornerY,

            deltaX: deltaX,

            deltaY: deltaY,

            lineLength: PIE.GradientUtil.distance( startX, startY, endX, endY )

        }

    },

    /**

     * Find the point along a given line (defined by a starting point and an angle), at which

     * that line is intersected by a perpendicular line extending through another point.

     * @param x1 - x coord of the starting point

     * @param y1 - y coord of the starting point

     * @param angle - angle of the line extending from the starting point (in degrees)

     * @param x2 - x coord of point along the perpendicular line

     * @param y2 - y coord of point along the perpendicular line

     * @return [ x, y ]

     */

    perpendicularIntersect: function( x1, y1, angle, x2, y2 ) {

        // Handle straight vertical and horizontal angles, for performance and to avoid

        // divide-by-zero errors.

        if( angle === 0 || angle === 180 ) {

            return [ x2, y1 ];

        }

        else if( angle === 90 || angle === 270 ) {

            return [ x1, y2 ];

        }

        else {

            // General approach: determine the Ax+By=C formula for each line (the slope of the second

            // line is the negative inverse of the first) and then solve for where both formulas have

            // the same x/y values.

            var a1 = Math.tan( -angle * Math.PI / 180 ),

                c1 = a1 * x1 - y1,

                a2 = -1 / a1,

                c2 = a2 * x2 - y2,

                d = a2 - a1,

                endX = ( c2 - c1 ) / d,

                endY = ( a1 * c2 - a2 * c1 ) / d;

            return [ endX, endY ];

        }

    },

    /**

     * Find the distance between two points

     * @param {Number} p1x

     * @param {Number} p1y

     * @param {Number} p2x

     * @param {Number} p2y

     * @return {Number} the distance

     */

    distance: function( p1x, p1y, p2x, p2y ) {

        var dx = p2x - p1x,

            dy = p2y - p1y;

        return Math.abs(

            dx === 0 ? dy :

            dy === 0 ? dx :

            Math.sqrt( dx * dx + dy * dy )

        );

    }

};/**

 * 

 */

PIE.Observable = function() {

    /**

     * List of registered observer functions

     */

    this.observers = [];

    /**

     * Hash of function ids to their position in the observers list, for fast lookup

     */

    this.indexes = {};

};

PIE.Observable.prototype = {

    observe: function( fn ) {

        var id = PIE.Util.getUID( fn ),

            indexes = this.indexes,

            observers = this.observers;

        if( !( id in indexes ) ) {

            indexes[ id ] = observers.length;

            observers.push( fn );

        }

    },

    unobserve: function( fn ) {

        var id = PIE.Util.getUID( fn ),

            indexes = this.indexes;

        if( id && id in indexes ) {

            delete this.observers[ indexes[ id ] ];

            delete indexes[ id ];

        }

    },

    fire: function() {

        var o = this.observers,

            i = o.length;

        while( i-- ) {

            o[ i ] && o[ i ]();

        }

    }

};/*

 * Simple heartbeat timer - this is a brute-force workaround for syncing issues caused by IE not

 * always firing the onmove and onresize events when elements are moved or resized. We check a few

 * times every second to make sure the elements have the correct position and size. See Element.js

 * which adds heartbeat listeners based on the custom -pie-poll flag, which defaults to true in IE8-9

 * and false elsewhere.

 */

PIE.Heartbeat = new PIE.Observable();

PIE.Heartbeat.run = function() {

    var me = this,

        interval;

    if( !me.running ) {

        interval = doc.documentElement.currentStyle.getAttribute( PIE.CSS_PREFIX + 'poll-interval' ) || 250;

        (function beat() {

            me.fire();

            setTimeout(beat, interval);

        })();

        me.running = 1;

    }

};

/**

 * Create an observable listener for the onunload event

 */

(function() {

    PIE.OnUnload = new PIE.Observable();

    function handleUnload() {

        PIE.OnUnload.fire();

        window.detachEvent( 'onunload', handleUnload );

        window[ 'PIE' ] = null;

    }

    window.attachEvent( 'onunload', handleUnload );

    /**

     * Attach an event which automatically gets detached onunload

     */

    PIE.OnUnload.attachManagedEvent = function( target, name, handler ) {

        target.attachEvent( name, handler );

        this.observe( function() {

            target.detachEvent( name, handler );

        } );

    };

})()/**

 * Create a single observable listener for window resize events.

 */

PIE.OnResize = new PIE.Observable();

PIE.OnUnload.attachManagedEvent( window, 'onresize', function() { PIE.OnResize.fire(); } );

/**

 * Create a single observable listener for scroll events. Used for lazy loading based

 * on the viewport, and for fixed position backgrounds.

 */

(function() {

    PIE.OnScroll = new PIE.Observable();

    function scrolled() {

        PIE.OnScroll.fire();

    }

    PIE.OnUnload.attachManagedEvent( window, 'onscroll', scrolled );

    PIE.OnResize.observe( scrolled );

})();

/**

 * Listen for printing events, destroy all active PIE instances when printing, and

 * restore them afterward.

 */

(function() {

    var elements;

    function beforePrint() {

        elements = PIE.Element.destroyAll();

    }

    function afterPrint() {

        if( elements ) {

            for( var i = 0, len = elements.length; i < len; i++ ) {

                PIE[ 'attach' ]( elements[i] );

            }

            elements = 0;

        }

    }

    if( PIE.ieDocMode < 9 ) {

        PIE.OnUnload.attachManagedEvent( window, 'onbeforeprint', beforePrint );

        PIE.OnUnload.attachManagedEvent( window, 'onafterprint', afterPrint );

    }

})();/**

 * Create a single observable listener for document mouseup events.

 */

PIE.OnMouseup = new PIE.Observable();

PIE.OnUnload.attachManagedEvent( doc, 'onmouseup', function() { PIE.OnMouseup.fire(); } );

/**

 * Wrapper for length and percentage style values. The value is immutable. A singleton instance per unique

 * value is returned from PIE.getLength() - always use that instead of instantiating directly.

 * @constructor

 * @param {string} val The CSS string representing the length. It is assumed that this will already have

 *                 been validated as a valid length or percentage syntax.

 */

PIE.Length = (function() {

    var lengthCalcEl = doc.createElement( 'length-calc' ),

        parent = doc.body || doc.documentElement,

        s = lengthCalcEl.style,

        conversions = {},

        units = [ 'mm', 'cm', 'in', 'pt', 'pc' ],

        i = units.length,

        instances = {};

    s.position = 'absolute';

    s.top = s.left = '-9999px';

    parent.appendChild( lengthCalcEl );

    while( i-- ) {

        s.width = '100' + units[i];

        conversions[ units[i] ] = lengthCalcEl.offsetWidth / 100;

    }

    parent.removeChild( lengthCalcEl );

    // All calcs from here on will use 1em

    s.width = '1em';

    function Length( val ) {

        this.val = val;

    }

    Length.prototype = {

        /**

         * Regular expression for matching the length unit

         * @private

         */

        unitRE: /(px|em|ex|mm|cm|in|pt|pc|%)$/,

        /**

         * Get the numeric value of the length

         * @return {number} The value

         */

        getNumber: function() {

            var num = this.num,

                UNDEF;

            if( num === UNDEF ) {

                num = this.num = parseFloat( this.val );

            }

            return num;

        },

        /**

         * Get the unit of the length

         * @return {string} The unit

         */

        getUnit: function() {

            var unit = this.unit,

                m;

            if( !unit ) {

                m = this.val.match( this.unitRE );

                unit = this.unit = ( m && m[0] ) || 'px';

            }

            return unit;

        },

        /**

         * Determine whether this is a percentage length value

         * @return {boolean}

         */

        isPercentage: function() {

            return this.getUnit() === '%';

        },

        /**

         * Resolve this length into a number of pixels.

         * @param {Element} el - the context element, used to resolve font-relative values

         * @param {(function():number|number)=} pct100 - the number of pixels that equal a 100% percentage. This can be either a number or a

         *                  function which will be called to return the number.

         */

        pixels: function( el, pct100 ) {

            var num = this.getNumber(),

                unit = this.getUnit();

            switch( unit ) {

                case "px":

                    return num;

                case "%":

                    return num * ( typeof pct100 === 'function' ? pct100() : pct100 ) / 100;

                case "em":

                    return num * this.getEmPixels( el );

                case "ex":

                    return num * this.getEmPixels( el ) / 2;

                default:

                    return num * conversions[ unit ];

            }

        },

        /**

         * The em and ex units are relative to the font-size of the current element,

         * however if the font-size is set using non-pixel units then we get that value

         * rather than a pixel conversion. To get around this, we keep a floating element

         * with width:1em which we insert into the target element and then read its offsetWidth.

         * For elements that won't accept a child we insert into the parent node and perform

         * additional calculation. If the font-size *is* specified in pixels, then we use that

         * directly to avoid the expensive DOM manipulation.

         * @param {Element} el

         * @return {number}

         */

        getEmPixels: function( el ) {

            var fs = el.currentStyle.fontSize,

                px, parent, me;

            if( fs.indexOf( 'px' ) > 0 ) {

                return parseFloat( fs );

            }

            else if( el.tagName in PIE.childlessElements ) {

                me = this;

                parent = el.parentNode;

                return PIE.getLength( fs ).pixels( parent, function() {

                    return me.getEmPixels( parent );

                } );

            }

            else {

                el.appendChild( lengthCalcEl );

                px = lengthCalcEl.offsetWidth;

                if( lengthCalcEl.parentNode === el ) { //not sure how this could be false but it sometimes is

                    el.removeChild( lengthCalcEl );

                }

                return px;

            }

        }

    };

    /**

     * Retrieve a PIE.Length instance for the given value. A shared singleton instance is returned for each unique value.

     * @param {string} val The CSS string representing the length. It is assumed that this will already have

     *                 been validated as a valid length or percentage syntax.

     */

    PIE.getLength = function( val ) {

        return instances[ val ] || ( instances[ val ] = new Length( val ) );

    };

    return Length;

})();

/**

 * Wrapper for a CSS3 bg-position value. Takes up to 2 position keywords and 2 lengths/percentages.

 * @constructor

 * @param {Array.<PIE.Tokenizer.Token>} tokens The tokens making up the background position value.

 */

PIE.BgPosition = (function() {

    var length_fifty = PIE.getLength( '50%' ),

        vert_idents = { 'top': 1, 'center': 1, 'bottom': 1 },

        horiz_idents = { 'left': 1, 'center': 1, 'right': 1 };

    function BgPosition( tokens ) {

        this.tokens = tokens;

    }

    BgPosition.prototype = {

        /**

         * Normalize the values into the form:

         * [ xOffsetSide, xOffsetLength, yOffsetSide, yOffsetLength ]

         * where: xOffsetSide is either 'left' or 'right',

         *        yOffsetSide is either 'top' or 'bottom',

         *        and x/yOffsetLength are both PIE.Length objects.

         * @return {Array}

         */

        getValues: function() {

            if( !this._values ) {

                var tokens = this.tokens,

                    len = tokens.length,

                    Tokenizer = PIE.Tokenizer,

                    identType = Tokenizer.Type,

                    length_zero = PIE.getLength( '0' ),

                    type_ident = identType.IDENT,

                    type_length = identType.LENGTH,