/*
---

name: CSSAnimation

license: MIT-style license.

author: Ryan Florence <http://ryanflorence.com>

provides: [CSSAnimation]

...
*/

;(function(global){

var getSupportedStyle = function(element, supported){
    for (var i = supported.length - 1; i >= 0; i--){
        if (element.style[supported[i]] !== undefined){
            return supported[i];
        }
    };
};

var Transform = global.Transform = function(element, supported){
    this.element = element;
    this.style = getSupportedStyle(element, supported || [ 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform' ]);
}; global.Transform.prototype = {

    translate: function(axis, value){
        return this.setter(axis, value, 'translate');
    },

    rotate: function(axis, value){
        if (typeof axis === 'number') return this.add('rotate', axis);
        return this.setter(axis, value, 'rotate');
    },
    
    skew: function(axis, value){
        return this.setter(axis, value, 'skew');
    },

    scale: function(axis, value){
        if (typeof axis === 'number') return this.add('scale', axis);
        this.setter(axis, value, 'scale');
        return this;
    },

    matrix: function(){
        var transform = this.element.style[this.style],
            match = new RegExp(this.rules.matrix.regex).test(transform),
            shared = 'matrix(' + Array.prototype.slice.call(arguments, 0).join(',') + ')';
        if (transform === 'none') transform = '';
        return match
            ? this.set(transform.replace(this.rules[rule].regex, shared))
            : this.set(transform + ' ' + shared);
    },

    clear: function(){
        return this.set('');
    },

    set: function(def){
        this.element.style[this.style] = def;
        return this;
    },

    // not "public", feel free to use, but the rest of these methods
    // are not guaranteed to have backward compatibility in future releases

    setter: function(a, b, method){
        if (typeof a === 'string') return this.add(method + a.toUpperCase(), b);
        for (i in a) if (a.hasOwnProperty(i)) this[method](i, a[i])
        return this;
    },

    add: function(rule, value){
        var transform = this.element.style[this.style],
            rule = rule === 'rotateZ' ? 'rotate' : rule,
            match = new RegExp(this.rules[rule].regex).test(transform),
            unit = this.rules[rule].unit,
            shared = rule + '(' + value + unit + ')';
        if (transform === 'none') transform = '';
        return match
            ? this.set(transform.replace(this.rules[rule].regex, shared))
            : this.set(transform + ' ' + shared);
    },

    remove: function(rule){
        return this.set(this.element.style[this.style].replace(this.rules[rule].regex, ''));
    },

    // this is admittadly verbose, but if an API changes,
    // this is easy to override and (sortof) future-proof the script
    // I'm still not sold it's the right way :\ ... but I'm more interested in
    // creating something useful first, then clean it up :D
    rules: {
        'rotateX':{
            regex: /rotateX\((-?[0-9]+deg)\)/,
            unit: 'deg'
        },
        'rotateY': {
            regex: /rotateY\((-?[0-9]+deg)\)/,
            unit: 'deg'
        },
        'rotateZ': {
            regex:  /rotateZ\((-?[0-9]+deg)\)/,
            unit: 'deg'
        },
        'rotate': {
            regex: /rotate\((-?[0-9]+deg)\)/,
            unit: 'deg'
        },
        'translateX': {
            regex:  /translateX\((-?[0-9]+%)\)/,
            unit: '%'
        },
        'translateY': {
            regex: /translateY\((-?[0-9]+%)\)/,
            unit: '%'
        },
        'translateZ': {
            regex: /translateZ\((-?[0-9]+px)\)/,
            unit: 'px'
        },
        'scale': {
            regex: /scale\((-?[0-9]+)\)/,
            unit: ''
        },
        'scaleX': {
            regex: /scaleX\((-?[0-9]+)\)/,
            unit: ''
        },
        'scaleY': {
            regex: /scaleY\((-?[0-9]+)\)/,
            unit: ''
        },
        'skewX': {
            regex:  /skewX\((-?[0-9]+deg)\)/,
            unit: 'deg'
        },
        'skewY': {
            regex:  /skewY\((-?[0-9]+deg)\)/,
            unit: 'deg'
        },
        'scale': {
            regex: /scale\((-?[0-9]+\.?[0-9]+?)\)/,
            unit: ''
        },
        'scaleX': {
            regex: /scaleX\((-?[0-9]+\.?[0-9]+?)\)/,
            unit: ''
        },
        'scaleY': {
            regex: /scaleY\((-?[0-9]+\.?[0-9]+?)\)/,
            unit: ''
        },
        'matrix': {
            regex: /matrix(.+)/,
            unit: ''
        }
    }
};

var Transition = global.Transition = function(element, supported){
    this.element = element;
    this.supported = supported || {
        prefixes:          ['WebkitTransition', 'MozTransition', 'OTransition', 'msTransition' ],
        transformPrefixes: ['-webkit-'        , '-moz-'        , '-o-'        , '-ms-']
    };
    this.style = getSupportedStyle(element, this.supported.prefixes);
    this.supported.index = this.supported.prefixes.indexOf(this.style);
}; global.Transition.prototype = {

    map: {
        'duration': 'Duration',
        'property': 'Property',
        'timing-function': 'TimingFunction'
    },

    set: function(property, value){
        if (typeof property === 'string') {
            if (value === 'transform') value = this.supported.transformPrefixes[this.supported.index] + 'transform';
            this.element.style[this.style + this.map[property]] = value;
            return this;
        }
        for (i in property) if (property.hasOwnProperty(i)) this.set(i, property[i]);
        return this;
    },

    clear: function(rule){
        if (!rule) {
            return this.set({
                duration: '',
                property: '',
                'timing-function': ''
            });
        }
        return this.set(rule, '');
    }

}

})(window); // change window to whatever global object you want to hand these constructors from