/**
* Various effect object used for element applyEffect function using combination of transformStyle
* all effect object should use keyword 'this' as reference to the element
*/
var Effect = {
	DEFAULT_DURATION: 200,
	setDefaultDuration: function(d) {
		this.DEFAULT_DURATION = d;
	},
	
	fadeOut: function(option) {
		var duration = (option)? option.duration : null;
		var onComplete = (option)? option.onComplete || function() {} : null;
		this.transformStyle({ opacity: {start: 1, end: 0, duration: duration || Effect.DEFAULT_DURATION} }, onComplete);
	},
	
	fadeIn: function(option) {
		var duration = (option)? option.duration : null;
		var onComplete = (option)? option.onComplete || function() {} : null;
		this.transformStyle({ opacity: {start: 0, end: 1, duration: duration || Effect.DEFAULT_DURATION} }, onComplete);
	},
	
	pop: function(option) {
		var width = (option)? option.width : null;
		var height = (option)? option.height : null;
		var onComplete = (option)? option.onComplete || function() {} : null;
		
		var styleSet = { width: width + 'px', height: height + 'px' };
		this.transformStyleSet(styleSet, {duration: 500, accelerate: -4, onComplete: onComplete});
	},

	scale: function(option) {
		var width = (option)? option.width : null;
		var height = (option)? option.height : null;
		var duration = (option)? option.duration : null;
		var onComplete = (option)? option.onComplete || function() {} : null;
		
		var styleSet = { width: width + 'px', height: height + 'px' };
		this.transformStyleSet(styleSet, {duration: duration || Effect.DEFAULT_DURATION, onComplete: onComplete});
	},
	
	move: function(option) {
		var top = (option)? option.top : null;
		var left = (option)? option.left : null;
		var duration = (option)? option.duration : null;
		var onComplete = (option)? option.onComplete || function() {} : null;
		
		var styleSet = { top: top + 'px', left: left + 'px' };
		this.transformStyleSet(styleSet, {duration: duration || Effect.DEFAULT_DURATION, onComplete: onComplete});
	}

}