/*
---

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