// some regular checking
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
	isIE8 = isIE === 8,
	isIE9 = isIE === 9;


/* RADIUS EXAMPLES */
var radiusBtn = document.getElementById('radiusBtn');
var allRadius = KUTE.to('#allRadius',{borderRadius:80},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
radiusBtn.addEventListener('click',function(){
    if (!allRadius.playing) { allRadius.start(); tlRadius.start(); trRadius.start(); blRadius.start(); brRadius.start(); }
}, false);
/* RADIUS EXAMPLES */


/*  BOX MODEL EXAMPLE  */
var boxModel = document.getElementById('boxModel'),
	btb = boxModel.querySelector('.btn'),
	box = boxModel.querySelector('.example-box-model');

// built the tween objects
var bm1 = KUTE.to(box,{marginTop:50},{ yoyo: true, repeat: 1, duration: 1500, update: onMarginTop});
var bm2 = KUTE.to(box,{marginBottom:50},{ yoyo: true, repeat: 1, duration: 1500, update: onMarginBottom});
var bm3 = KUTE.to(box,{paddingTop:15},{ yoyo: true, repeat: 1, duration: 1500, update: onPadding});
var bm4 = KUTE.to(box,{marginTop:50,marginLeft:50,marginBottom:70},{ yoyo: true, repeat: 1, duration: 1500, update: onMargin, complete: onComplete});

// chain the bms
bm1.chain(bm2);
bm2.chain(bm3);
bm3.chain(bm4);


//callback functions
function onMarginTop() { var css = KUTE.gCS(box,'marginTop'); box.innerHTML = parseInt(css)+'px'+'<br>MARGIN'; }
function onMarginBottom() { var css = KUTE.gCS(box,'marginBottom'); box.innerHTML = 'MARGIN<br>'+parseInt(css)+'px'; }
function onPadding() { var css = KUTE.gCS(box,'paddingTop'); box.innerHTML = parseInt(css)+'px<br>PADDING'; }
function onMargin() { var css = KUTE.gCS(box,'marginTop'); box.innerHTML = 'MARGIN<br>'+parseInt(css)+'px'; }
function onComplete() { box.innerHTML = 'BOX<br>&nbsp;MODEL&nbsp;'; }

btb.addEventListener('click', function(e){
	e.preventDefault();
	!bm1.playing && !bm2.playing && !bm3.playing && !bm4.playing && bm1.start();
},false);
/*  BOX MODEL EXAMPLE  */


/*  TEXT PROPERTIES EXAMPLE  */
var textProperties = document.getElementById('textProperties'),
	heading = textProperties.querySelector('h1'),
	button = textProperties.querySelectorAll('.btn')[0],                                            
	tbt = textProperties.querySelectorAll('.btn')[1],                                           

	// let's split the heading text by character
	chars = heading.innerHTML.split('');

// wrap the splits into spans and build an object with these spans 
heading.innerHTML = '<span>' + chars.join('</span><span>') + '</span>';
var charsObject = heading.getElementsByTagName('SPAN'), l = charsObject.length;


// built the tween objects
var tp1 = KUTE.fromTo(
    button, 
    {width: 150, opacity:0, height: 70, lineHeight:70, fontSize: 40}, 
    {width: 100, opacity:1, height: 35, lineHeight:35, fontSize: 20}),
    tps = [];

for (var i=0; i<l; i++){
    var fn = i === l-1 ? startButtonAnimation : null,
        delay = 250*i;
    
    tps.push(KUTE.fromTo(charsObject[i], 
        {opacity:0, height: 50, fontSize:80, letterSpacing: 20}, 
        {opacity:1, height: 35, fontSize:50, letterSpacing: 0}, 
        {complete: fn, delay: delay, duration: 500, easing: 'easingCubicOut'}
    ))

}

function startButtonAnimation(){
    tp1.start();
}	
function runHeadingAnimation() {
	for (var i=0; i<l; i++){    
        tps[i].start();
    }
}

tbt.addEventListener('click', function(e){
	e.preventDefault();
    if (!tp1.playing && !tps[0].playing && !tps[l-1].playing) {
        for (var i=0;i<l; i++) {
            charsObject[i].style.opacity ="";
            if (isIE8) charsObject[i].style.filter ="";
        }
        button.style.opacity = '';
        if (isIE8) button.style.filter ="";
        runHeadingAnimation();
    }
},false);
/*  TEXT PROPERTIES EXAMPLE  */


/*  COLORS EXAMPLE  */
var colBox = document.getElementById('colBox'),
	colBoxElement = colBox.querySelector('.example-box'),
	colbtn = colBox.querySelector('.btn');	

var colTween1 = KUTE.to(colBoxElement, {borderColor: '#069'}, {duration: 1000});
var colTween2 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1000});
var colTween3 = KUTE.to(colBoxElement, {borderRightColor: '#9C27B0'}, {duration: 1000});
var colTween4 = KUTE.to(colBoxElement, {borderBottomColor: '#9C27B0'}, {duration: 1000});
var colTween5 = KUTE.to(colBoxElement, {borderLeftColor: '#9C27B0'}, {duration: 1000});
var colTween6 = KUTE.to(colBoxElement, {outlineColor: '#9C27B0'}, {duration: 1000, repeat: 1, yoyo: true});

colTween1.chain(colTween2);
colTween2.chain(colTween3);
colTween3.chain(colTween4);
colTween4.chain(colTween5);
colTween5.chain(colTween6);


colbtn.addEventListener('click', function(e){
	e.preventDefault();
	!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing && !colTween5.playing && !colTween6.playing && colTween1.start();
},false);
/*  COLORS EXAMPLE  */


/*  CLIP EXAMPLE  */
var clipExample = document.getElementById('clip'),
	clipElement = clipExample.querySelector('.example-box'),
	clpbtn = clipExample.querySelector('.btn');

var clp1 = KUTE.to(clipElement, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
var clp2 = KUTE.to(clipElement, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
var clp3 = KUTE.to(clipElement, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
var clp4 = KUTE.to(clipElement, {clip: [0,150,150,0]}, {duration:1200, easing: 'easingExponentialInOut'});

//chain some clps
clp1.chain(clp2);
clp2.chain(clp3);
clp3.chain(clp4);

clpbtn.addEventListener('click', function(e){
	e.preventDefault();	
	!clp1.playing && !clp2.playing && !clp3.playing && !clp4.playing && clp1.start();
},false);
/*  CLIP EXAMPLE  */


/*  BACKGROUND POSITION EXAMPLE  */
var bgPos = document.getElementById('bgPos'),
	bgBox = bgPos.querySelector('.example-box'),
	bgb = bgPos.querySelector('.btn'),	
	bpTween1 = KUTE.to(bgBox, {backgroundPosition: ['0%','50%']}, { yoyo: true, repeat: 1, duration: 1500, easing: 'easingCubicOut'});
	
bgb.addEventListener('click', function(e){
	e.preventDefault();
	!bpTween1.playing && bpTween1.start();
},false);	
/*  BACKGROUND POSITION EXAMPLE  */