/*var bodyheight = $(window).height();
//console.log($('#content-wrap'.width));
var bodywidth = $(window).width();*/
var bodyheight, bodywidth;

var blockheight, blockwidth;
var padding = 18;
var start_menu = [];
var amount_of_menu_items = 0;

function tag(name,position,link, fillcolor) {
	this.name = name;
	this.position = position;
	this.link = link;

	var time = 1500;
	var repeat = 0;
	var radius  = 100;
	var canvas_width = bodywidth - (2*padding) - (2*radius);
	var distance = 20;
	var	home_x, home_y;

	var	home_x = ((canvas_width/(amount_of_menu_items-1))*(this.position-1))+radius+padding; //finale Position 
	var	home_y = blockheight/2;
	
	var movement = 10;
	var pos_x = Math.random()*canvas_width;
	var pos_y = Math.random()*blockheight;
	var run_animation = true;
	var opacity_top = 0.8;
	var opacity_bottom = 0.5;
	var wobble_speed = 1500;
	var wooble_back_speed = 1500;
	var prev_angle = 180;
	var wobble_count = 0;
	var fillcolor_bottom = increase_brightness(hex2rgbstring(fillcolor));

	this.topcircle = paper.circle(pos_x, pos_y-distance, radius).attr({'fill':fillcolor,'stroke-opacity' : 0,'opacity':0 });
	this.lowercircle = 	paper.circle(pos_x, pos_y+distance, radius).attr({'fill':fillcolor_bottom,'stroke-opacity' : 0,'opacity':0 });


	
	var jap = '/ja/';
	var current_url = document.URL;
	console.log(current_url.search(jap));
	if(current_url.search(jap) != -1){
		// This script sets OSName variable as follows:
		// "Windows"    for all versions of Windows
		// "MacOS"      for all versions of Macintosh OS
		// "Linux"      for all versions of Linux
		// "UNIX"       for all other UNIX flavors 
		// "Unknown OS" indicates failure to detect the OS
			
		
		if(OSName == 'Windows') {
			this.text = paper.text(pos_x, pos_y, this.name).attr({'fill':'#ffffff','font-size':10,'font-family':'ＭＳ Ｐゴシック' ,'href':link,'opacity':0});			
		}
		
		if(OSName == 'MacOS') {
			this.text = paper.text(pos_x, pos_y, this.name).attr({'fill':'#ffffff','font-size':20,'font-family':'Hiragino Kaku Gothic Pro W3' ,'href':link,'opacity':0});
		}
		if(OSName == 'Linux') {
			this.text = paper.text(pos_x, pos_y, this.name).attr({'fill':'#ffffff','font-size':10,'font-family':'Kochi Gothic' ,'href':link,'opacity':0});			
		} 
		if (OSName == 'Unknown OS') {
			this.text = paper.text(pos_x, pos_y, this.name).attr({'fill':'#ffffff','font-size':10,'font-family':'MavenProRegular' ,'href':link,'opacity':0});	
		}


	} else {
		this.text = paper.text(pos_x, pos_y, this.name).attr({'fill':'#ffffff','font-size':20,'font-family':'MavenProRegular' ,'href':link,'opacity':0});		
	}

	this.wrapcircle = paper.circle(pos_x, pos_y, radius+movement).attr({'fill':'#ffffff','opacity':0,'href':link });
	var myTag = this;
	
	this.animation = function() {
		
		this.wrapcircle.attr({cy: home_y, cx: home_x});
	
		this.topcircle.animate({cy: home_y-distance, cx: home_x,'opacity':opacity_top}, time, ">", function() {});
		this.lowercircle.animate({cy: home_y+distance, cx: home_x,'opacity':opacity_bottom}, time, ">", function() {});
		
		
		this.text.animate({y: home_y, x: home_x,'opacity':1}, time, ">", function() {});
	}
	
	this.update_animation = function() {
		
		this.wrapcircle.attr({cy: home_y, cx: home_x});
	
		this.topcircle.animate({cy: home_y-distance, cx: home_x,'opacity':opacity_top}, time, "elastic", function() {});
		this.lowercircle.animate({cy: home_y+distance, cx: home_x,'opacity':opacity_bottom}, time, "elastic", function() {});
		
		
		this.text.animate({y: home_y, x: home_x,'opacity':1}, time, "elastic", function() {});
	}
	
	this.explode_animation = function (){
		
		
		this.wrapcircle.attr({cy: pos_y, cx: pos_x});
	
		this.topcircle.animate({cy: pos_y-distance, cx: pos_x,'opacity':0}, 500, ">", function() {});
		this.lowercircle.animate({cy: pos_y+distance, cx: pos_x,'opacity':0}, 500, ">", function() {});
		
		
		this.text.animate({y: pos_y, x: pos_x,'opacity':0}, 500, ">", function() {});	
	}
	
	this.wrapcircle.hover(function (event) {
		//console.log('yes');
	    myTag.run_wobble();
	}, function (event) {
		myTag.stop_wobble();
	});
	
	this.wrapcircle.node.onclick = function () {
		
		var url = myTag.link;

        $.ajax({
            url: url,
            type: 'post',
            data: {url: url, action: 'color'},

            success: function(response) {
				explode();
				
				
				window.setTimeout(function(){change_styles_to_next_page(response);}, 700);
				window.setTimeout(function(){document.location.href=url;}, 1400);
				
            },

            error: function(error) {
	
                window.setTimeout(function(){document.location.href=url;}, 100);
            }
        });
		 if("undefined" != typeof(event) )event.returnValue = false; 
    return false;
	
	};
	
	this.run_wobble = function(){
		run_animation=true;
	    myTag.wobble();
	}
	
	this.stop_wobble = function(){
		run_animation=false;
		myTag.wobbleback();
		//myTag.wobbleback();
	}
	
	
	var test_angle = 0;
	this.wobble = function(){		
		if(run_animation===true){

			var angle=prev_angle+45;
			console.log(angle);
			//var angle = (prev_angle)+(Math.random()*60-30);
			
			//angle = 45+Math.round(prev_angle);
			//test_angle = test_angle%360;
			//prev_angle+=45;
			//console.log(test_angle, (Math.round(movement*Math.cos(test_angle/360*Math.PI))),(Math.round(movement*Math.sin(test_angle/360*Math.PI))), movement);
			
			prev_angle = angle;
			
			var y_move = (movement/2)*Math.cos(angle/360*Math.PI);
			var x_move = (movement/2)*Math.sin(angle/360*Math.PI);
			//console.log(prev_angle,y_move,x_move);
			
			myTag.topcircle.animate({cy: home_y+y_move, cx: home_x+x_move},wobble_speed,'elastic');
			myTag.lowercircle.animate({cy: home_y-y_move-distance, cx: home_x-x_move},wobble_speed,'elastic');
		//	setTimeout(myTag.wobble(),wobble_speed);
			
		} else {
		//	myTag.wobbleback();
		}
		
	
	}
	
	this.update_position = function(){
		canvas_width = ($(window).width()) - (2*padding) - (2*radius);
		blockheight = ($(window).height())-150;
		home_x = ((canvas_width/(amount_of_menu_items-1))*(this.position-1))+radius+padding; //finale Position 
		home_y = blockheight/2;
		myTag.update_animation();
	}
	
	
	this.count_wobble = function(){
		wobble_count++;
		if(wobble_count%2 == 0) {
			myTag.wobble();
		}
	//	//console.log(wobble_count);
	}
	
	this.wobbleback = function(){
		//console.log('stop now');
		myTag.topcircle.stop();
		myTag.lowercircle.stop();
		
		myTag.topcircle.animate({cy: home_y-distance, cx: home_x},wooble_back_speed,'elastic');
		myTag.lowercircle.animate({cy: home_y+distance, cx: home_x},wooble_back_speed,'elastic');
	}
//	callback: function () {…}
	
}

