// JavaScript Document

$(document).ready(function () {
	
 $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: xmlParser
    });	
	
});	


function xmlParser(xml) {	

var paper = Raphael("paperLayer", 8000, 1080);
	//paper.registerFont("univers");


$(xml).find("bubble").each(function () {
	
var offsetTime = 150* $(this).find("time").text();	
var name = $(this).find("name").text();
var price = $(this).find("price").text();
var owner = $(this).find("owner").text();
var category = $(this).find("cat").text();


var scale = $(this).find("scale").text()/3.2;
var scaleUp = $(this).find("scale").text()*.7;
var xPos = $(this).find("position").text();
var yPos = $(this).find("yPos").text();
var color = $(this).find("color").text();

var pPos = 540+40;
var oPos = pPos+34;

var fadeTime = 700;


var circle =  paper.circle(xPos, yPos, scale).scale(.01,.01).animate({scale:1}, offsetTime);
circle.attr({fill: color, opacity: ".5"});	

var box = paper.rect(0,0,7500, 1080).attr({fill: "#000", opacity: "0"});
	box.hide();
	
var c = circle.clone().attr({r:scale, opacity: .3});
	c.hide();


//var t = paper.text(xPos,540, name+ "\n"+ price + "\n"+ owner).attr({fill:"#fff", "font-size":"32", "text-anchor":"start", "font-family": "Arial"});



//var t = paper.print(690, 450, "print", paper.getFont("univers"),30).attr({fill:"#fff"});


//var t = paper.print(100,100,name+ price+' \n'+ owner, paper.getFont("univers", 400), 30).attr({fill:"#fff"});
//t.hide();	

var  title_txt = paper.print(xPos, 540 , name , paper.getFont("univers", 700), 32).attr({fill:"#fff"});
var  price_txt = paper.print(xPos, pPos , price , paper.getFont("univers", 400), 32).attr({fill:"#fff"});
var  owner_txt = paper.print(xPos, oPos , owner , paper.getFont("univers", 400), 32).attr({fill:"#fff"});



title_txt.hide();
price_txt.hide();
owner_txt.hide();
	
circle.node.onmouseover = function() {
	
	circle.animate({
	"1%": {scale: 1.1},
	"2%": {scale: 1},
	"3%": {scale: 1.1},
	"4%": {scale: 1},
	"5%": {scale: 1.1},
	"6%": {scale: 1},
	"7%": {scale: 1.1},
	"8%": {scale: 1},
	"9%": {scale: 1.1},
	"10%": {scale: 1},
	
	"11%": {scale: 1.1},
	"12%": {scale: 1},
	"13%": {scale: 1.1},
	"14%": {scale: 1},
	"15%": {scale: 1.1},
	"16%": {scale: 1},
	"17%": {scale: 1.1},
	"18%": {scale: 1},
	"19%": {scale: 1.1},
	"20%": {scale: 1},
	
	"21%": {scale: 1.1},
	"22%": {scale: 1},
	"23%": {scale: 1.1},
	"24%": {scale: 1},
	"25%": {scale: 1.1},
	"26%": {scale: 1},
	"27%": {scale: 1.1},
	"28%": {scale: 1},
	"29%": {scale: 1.1},
	"30%": {scale: 1},
	
	"31%": {scale: 1.1},
	"32%": {scale: 1},
	"33%": {scale: 1.1},
	"34%": {scale: 1},
	"35%": {scale: 1.1},
	"36%": {scale: 1},
	"37%": {scale: 1.1},
	"38%": {scale: 1},
	"39%": {scale: 1.1},
	"40%": {scale: 1},
	
	"41%": {scale: 1.1},
	"42%": {scale: 1},
	"43%": {scale: 1.1},
	"44%": {scale: 1},
	"45%": {scale: 1.1},
	"46%": {scale: 1},
	"47%": {scale: 1.1},
	"48%": {scale: 1},
	"49%": {scale: 1.1},
	"50%": {scale: 1},
	
	"51%": {scale: 1.1},
	"52%": {scale: 1},
	"53%": {scale: 1.1},
	"54%": {scale: 1},
	"55%": {scale: 1.1},
	"56%": {scale: 1},
	"57%": {scale: 1.1},
	"58%": {scale: 1},
	"59%": {scale: 1.1},
	"60%": {scale: 1},

	"61%": {scale: 1.1},
	"62%": {scale: 1},
	"63%": {scale: 1.1},
	"64%": {scale: 1},
	"65%": {scale: 1.1},
	"66%": {scale: 1},
	"67%": {scale: 1.1},
	"68%": {scale: 1},
	"69%": {scale: 1.1},
	"70%": {scale: 1},
	
	"71%": {scale: 1.1},
	"72%": {scale: 1},
	"73%": {scale: 1.1},
	"74%": {scale: 1},
	"75%": {scale: 1.1},
	"76%": {scale: 1},
	"77%": {scale: 1.1},
	"78%": {scale: 1},
	"79%": {scale: 1.1},
	"80%": {scale: 1},
	
	"81%": {scale: 1.1},
	"82%": {scale: 1},
	"83%": {scale: 1.1},
	"84%": {scale: 1},
	"85%": {scale: 1.1},
	"86%": {scale: 1},
	"87%": {scale: 1.1},
	"88%": {scale: 1},
	"89%": {scale: 1.1},
	"90%": {scale: 1},
    
	"91%": {scale: 1.1},
	"92%": {scale: 1},
	"93%": {scale: 1.1},
	"94%": {scale: 1},
	"95%": {scale: 1.1},
	"96%": {scale: 1},
	"97%": {scale: 1.1},
	"98%": {scale: 1},
	"99%": {scale: 1.1},
	"100%": {scale: 1},
	
}, 13000, "bounce");



circle.node.onmouseout = function() {
	
	circle.stop();
	circle.animate({scale: 1}, 100);
	
	};
	
	circle.node.onclick = function() {
	
	box.show();
	box.toFront();
	circle.stop();
	
	box.animate({opacity:".8"}, fadeTime);
	$("#chart").fadeTo(fadeTime, 0);
	circle.hide();
	c.toFront();
	c.show();
	c.animate({cy: 540, r:scaleUp,opacity:"1"}, 900, function() {
		title_txt.show();
		price_txt.show();
		owner_txt.show();
		
		title_txt.toFront();
		price_txt.toFront();
		owner_txt.toFront();
		
		
		
	//t.show();
	//t.toFront();
	});
	};	
	
box.node.onclick = function() {
		
	$("#chart").fadeTo(fadeTime, 1);
		
	box.animate({opacity:"0"}, fadeTime, function() {
	//t.hide();
	
	title_txt.hide();
price_txt.hide();
owner_txt.hide();
	
	box.hide();	
	c.animate({cy: yPos, r:scale, opacity:".5"}, 900);
	c.hide();
	circle.show();
		
	
	//alert(paper.canvas.getBBox().y);
	
	});		
	
}

	
};	


	
	})
	
}

$(function() {
	
	$( "#paperLayer" ).draggable({
			containment: "#paperSlide",
			axis:"x"
		
     });
	
	
});

$(document).ready(function () {
$("#chart").click(function(){	
						   
						   $( "#paperLayer" ).animate({left:"200px"})
    });	
	
});