var ua = $.browser;
var alternativeFontsize = false;

if (ua.msie && ua.version == '8.0') {
	alternativeFontsize = true;
}

function createButton(holder, text) {
	
	raphaelInstances[holder] = new Raphael(holder, 300, 300);
	var btnstate = false;
	var $holder = $('#'+holder);
	
	/* remove default links and background from nav */
	$holder.css('background', 'none');
	$holder.find('div').html('');

	var self = this;
	// Taustahärpäke
	var gzm_ps = "M -50,0 C -50,-27.61423 -27.614237,-50 0,-50 L 0,50 C 27.61424,50 50,27.61424 50,0";
	var gzm = raphaelInstances[holder].path(gzm_ps).attr({ stroke: "#fff", "stroke-width": "2", scale: "1.9" }).translate(125, 125);

	// Valintahärpäke
	var arc1_ps = "M -43.30127,25.000002 C -57.108388,1.0853651 -48.914628,-29.494153 -24.999996,-43.301271 -1.0853646,-57.108389 29.494155,-48.914626 43.301273,-24.999999 52.232912,-9.529944 52.232911,9.529947 43.30127,25.000002";
	var arc11 = raphaelInstances[holder].path(arc1_ps).attr({ stroke: "#fff", "stroke-width": "4" }).translate(125, 125);
	var arc12 = raphaelInstances[holder].path(arc1_ps).attr({ stroke: "#fff", "stroke-width": "2" }).translate(125, 125);
	var arc13 = raphaelInstances[holder].path(arc1_ps).attr({ stroke: "#fff", "stroke-width": "1" }).translate(125, 125);

	var arc2_ps = "M -17.101008,46.984623 C -43.049904,37.54 -56.429259,8.847884 -46.984633,-17.101002 -37.540007,-43.049904 -8.8478886,-56.429265 17.101007,-46.984625 43.049903,-37.540002 56.429257,-8.8478867 46.984631,17.100999 41.929695,30.989327 30.989329,41.929688 17.101005,46.984639";
	var arc21 = raphaelInstances[holder].path(arc2_ps).attr({ stroke: "#fff", "stroke-width": "2" }).translate(125, 125);
	var arc22 = raphaelInstances[holder].path(arc2_ps).attr({ stroke: "#fff", "stroke-width": "1" }).translate(125, 125);
	var arc23 = raphaelInstances[holder].path(arc2_ps).attr({ stroke: "#fff", "stroke-width": "1" }).translate(125, 125);		

	// Tekstitausta
	var txtbg_ps = "M 560,220 l 0,-30 -150,0 -30,30 z";
	var txtbg = raphaelInstances[holder].path(txtbg_ps).attr({ fill: "#fff", "fill-opacity": "0.0", "stroke-width": 0 });

	// Viiva 1
	var line1_ps1 = "M 125,125 v 10";
	var line1_ps2 = "M 125,125 v 125";
	var line2_ps1 = "M 118,125 v 10";
	var line2_ps2 = "M 118,125 v 125";
	var l1 = raphaelInstances[holder].path(line1_ps1).attr({ stroke: "#fff", "stroke-width": "2", "stroke-opacity": 0.8 });
	var l2 = raphaelInstances[holder].path(line2_ps1).attr({ stroke: "#fff", "stroke-width": "6", "stroke-opacity": 0.8 });

	// napin taustaväri
	var btnBg = raphaelInstances[holder].circle(125, 125, 80).attr({ fill: "#2f7bc5" });
	
	// napin heijastukset
	var bgImg = raphaelInstances[holder].image('images/2011/kiillot_136x136.png', 50, 50, 154, 154);

	//var bgImgRed = raphaelInstances[holder].image('images/2011/red_glow.png', 47, 47, 150, 150).attr({opacity: 0});

	// napin teksti
	if (alternativeFontsize) {
		var btnText = raphaelInstances[holder].text(125, 125, text).attr({ "fill": '#fff', 'font': 'bold 13px depot-new-condensed,sans-serif', 'font-size': '13px' });;
	} else {
		var btnText = raphaelInstances[holder].text(125, 125, text).attr({ "font-size": "15px", "fill": '#fff', 'font': '15px depot-new-condensed', "font-weight": 'bold', 'font-family': 'depot-new-condensed,sans-serif' });;
	}

	// Nappi
	var btn = raphaelInstances[holder].circle(125, 125, 80).attr({fill: '#2f7bc5', "fill-opacity": "0", stroke: "#fff", "stroke-width": 3 });
	
	// Valot
	var step1a = raphaelInstances[holder].circle(75, 215, 6).attr({ fill: "#fff", "fill-opacity": 0.8, "stroke-width": 0, opacity: 0 });
	var step2a = raphaelInstances[holder].circle(90, 223, 4).attr({ fill: "#fff", "fill-opacity": 0.9, "stroke-width": 0, opacity: 0 });
	var step3a = raphaelInstances[holder].circle(102, 236, 3).attr({ fill: "#fff", "fill-opacity": 1.0, "stroke-width": 0, opacity: 0 });
	var step1b = raphaelInstances[holder].circle(165, 215, 6).attr({ fill: "#fff", "fill-opacity": 0.8, "stroke-width": 0, opacity: 0 });
	var step2b = raphaelInstances[holder].circle(150, 223, 4).attr({ fill: "#fff", "fill-opacity": 0.9, "stroke-width": 0, opacity: 0 });
	var step3b = raphaelInstances[holder].circle(138, 236, 3).attr({ fill: "#fff", "fill-opacity": 1.0, "stroke-width": 0, opacity: 0 });

	// events
	this.buttonClick = function() {
		btnstate = !btnstate;
		if (btnstate)
		{
			$holder.addClass('main_selected');
			btn.stop().animate({ fill: "#ba3d6a", scale: "1" }, 200);
			btnBg.stop().animate({ fill: "#ba3d6a", scale: "1" }, 200);
			bgImg.stop().animate({ scale: "1"}, 200);
			//bgImgRed.stop().animate({ scale: "1" , opacity: 1}, 200);
			gzm.stop().animate({ scale: "1.5", rotation: "180" }, 200);
			
			if (alternativeFontsize) {
				btnText.stop().animate({"font-size": '13px'}, 200);
			
			} else {
				btnText.stop().animate({"font-size": '15'}, 200);
			}

			arc11.animate({ scale: "2.46 2.46 125 125", opacity: "1.0" }, 350, "bounce");
			arc12.animate({ scale: "2.36 2.36 125 125", opacity: "1.0", rotation: "5 125 125" }, 350, "bounce");
			arc13.animate({ scale: "2.3 2.3 125 125", opacity: "1.0" }, 350, "bounce");
			arc21.animate({ scale: "1.8 1.8 125 125", opacity: "1.0", rotation: "-10" }, 300);
			arc22.animate({ scale: "1.75 1.75 125 125", opacity: "1.0", rotation: "10" }, 300);
			arc23.animate({ scale: "1.7 1.7 125 125", opacity: "1.0" }, 300);
			
			setTimeout(function() {
				l1.animate({ path: line1_ps2 }, 100);
				l2.animate({ path: line2_ps2 }, 100);

				step1a.animate({ opacity: 1.0 }, 200); step1b.animate({ opacity: 1.0 }, 200);
				setTimeout(function () {
					step1a.animate({ opacity: 0.0 }, 500); step1b.animate({ opacity: 0.0 }, 500);
				}, 300);
				setTimeout(function () {
					step2a.animate({ opacity: 1.0 }, 200); step2b.animate({ opacity: 1.0 }, 200);
					setTimeout(function () {
						step2a.animate({ opacity: 0.0 }, 500); step2b.animate({ opacity: 0.0 }, 500);
					}, 300);
				}, 150);
				setTimeout(function () {
					step3a.animate({ opacity: 1.0 }, 200); step3b.animate({ opacity: 1.0 }, 200);
					setTimeout(function () {
						step3a.animate({ opacity: 0.0 }, 500); step3b.animate({ opacity: 0.0 }, 500);
					}, 300);
				}, 300);
			}, 300);
		}
		else
		{
			$holder.removeClass('main_selected');
			btn.stop().animate({ fill: "#2f7bc5", scale: "1"}, 200);
			btnBg.stop().animate({ fill: "#2f7bc5", scale: "1"  }, 200);
			bgImg.stop().animate({ scale: "1"}, 200);
			//bgImgRed.stop().animate({ scale: "1" , opacity: 0}, 200);
			gzm.stop().animate({ scale: "1.9", rotation: "0" }, 200);
			
			if (alternativeFontsize) {				
				btnText.stop().animate({"font-size": '13px'}, 200);
			} else {
				btnText.stop().animate({"font-size": '15px'}, 200);
			}

			txtbg.animate({ "fill-opacity": "0.0" }, 100, function() {
			});
			arc11.animate({ scale: "1.0 1.0 125 125" }, 200);
			arc12.animate({ scale: "1.0 1.0 125 125", rotation: "0 125 125" }, 200);
			arc13.animate({ scale: "1.0 1.0 125 125" }, 200);
			arc21.animate({ scale: "2.0", opacity: "0" }, 200);
			arc22.animate({ scale: "2.0", opacity: "0" }, 200);
			arc23.animate({ scale: "2.0", opacity: "0" }, 200);
	
			l1.animate({ path: line1_ps1 }, 100);
			l2.animate({ path: line2_ps1 }, 100);

		}
	}

	if((!navigator.userAgent.match(/iPhone/i)) && (!navigator.userAgent.match(/iP[oa]d/i))) {

		btn.hover(
			function(event) {
				if (!btnstate)
				{
					this.attr({'cursor': 'pointer'});
					this.stop().animate({ scale: "1.1" }, 500, "elastic");
					btnBg.stop().animate({scale: "1.14"}, 500, "elastic");
					bgImg.stop().animate({scale: "1.1"}, 500, "elastic");
					
					gzm.stop().animate({ scale: "2.1" }, 300, "backOut").animate({ rotation: "180" }, 600, "bounce");
					gzm.stop().animate({ rotation: "180" }, 600, "bounce");
					
					this.stop().animate({ scale: "1.15" }, 500, "elastic");
					gzm.stop().animate({ scale: "2.22" }, 300, "backOut").animate({ rotation: "180" }, 600, "bounce");

					if (alternativeFontsize) {				
						btnText.stop().animate({"font-size": '15px'}, 200);
					} else {
						btnText.stop().animate({"font-size": '17px'}, 200);
					}

				}
			},
			function(event) {
				if (!btnstate)
				{
					this.attr({'cursor': 'default'});
					this.stop().animate({ scale: "1" }, 200);
					btnBg.stop().animate({ scale: "1" }, 200);
					bgImg.stop().animate({scale: "1"}, 200);

					if (alternativeFontsize) {				
						btnText.stop().animate({"font-size": '13px'}, 200);
					} else {
						btnText.stop().animate({"font-size": '15px'}, 200);
					}
					
					gzm.stop().animate({ scale: "1.9", rotation: "0" }, 200);
					
					gzm.stop().animate({ scale: "1.9", rotation: "0" }, 200);

				}
			}
		);
	}
	
	return this;
}