function init_raphael(){
	paper = new Raphael("blocks", bodywidth, blockheight);
	paper.clear();

//	paper.rect(0, 0, bodywidth, bodyheight, 10);

    		$.ajax({
	            type: 'post',
	            data: {action: 'menu'},

	            success: function(response) {
					var object_counter = 0;
					
					$(response).each(function(){
						amount_of_menu_items++;
					})
					//console.log(amount_of_menu_items);
					
					$.each(response, function(){
						start_menu[object_counter] = new tag(((this.title).toLowerCase()), object_counter+1, this.url,increase_brightness(hex2rgbstring(this.color)));
						//console.log(hex2rgbstring(this.color));
						start_menu[object_counter].animation();
						object_counter++;
					})
					
					//start_menu
/*
					menu_1.animation();
					menu_2.animation();
					menu_3.animation();
					menu_4.animation();
					menu_5.animation();*/
	            },

	            error: function(error) {

					//console.log('fail');
	            }
	        });

//var plusalpha = 

 	
}

function update_menu(){
//	$('#blocks').
	$.each(start_menu,function(){
		this.update_position();
	});
	
	paper.setSize(($(window).width()),($(window).height()-150));
}

function explode(){
	for(var i=0;i<start_menu.length;i++){
		start_menu[i].explode_animation();
	}
	
	
}

var OSName="Unknown OS";


$(document).ready(function(){
	if (navigator.appVersion.indexOf("Windows")!=-1) OSName="Windows";
	if (navigator.appVersion.indexOf("Macintosh")!=-1) OSName="MacOS";
	if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
	if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux"
	bodyheight = $(window).height();
	bodywidth = $(window).width();
	blockheight = bodyheight-150;
	window.setTimeout("init_raphael()", 750);
	console.log(OSName);
	
})