
        // Get the modal
        var modal = document.getElementById("myModal");
        var offer_input = document.getElementById("formtitle_offer_text");
        var window_width = window.innerWidth;
        var window_height = window.innerHeight;
        
/*        if(window_width >1200)
            {
                var spin_width = window_width/2;
            }*/
        if(window_width <=550)
            {
                var spin_width = 360;
            }
        else if(window_width <=767)
            {
                var spin_width = window_width;
            }
        else if(window_width <=900)
            {
                var spin_width = window_width/1.2;
            }
        else
            var spin_width = 600;
        
        var padding = {top:20, right:40, bottom:0, left:0},
            w = spin_width - padding.left - padding.right,
            h = spin_width - padding.top  - padding.bottom,
            r = Math.min(w, h)/2,
            rotation = 0,
            oldrotation = 0,
            picked = 100000,
            oldpick = [],
            color = d3.scale.category20();//category20c()
            //randomNumbers = getRandomNumbers();
        //http://osric.com/bingo-card-generator/?title=HTML+and+CSS+BINGO!&words=padding%2Cfont-family%2Ccolor%2Cfont-weight%2Cfont-size%2Cbackground-color%2Cnesting%2Cbottom%2Csans-serif%2Cperiod%2Cpound+sign%2C%EF%B9%A4body%EF%B9%A5%2C%EF%B9%A4ul%EF%B9%A5%2C%EF%B9%A4h1%EF%B9%A5%2Cmargin%2C%3C++%3E%2C{+}%2C%EF%B9%A4p%EF%B9%A5%2C%EF%B9%A4!DOCTYPE+html%EF%B9%A5%2C%EF%B9%A4head%EF%B9%A5%2Ccolon%2C%EF%B9%A4style%EF%B9%A5%2C.html%2CHTML%2CCSS%2CJavaScript%2Cborder&freespace=true&freespaceValue=Web+Design+Master&freespaceRandom=false&width=5&height=5&number=35#results
        var data = [
                    {"label1":"Additional Exchange ", "label2":"bonus of Rs 1,50,000 ",  "label3":"against new car", "value":1,  "question":"Additional Exchange bonus of Rs 1,50,000 against new car"},
                    {"label1":"Accessories worth ", "label2":"Rs 50,000 on ",  "label3":"new car purchase",  "value":1,  "question":"Accessories worth Rs 50,000 on new car purchase"},
                    {"label1":"Rs 5000 voucher on ", "label2":"Nano coating ",  "label3":"(Validity 1 month)", "value":1,  "question":"Rs 5000 voucher on Nano coating (Validity 1 month)"},
                    {"label1":"20% discount ", "label2":"on Value ",  "label3":"Added Services", "value":1,  "question":"20% discount on Value Added Services"},
                    {"label1":"25% discount ", "label2":"on MB boutique ",  "label3":"& collenctions",  "value":1,  "question":"25% discount on MB boutique & collenctions"},
                    {"label1":"10% discount ", "label2":"on tyre purchase ",  "label3":"(set of four)",  "value":1,  "question":"10% discount on tyre purchase (set of four)"}
        ];
     

        var svg = d3.select('#chart')
            .append("svg")
            .data([data])
            .attr("width",  w + padding.left + padding.right)
            .attr("height", h + padding.top + padding.bottom);
        var container = svg.append("g")
            .attr("class", "chartholder")
            .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
        var vis = container
            .append("g");

        var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
        // declare an arc generator function
        var arc = d3.svg.arc().outerRadius(r);
        // select paths, use arc generator to draw
        var arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("g")
            .attr("class", "slice");

        arcs.append("path")
            .attr("fill", function(d, i){ return color(i); })
            .attr("d", function (d) { return arc(d); });
        // add the text
        arcs.append("text").attr("transform", function(d){
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle)/2;
                return "rotate(" + ((d.angle * 180 / Math.PI - 90)-10) + ")translate(" + (d.outerRadius -20) +")";
            })
            .attr("text-anchor", "end")
            .attr("class", "txt_wheel")
            .append("tspan")
            .text( function(d, i) {
            return data[i].label1;
            });
            
        arcs.append("text").attr("transform", function(d){
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle)/2;
                return "rotate(" + ((d.angle * 180 / Math.PI - 90)) + ")translate(" + (d.outerRadius -20) +")";
            })
            .append("tspan")
            .attr("class", "txt_wheel")
            .attr("text-anchor", "end")
            .text( function(d, i) {
            return data[i].label2;
            });
            
        arcs.append("text").attr("transform", function(d){
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle)/2;
                return "rotate(" + ((d.angle * 180 / Math.PI - 90)+10) + ")translate(" + (d.outerRadius -20) +")";
            })
            .append("tspan")
            .attr("class", "txt_wheel")
            .attr("text-anchor", "end")
            .text( function(d, i) {
            return data[i].label3;
            });
            

            
        container.on("click", spin);
        function spin(d){

            container.on("click", null);
            //all slices have been seen, all done
            console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
            if(oldpick.length == data.length){
                console.log("done");
                container.on("click", null);
                return;
            }
            var  ps       = 360/data.length,
                 pieslice = Math.round(1440/data.length),
                 rng      = Math.floor((Math.random() * 1440) + 360);

            rotation = (Math.round(rng / ps) * ps);

            picked = Math.round(data.length - (rotation % 360)/ps);
            picked = picked >= data.length ? (picked % data.length) : picked;
            if(oldpick.indexOf(picked) !== -1){
                d3.select(this).call(spin);
                return;
            } else {
                oldpick.push(picked);
            }
            rotation += 90 - Math.round(ps/2);
            vis.transition()
                .duration(9000)
                .attrTween("transform", rotTween)
                .each("end", function(){
                    //mark question as seen
                    d3.select(".slice:nth-child(" + (picked + 1) + ") path")
                        .attr("fill", "#111");
                    
                    //populate question
                    if(window_width <=992)
                    {
                        d3.select(".congrats").style("position","absolute");
                        d3.select(".congrats").style("background","#0000008a");
                    }
                    d3.select("#question h3").text(data[picked].question);
                    var offer_won = data[picked].question;
                    if (offer_won == "Better Luck Next Time")
                    {
                        d3.select("#question h1").text("Sorry!");
                    }
                    else
                    {
                        d3.select("#question h1").text("Congratulations!");
                        d3.select("#question h2").text("You've just won");
                        animateText();
                        animateBlobs();
                    }
                    
                    window.setTimeout(function() {
                        
                        d3.select("#offer_section h3").text(data[picked].question);
                        offer_input.value = data[picked].question;
                        console.log(offer_input.value);
                        modal.style.display = "block";
                       
                    }, 7000);
                    
                    
                    oldrotation = rotation;
                    $(".chartholder").addClass("disabled_wheel");
                  //  container.on("click", spin);
                });
        }
        //make arrow
        svg.append("g")
            .attr("transform", "translate(" + (w + padding.left + 10) + "," + ((h/2)+padding.top) + ")")
            .append("path")
            .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
            .style({"fill":"#33a3dc"});
        //draw spin circle
        if(window_width >1200)
            {
                var innercircle_radius = r/3;
                var image_height = r/2;
            }
        else
            {
                var innercircle_radius = r/7;
                var image_height = r/5;
            }
        container.append("circle")
            .attr("cx", 0)
            .attr("cy", 0)
            //.attr("r", innercircle_radius)
            .attr("r", 0)
            .style({"fill":"black","cursor":"pointer"});
        //spin text
