var points=0;
var results='';
var input_element = document.createElement('input');
var document_element = document.documentElement;	
var bool;

var form_types=new Array("search","tel","url","email","datetime","date","month","week","time","datetime-local","number","range","color");
var form_attrs=new Array("autocomplete","autofocus","list","placeholder","max","min","multiple","pattern","required","step");
var video_codecs=new Array('video/ogg; codecs="theora"','video/mp4; codecs="avc1.42E01E','video/webm; codecs="vp8, vorbis"');
var audio_codecs=new Array('audio/ogg; codecs="vorbis"','audio/mpeg;','audio/wav; codecs="1"','audio/x-m4a;','audio/aac;');


function append_result(property,result){
	if(result=='ok'){
		$("#results").append('<p class="ok"><span>OK</span>'+property+'</p>');
		results=results+1;
	}
	else{
		$("#results").append('<p class="fail"><span>Fail</span>'+property+'</p>');
		results=results+0;
	}
}


function test_form_attr(form_attr){
	bool=!!(form_attr in input_element);
	if(bool){
		points=points+1;
		append_result(form_attr,'ok');
	}
	else
		append_result(form_attr,'fail');	
}


function test_form_type(form_type){
	var defaultView;
	input_element.setAttribute('type', form_type);
    bool = input_element.type !== 'text';	

	if (bool) {

        input_element.value="test";
        input_element.style.cssText = 'position:absolute;visibility:hidden;';

        if (form_type=='range' && input_element.style.WebkitAppearance !== undefined) {
            document_element.appendChild(input_element);
            defaultView = document.defaultView;  	
            bool = defaultView.getComputedStyle && defaultView.getComputedStyle(input_element, null).WebkitAppearance !== 'textfield' && (input_element.offsetHeight !== 0);
            document_element.removeChild(input_element);
        } 
		else if (form_type=='url' || form_type=='email') {                      
            bool = input_element.checkValidity && input_element.checkValidity() === false;
        }
		else if (form_type=='color') {                        
            document_element.appendChild(input_element);
            document_element.offsetWidth;
            bool = input_element.value != "test";
            document_element.removeChild(input_element);
        }
		else if (form_type=='search' || form_type=='tel'){
                     
        }
		else {            
            bool = input_element.value != "test";
        }
		
		if(bool){
			points=points+1;
			append_result(form_type,'ok');
		}
		else
			append_result(form_type,'fail');		
    }
	else append_result(form_type,'fail');	
}


function test_video(codec){
	var elem = document.createElement('video'),
    bool = false;
	try {
		if ( bool = !!elem.canPlayType ) {
			if(codec=='video/mp4; codecs="avc1.42E01E')
				bool = elem.canPlayType(codec + '"') || elem.canPlayType(codec + ', mp4a.40.2"');
			else
				bool = elem.canPlayType(codec); 
		}
	} catch(e) { }	
       
    if(bool){
		points=points+1;
		append_result(codec,'ok');
	}
	else append_result(codec,'fail');  
}


function test_audio(codec){    
    var elem = document.createElement('audio'),
    bool = false;

    try { 
        if ( bool = !!elem.canPlayType ) {
            bool = elem.canPlayType(codec);
        }
    } catch(e) { }
    
	if(bool){
		points=points+1;
		append_result(codec,'ok');
	}
	else append_result(codec,'fail');   
}

function test_localstorage() {
    try {
        bool = !!localStorage.getItem;
		if(bool){
			points=points+1;
			append_result('localstorage','ok');
		}
		else append_result('localstorage','fail');		
    } 
	catch(e) {append_result('localstorage','fail'); }
}

function test_sessionstorage() {
    try {
        bool = !!sessionStorage.getItem;
		if(bool){
			points=points+1;
			append_result('sessionstorage','ok');
		}
		else append_result('sessionstorage','fail');		
    } 
	catch(e){append_result('sessionstorage','fail');}
       
};

function test_messaging(){
	try {
		bool = !!window.postMessage;
		if(bool){
			points=points+1;
			append_result('messaging','ok');
		}
		else append_result('messaging','fail');		     
    } 
	catch(e){append_result('messaging','fail');}
}


function test_canvas() {
	try {
		bool = !!document.createElement('canvas').getContext;
		if(bool){
			points=points+1;
			append_result('Canvas API','ok');
		}
		else append_result('Canvas API','fail');		
    } 
	catch(e){append_result('Canvas API','fail');} 
}

function test_canvas_text() {
	if (!!document.createElement('canvas').getContext) { 
		var canvas_element = document.createElement('canvas');
		var context = canvas_element.getContext('2d');
		bool = typeof context.fillText == 'function';
		if(bool){
			points=points+1;
			append_result('Canvas Text API','ok');
		}
		else append_result('Canvas Text API','fail');		
	}
	else append_result('Canvas Text API','fail');
}

