Revision as of 20:11, 9 August 2017

/* Any JavaScript here will be loaded for all users on every page load. */

$('.clickable').bind('click', function (ev) {
    var svg = document.getElementById("svgBritain");
    var $div = $(ev.target);
    var $display = $div.find('.display');
    var pt = svg.createSVGPoint();
    
    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;
    var marker = document.getElementById('marker')

    var cursorpt =  pt.matrixTransform(svg.getScreenCTM());   

/*     alert(svg.getAttribute('x'));*/

    marker.setAttribute('cx', cursorpt.x + 'px');
    marker.setAttribute('cy', cursorpt.y + 'px');

});

//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. 
var context=document.getElementById("canvas"); 
var image=document.getElementsByClassName('picture')[0];
var canvasWidth=context.width;
var canvasHeight= context.height;
var imageWidth=image.width;
var imageHeight= image.height;
var fogCount=10;
var fog=new Image();
var picture=new Image();
var fogs=[];
var FPS=20;
var maxVel=1;

fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png";
picture.id = "pic";
picture.src=image.src;

function fogPart(){
	this.x=0;
	this.y=0;
	this.xVel=0;
	this.yVel=0;
	this.radius=5;
	this.draw=function(){
		context.drawImage(this.image,this.x-100,this.y-100);

	};
	this.update=function(){

		this.x += this.xVel;
        this.y += this.yVel;


        if (this.x >= canvasWidth) {
            this.xVel = -this.xVel;
            this.x = canvasWidth;
        }
   
        else if (this.x <= 0) {
            this.xVel = -this.xVel;
            this.x = 0;
        }


        if (this.y >= canvasHeight) {
            this.yVel = -this.yVel;
            this.y = canvasHeight;
        }
        
      
        else if (this.y <= 0) {
            this.yVel = -this.yVel;
            this.y = 0;
        }
	};

	this.setImage=function(img){
	this.image=img;
	};
	 this.setPos = function(x, y) {
        this.x = x;
        this.y = y;
    };

 
    this.setVel = function(x, y) {
        this.xVel = x;
        this.yVel = y;
    };


};

function random(min, max){
    return Math.random() * (max - min) + min;
}
function init() {
    if (canvas.getContext) {
        context = canvas.getContext('2d');
        for(var i=0; i < fogCount; i++){
            var fog = new fogPart();

            fog.setPos(random(0, canvasWidth), random(0, canvasHeight));
     
            fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel));
            fogs.push(fog);            
        }
    }
    else {
        alert("UN-supported browser");
    }
};

fog.onload=function(){

	fogs.forEach(function(part){
		part.setImage(fog);
	});

};

function draw(){

    context.drawImage(
picture, 
(canvasWidth / 2) - image.width / 2,
(canvasHeight / 2)- image.height / 2,
canvasWidth ,
canvasWidth * image.naturalHeight / image.naturalWidth
); 
    context.globalAlpha = 0.09;
    fogs.forEach(function(part) {
        part.draw();
    });

};
function update(){
fogs.forEach(function(part){
	part.update();
});

};

init();
if (context) {
    setInterval(function() {
        update();draw();
    }, 1000 / FPS);
}