/*        container.append("text")
            .attr("x", 0)
            .attr("y", 15)
            .attr("text-anchor", "middle")
            .text("SPIN")
            .style({"font-weight":"bold", "font-size":"30px"});*/
        var coordinates = -innercircle_radius/1.4;
        container.append("image")
            .attr("x", coordinates)
            .attr("y", coordinates)
            //.attr("text-anchor", "middle")
            .attr("height", image_height)
            .attr("width", image_height)
            //.attr("xlink:href", "src/img/logo_wishbox.png");


        function rotTween(to) {
          var i = d3.interpolate(oldrotation % 360, rotation);
          return function(t) {
            return "rotate(" + i(t) + ")";
          };
        }


        function getRandomNumbers(){
            var array = new Uint16Array(1000);
            var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);
            if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
                window.crypto.getRandomValues(array);
                console.log("works");
            } else {
                //no support for crypto, get crappy random numbers
                for(var i=0; i < 1000; i++){
                    array[i] = Math.floor(Math.random() * 100000) + 1;
                }
            }
            return array;
        }
        
        console.log(window_width);
        console.log(window_height);
        console.log(spin_width);
        console.log(r);
        
        
        // Fuction for congratulations animation


function reset() {
	$.each($('.blob'), function(i) {
		TweenMax.set($(this), { x: 0, y: 0, opacity: 1 });
	});
	
	TweenMax.set($('h1'), { scale: 1, opacity: 1, rotation: 0 });
}

function animateText() {
		TweenMax.from($('h1'), 0.8, {
		scale: 0.4,
		opacity: 0,
		rotation: 15,
		ease: Back.easeOut.config(4),
	});
}
	
function animateBlobs() {
    
	var numberOfStars = 200;
	
	for (var i = 0; i < numberOfStars; i++) {
	  $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
	}	
	
	var xSeed = _.random(350, 380);
	var ySeed = _.random(120, 170);
	
	$.each($('.blob'), function(i) {
		var $blob = $(this);
		var speed = _.random(1, 5);
		var rotation = _.random(5, 100);
		var scale = _.random(0.8, 1.5);
		var x = _.random(-xSeed, xSeed);
		var y = _.random(-ySeed, ySeed);

		TweenMax.to($blob, speed, {
			x: x,
			y: y,
			ease: Power1.easeOut,
			opacity: 0,
			rotation: rotation,
			scale: scale,
			onStartParams: [$blob],
			onStart: function($element) {
				$element.css('display', 'block');
			},
			onCompleteParams: [$blob],
			onComplete: function($element) {
				$element.css('display', 'none');
			}
		});
	});
}
        
        
        
        