//Browser and OS detect
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},{ 	
			string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},{
			prop: window.opera,
			identity: "Opera",
			versionSearch: "Version"
		},{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},{		
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},{ 		
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]
};
BrowserDetect.init();

$("#results").append('<p class="header">WEB BROWSER: <span>' + BrowserDetect.browser + '  ' + BrowserDetect.version + '</span>, OS: <span>' + BrowserDetect.OS + '</span></p>');

$("#results").append('<p class="title">HTML5 Forms</p>');
for ( var i = 0; i<form_types.length; i++ ) {	
	test_form_type(form_types[i]);
}

$("#results").append('<p class="title">HTML5 Forms attributes</p>');
for ( var i = 0; i<form_attrs.length; i++ ) {	
	test_form_attr(form_attrs[i]);
}

$("#results").append('<p class="title">HTML5 Video</p>');
for ( var i = 0; i<video_codecs.length; i++ ) {	
	test_video(video_codecs[i]);
}

$("#results").append('<p class="title">HTML5 Audio</p>');
for ( var i = 0; i<audio_codecs.length; i++ ) {	
	test_video(audio_codecs[i]);
}

$("#results").append('<p class="title">HTML5 Storage</p>');
test_localstorage();
test_sessionstorage();

$("#results").append('<p class="title">HTML5 messaging</p>');
test_messaging();

$("#results").append('<p class="title">HTML5 Canvas</p>');
test_canvas();
test_canvas_text();


$("#results").append('<p class="title">CSS Selectors</p>');

//function test_css_selectors(){
	//E[foo^="bar"] 
	if($("#sel1_test").css("background-color")=='rgb(50, 0, 0)'){
		points=points+1;		
		append_result('E[foo^="bar"]','ok');
	}
	else append_result('E[foo^="bar"]','fail');
	
	//E[foo$="bar"]  
	if($("#sel2_test").css("background-color")=='rgb(100, 0, 0)'){
		points=points+1;
		append_result('E[foo$="bar"]','ok');
	}
	else append_result('E[foo$="bar"]','fail');
		
	//E[foo*="bar"]   
	if($("#sel3_test").css("background-color")=='rgb(150, 0, 0)'){
		points=points+1;
		append_result('E[foo*="bar"]','ok');
	}
	else append_result('E[foo*="bar"]','fail');
	
	//:root
	if($("html").css("padding-left")=='1px'){
		points=points+1;
		append_result(':root','ok');
	}
	else append_result(':root','fail');
		
	//E:nth-child(n)   
	if($("#nth_child_test").css("background-color")=='rgb(200, 0, 0)'){
		points=points+1;
		append_result('E:nth-child(n)','ok');
	}
	else append_result('E:nth-child(n)','fail');
	
	//E:nth-last-child(n)  
	if($("#nth_last_child_test").css("background-color")=='rgb(250, 0, 0)'){
		points=points+1;
		append_result('E:nth-last-child(n)','ok');
	}
	else append_result('E:nth-last-child(n)','fail');
	
	//E:nth-of-type(n)  
	if($("#nth_of_type_test").css("padding-left")=='1px'){
		points=points+1;
		append_result('E:nth-of-type(n)','ok');
	}
	else append_result('E:nth-of-type(n)','fail');
	
	//E:nth-last-of-type(n)  
	if($("#nth_last_of_type_test").css("padding-left")=='2px'){
		points=points+1;
		append_result('E:nth-last-of-type(n)','ok');
	}
	else append_result('E:nth-last-of-type(n)','fail');
	
	//E:first-child    
	if($("#first_child_test").css("color")=='rgb(0, 255, 50)'){
		points=points+1;
		append_result('E:first-child','ok');
	}
	else append_result('E:first-child','fail');
	
	//E:last-child    
	if($("#last_child_test").css("color")=='rgb(0, 255, 255)'){
		points=points+1;
		append_result('E:last-child','ok');
	}
	else append_result('E:last-child','fail');
	
	//E:first-of-type     
	if($("#first_of_type_test").css("font-size")=='20px'){
		points=points+1;
		append_result('E:first-of-type','ok');
	}
	else append_result('E:first-of-type','fail');
	
	//E:last-of-type     
	if($("#last_of_type_test").css("font-size")=='30px'){
		points=points+1;
		append_result('E:last-of-type','ok');
	}
	else append_result('E:last-of-type','fail');
	
	//E:only-child     
	if($("#only_child_test").css("font-size")=='40px'){
		points=points+1;
		append_result('E:only-child','ok');
	}
	else append_result('E:only-child','fail');
	
	//E:only-of-type     
	if($("#only_of_type_test").css("font-size")=='50px'){
		points=points+1;
		append_result('E:only-of-type','ok');
	}
	else append_result('E:only-of-type','fail');
	
	//E:empty   
	if($("#empty_test").css("margin-left")=='1px'){
		points=points+1;
		append_result('E:empty','ok');
	}
	else append_result('E:empty','fail');
	
	//E:enabled 
	
	if($("#enabled_test").css("background-color")=='rgb(100, 100, 100)'){
		points=points+1;
		append_result('E:enabled','ok');
	}
	else append_result('E:enabled','fail');
	
	//E:disabled   
	if($("#disabled_test").css("background-color")=='rgb(200, 0, 200)'){
		points=points+1;
		append_result('E:disabled','ok');
	}
	else append_result('E:disabled','fail');
	
	//E:checked   
	if($("#checked_test").css("margin-left")=='2px'){
		points=points+1;
		append_result('E:checked','ok');
	}
	else append_result('E:checked','fail');
	
	//E:not(s)   
	if($("#not_test").css("color")=='rgb(50, 100, 200)'){
		points=points+1;
		append_result('E:not(s)','ok');
	}
	else append_result('E:not(s)','fail');
	
	//E ~ F   
	if($("#selector_test").css("color")=='rgb(50, 50, 75)'){
		points=points+1;
		append_result('E ~ F','ok');
	}
	else append_result('E ~ F','fail');
	
//}

$("#results").append('<p class="title">CSS Colors</p>');

//RGBA test
if(!!~$("#rgba_test").css("background-color").indexOf('rgba(150, 255, 150, ')){
	points=points+1;
	append_result('RGBA','ok');
}
else append_result('RGBA','fail');

//HSL test
if(!!~$("#hsl_test").css("background-color").indexOf('rgb')){
	points=points+1;
	append_result('HSL','ok');
}
else append_result('HSL','fail');

//HSLA test
if(!!~$("#hsla_test").css("background-color").indexOf('rgba')){
	points=points+1;
	append_result('HSLA','ok');
}
else append_result('HSLA','fail');

$("#results").append('<p class="title">CSS Backgrounds and Borders</p>');

//Background size test
if($("#hsla_test").css("background-size")!== undefined){
	points=points+1;
	append_result('Background size','ok');
}
else append_result('Background size','fail');

//Border image test
if($("#hsla_test").css("border-image")!== undefined){
	points=points+1;
	append_result('Border image','ok');
}
else append_result('Border image','fail');

//Border radius test
if($("#hsla_test").css("border-radius")!== undefined){
	points=points+1;
	append_result('Border radius','ok');
}
else append_result('Border radius','fail');

//Box shadow test
if($("#hsla_test").css("box-shadow")!== undefined){
	points=points+1;
	append_result('Box shadow','ok');
}
else append_result('Box shadow','fail');


$("#results").append('<p class="title">CSS Multi-column Layout</p>');

//Columns test
if($("#hsla_test").css("column-count")!== undefined){
	points=points+1;
	append_result('Columns','ok');
}
else append_result('Columns','fail');


$("#results").append('<p class="title">Media Queries</p>');

//Media queries test
if($("#media_queries_test").css("padding-left")=='1px'){
	points=points+1;
	append_result('Media queries','ok');
}
else append_result('Media queries','fail');

var score=Math.floor(points/65*100);
$("#score").html(score+'%');
$("#results").append('<p class="footer">Total score: '+score+'% </p>');

var width=0;var delay=0;
				
function increment_progress(){			
 	if(width>100) width=100;
	$("#progress").css("width",width+"%");//alert(width);
	$("#progress_percentage").html(width+"%");//alert(width);
	if(width<100){
		delay=Math.round(Math.random()*200);				
		width=width+3;
		setTimeout('increment_progress()',delay);				
	}
	if(width==100){
		$("#test2").hide(0);
		$("#test3").show(0);
		$("#results").fadeIn(1000);
				
		var dataString = 'hash='+ hash + '&br_name=' + BrowserDetect.browser + '&br_version=' + BrowserDetect.version + '&result=' + results + '&score=' + score + '&os=' + BrowserDetect.OS;
		$.ajax({
			type: "POST",
			url: "add.php",
			data: dataString,
			success: function() {
							
			}
		}); 
	}
 }
		
$(document).ready(function() {
	$("#start_test").click(function(){				
		increment_progress(width);
		$("#test1").hide(0);
		$("#test2").show(0);				
	});			
});