JavaScript - Embedding Problem Swfobject

Hi i just switched over from 1.5 to 2.2 swfobject.

in my admin area only the first video is showing on the page, but on the user side they all show up just fine, same code.. strange.

but anyway i was reading this..

http://groups.google.com/group/swfob...1e29c96933dfa0

and it confused me alittle because i have no idea how many vids are going to be display, i have them displaying from a loop.

i guess what the article is saying is that you have to call javascript for every one your going to display and use a dif label name for it.

but as i said i have no clue, am i suppose to list that 100 times on the page in case i have 100 videos...

javascript is really not my cup of tea lol...


here is my code..

in the head i have this ...

Code:

     <!-- added for swfobject 2.2 -->
         <script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("player", "9.0.0");
		</script

and then in the body i have this.. and like i said there might be 100 vids but it only shows the first one.


Code:

begin the loop then do this 

<div style="float:left;">

<table border="0" align="left"><tr>

 <td align="center"><td align="center"><?=$sql_array->vid_name?><br />


                           
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="175" height="175" id="player" name="player" align="middle">
		<param name="movie" value="player.swf" />
                          <param name="play" value="false" />
		<param name="quality" value="high" />
		<param name="allowfullscreen" value="true" />
		<param name="allowscriptaccess" value="always" />
		<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
		<!--[if !IE]>-->
		<object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle">
                           <param name="play" value="false" />
		 <param name="quality" value="high" />
		 <param name="allowfullscreen" value="true" />
		 <param name="allowscriptaccess" value="always" />
		 <param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
		<!--<![endif]-->
		<a href="http://www.adobe.com/go/getflashplayer">
	             <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />	</a>
			<!--[if !IE]>-->
		</object>
	<!--<![endif]-->
		</object>
             					
</td></tr></table>
   </div>


loop again till done...

so what do i do to show multiples on a page.

Hi there - im new to website making . i have made my own site in adobe flash cs 4 /photoshop and now im trying to optimize with swo (swiftobject) using adobeair. I must say that im following Lydia.com tuts on video. Anyway when i try to generate and embed using adobe air, the guy on the video that im following he is setting the dimensions to 100 %. My web site is 850x600 pix centeret on the screen with grey background before i started the swo thing. I also choose to set the dimensions to 100% because he says so and when i do that and preview in the browser the site gets really , really big - what am i doing wrong? thanks in advance. jeppe

Hi there,

does anoyne know how to embed a RSS feed into a webpage? The code I was using before is now no longer supported

Thanks

Joe

Hi - I am using the tinyslideshow and need to be able to embed a wmv file into it. It needs to open within the slideshow as the thumbnail loads and when clicked just as the image does. I have not been able to figure this out or know if it is possible and any help would be greatly appreciated! Thanks so much.

Hi i have done some reading on the net today because i am getting an error on ie. I did find the javascript twice in my code, once in the header and once here, so i removed it from the header. I also changed to src to the full url.

But i am still getting this and i dont know why. the file is located in the root directory.

Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SearchToolbar 1.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ENUS)
Timestamp: Sat, 30 Jul 2011 16:03:05 UTC


Message: 'null' is null or not an object
Line: 8
Char: 3894
Code: 0
URI: http://www.mysite.com/swfobject.js

Code:

<script type='text/javascript' src='$CONST_LINK_ROOT/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>
<embed src='$CONST_LINK_ROOT/flvplayer.swf?file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv&autoStart=false' width='175' height='175' quality='high' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed>

would appreciate any suggestions thanks.


i was on 1.5 swfobject i did download 2.2 and im guessing all you do is replace the swfobject.js file to upgrade it, but what happened is it gives me this now.

Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SearchToolbar 1.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ENUS)
Timestamp: Sat, 30 Jul 2011 16:31:08 UTC


Message: 'SWFObject' is undefined
Line: 1283
Char: 1
Code: 0
URI: http://www.mysite/video_admin.php?type=v

i dont mind going back to the old version i just need to get this working and im soooooooo lost lol


ok another update, this is becomming maddening lol. once i have this line in the header php

Code:

<script type='text/javascript' src='$CONST_LINK_ROOT/swfobject.js'></script>

I never have to use it again as long as they header php is included correct?


This is what is driving me nuts, im back on 1.5 and it says its undefined


Code:

but am in not defining it on this line? ---> var s1 = new SWFObject('player.swf','player','400','300','9');


<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>

Another Update. I am back to the original question. null is null or not an object.. in my search i have found this

found a solution. basically Internet Explorer is crappy and doesnt like the setAttribute property so had to change the onchange handler by directly changing the attrbute for the object like so.
object.onchange = function() {}

i have no idea what they means, does that mean i need to change swfobject.js or does that mean i have to change my xml request. and if it is the swfobject i have no clue what they mean or what lines

i'm newb to java, but need to get my quicktime movie embeds working on windows/explorer. apparently i need to call external java script to make it work: http://developer.apple.com/internet/ieembedprep.html

here is my HEAD code: <script src="kitchslideembed.js" language="JavaScript" type="text/javascript"></script>

and BODY code: <script language="JavaScript"type="text/javascript">InsertKitchSlideMovie();</script>

and my "kitchslideembed.js" file...
function InsertKitchSlideMovie()
{
document.write('<object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="768" height="591" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>\n');
document.write('<param name='src' value="http://jamesgivensdesign.com/public_html/notes/kitchenslide1.mov">\n');
document.write('<param name='autoplay' value="false">\n');
document.write('<param name='controller' value="true">\n');
document.write('<param name='loop' value="false">\n');
document.write('<embed src="kitchenslide1.mov" width="768" height="591" autoplay="false" controller="true" loop="false" pluginspage='http://www.apple.com/quicktime/download/'>\n');
document.write('</embed>\n');
document.write('</object>\n');
}
any help out there?

For a project in my high school web design class, I need to integrate an Excel spreadsheet as data so to speak for a web page. I want to pull the prices from the sheet, and make them appear on the page. I'd like to pull it from the sheet so that the client can still adjust and edit the prices without having to reach the actual webpage. Conceptually, I thought this would be fairly straight forward, but in researching how to do this, I got very confused. I'm not even positive that I'm putting this in the right section.

So my main question is this:
Is there a way to integrate an Excel spreadsheet in such a way that it can provide data for certain fields of a webpage? If so, can someone please explain how?

Thanks,
A Confused High School Girl

Hello,

This question is not really about js per se, but more having to do with w3c specifications. I did not see a more appropriate place to post it. I wish there were such a thing as a w3c forum.

I have a large number of QT movies in an archive that I have been displaying using the ol' object/embed tag method. In an attempt to bring the pages up to w3 standards, which does not allow embed tags, I have considered this recommendation from Apple for embedding QT videos:

http://developer.apple.com/internet/ieembedprep.html

Great, now the pages validate. However, when viewing the generated source written by the js, what do I find? Exactly the same code I used that would not validate - object tags with an embed tag in the container.

My question may be somewhat philosophical : Is this just merely a way of "tricking" the w3 validator? I mean, if the effective code that the browser sees is the same, why not just put it in there with HTML in the first place, other than to be able to put the w3 'validates!' icon at the bottom of the page?

You see what I am getting at?

see below

Hi pals,
I am really tired in this problem of event keyup. I given same in my keyup function like:

$(document).ready(function () {
alert("GGG"+parseInt(jQuery.browser.version)); //To display test value working
$("#find_text").keyup(function(e)
{
if(e.which == 13) {
alert('Enter key was pressed'); //enter Here
alert("FFF"+parseInt(jQuery.browser.version)); //Here got Error
}
});
});

I got Error : jQuery is not defined
alert("FFF"+parseInt(jQuery.browser.version));

I use keycode,which , but no help, It's Work nicely in Chrome Browser but not in FF.
Please give a Solution reply ASAP, I am really Tired.The code enter the Condition
But that jQuery part make error.

Thankfully
Anes P.A

this is coder javascript :
textneu = textneu.replace(/haha/,"<img src='../images/21.gif'>");

Result:
&lt;img src='../images/21.gif'&gt;

why?

i want result is :
<img src='../images/21.gif'>

Hi,

so I thought I could mash two bits of code together like this:

Code:

<div><label for="or">From:</label>
<select name="or" style="width:200px; float: right" id="or" onchange="populate(this)">
  <option value="Choose">Select your starting point</option>
  <option value="Guatemala">Guatemala City</option>
  <option value="Xela">Quetzaltenango</option>
  <option value="Antigua">Antigua</option>
  <option value="Rio Dulce">Rio Dulce</option>
  <option value="Coban">Coban</option>
</select></div>
<div>
<label for="de">To:</label>
<select name="de" style="width:200px; float: right" id="de"></select>
</div>
<div>
<br>
<input type="button" onclick="searchLocations()" value="Show route" />
</div>
			</div> 
			</div>
        </div>
	


<script type="text/javascript">
    if (GBrowserIsCompatible()) {
		var gpolylines = [];

function populate(o) {
  d=document.getElementById('de');
  if(!d){return;}                 
  var mitems=new Array();
  mitems['Choose']=[''];
  mitems['Guatemala']=['Select Destination','Antigua','El Rancho junction','San Pedro La Laguna','Panajachel','Coban','Rio Hondo','Chiquimula','Esquipulas','Copan Ruinas (Honduras)','La Ruidosa junction','Rio Dulce','Flores (via Rio Dulce)','Puerto Barrios','Flores (via Coban)','Quetzaltenango'];
  mitems['Xela']=['Select Destination','Guatemala City','Antigua','Chichicastenango','Huehuetenango','Panajachel','San Pedro La Laguna'];
  mitems['Antigua']=['Select Destination','Guatemala City','Quetzaltenango','Escuintla','Monterrico','San Pedro la Laguna','Panajachel','Chichicastenango'];
  mitems['Rio Dulce']=['Select Destination','Guatemala City','Flores','Lanquin','Coban','Puerto Barrios'];
  mitems['Coban']=['Select Destination','Lanquin','Rio Dulce','Laguna Lachua NP','Flores'];
  d.options.length=0;
  cur=mitems[o.options[o.selectedIndex].value];
  if(!cur){return;}
  d.options.length=cur.length;
  for(var i=0;i<cur.length;i++) {
    d.options[i].text=cur[i];
    d.options[i].value=cur[i];
  }
}

 
 function searchLocations() 
{
    var found = false;
    var from = document.getElementById('or').value;
	var to = document.getElementById('de').value;
    for (var a = 0; a < gpolylines.length; a++) 
    {
        if (gpolylines[a].myname.toLowerCase() == to.toLowerCase() && gpolylines[a].mycategory.toLowerCase() == from.toLowerCase()) 
        {
            found = true;
            gpolylines[a].show();
        }
    }
    if ( ! found ) alert("No matches found. Please check your spelling or refine your search.");
}

the first bit, which populates the select boxes works fine, as you can see here

but the second bit (the searchLocations function) is giving me a bit more trouble. What it's supposed to be doing is saying that if there's a polyline whose category xml attribute matches the text from the 1st select box AND whose name attribute matches the 2nd select box, it should be shown.

The methods have worked in the past, there are no errors reported - the only problem is I get the alert regardless of which option I am selecting.

I suspect that the problem is in the if (gpolylines[a].myname.toLowerCase() == to.toLowerCase() && gpolylines[a].mycategory.toLowerCase() == from.toLowerCase()) line, as it's the only one that I really came up with on my own... or can I not get the "or" and "de" elements in that way? Or is it something else entirely?

thanks in advance for any suggestions...

Hi, i can't get my new logo to work in IE, it's working fine in Chrome and FireFox, it must be a JavaScript problem.

here it is:
http://danishwebart.com/logo/logo.php

And the JavaScrip:

$(function() {
var canvas = $("#c");
var canvasHeight;
var canvasWidth;
var ctx;
var dt = 0.1;

var pointCollection;

function init() {
updateCanvasDimensions();

var g = [new Point(27, 34, 0.0, 1, "#ed9d33"), new Point(26, 38, 0.0, 1, "#d44d61"), new Point(25, 41, 0.0, 1, "#4f7af2"), new Point(22, 44, 0.0, 1, "#ef9a1e"), new Point(18, 46, 0.0, 2, "#4976f3"), new Point(12, 44, 0.0, 2.5, "#269230"), new Point(7, 41, 0.0, 2, "#1f9e2c"), new Point(5, 37, 0.0, 1, "#36b641"), new Point(4, 33, 0.0, 1, "#2e5def"), new Point(4, 29, 0.0, 1, "#d53747"), new Point(5, 25, 0.0, 1, "#eb676f"), new Point(6, 22, 0.0, 1, "#f9b125"), new Point(8, 19, 0.0, 1, "#de3646"), new Point(11, 16, 0.0, 1, "#5f8af8"), new Point(13, 14, 0.0, 1, "#efa11e"), new Point(16, 12, 0.0, 1, "#2e55e2"), new Point(19, 10, 0.0, 1, "#4167e4"), new Point(23, 8, 0.0, 1.5, "#4869e3"), new Point(28, 6, 0.0, 2, "#10a11d"), new Point(33, 5, 0.0, 2, "#cf4055"), new Point(38, 5, 0.0, 2, "#cd4359"), new Point(44, 6, 0.0, 3, "#ca273c"), new Point(51, 8, 0.0, 3, "#2650e1"), new Point(57, 11, 0.0, 3, "#4a7bf9"), new Point(63, 16, 0.0, 3.5, "#f47875"), new Point(68, 23, 0.0, 4, "#f36764"), new Point(71, 31, 0.0, 3.5, "#1d4eeb"), new Point(72, 38, 0.0, 3, "#698bf1"), new Point(72, 44, 0.0, 2.5, "#fac652"), new Point(72, 49, 0.0, 2, "#ee5257"), new Point(71, 54, 0.0, 2, "#5681f5"), new Point(70, 59, 0.0, 2, "#f8c247"), new Point(68, 64, 0.0, 2, "#4577f6"), new Point(65, 68, 0.0, 2, "#f7b326"), new Point(62, 72, 0.0, 2, "#facb5e"), new Point(59, 75, 0.0, 2, "#e02e3d"), new Point(55, 77, 0.0, 2, "#f16d6f"), new Point(53, 78, 0.0, 2.5, "#507bf2"), new Point(47, 79, 0.0, 3, "#5683f7"), new Point(40, 77, 0.0, 3.5, "#3158e2"), new Point(33, 74, 0.0, 3.5, "#f0696c"), new Point(27, 73, 0.0, 2.5, "#3769f6"), new Point(22, 73, 0.0, 2, "#6084ef"), new Point(19, 76, 0.0, 1.5, "#2a5cf4"), new Point(17, 79, 0.0, 1, "#f4716e"), new Point(25, 70, 0.0, 2, "#f8c247"), new Point(29, 67, 0.0, 2, "#ec4147"), new Point(33, 64, 0.0, 2, "#4876f1"), new Point(36, 59, 0.0, 2.5, "#2552ea"), new Point(38, 53, 0.0, 3, "#4779f7"), new Point(38, 46, 0.0, 3.5, "#4b78f1"), new Point(38, 38, 0.0, 3.5, "#4b78f1"), new Point(37, 31, 0.0, 2.5, "#4b78f1"), new Point(38, 25, 0.0, 2, "#4b78f1"), new Point(40, 20, 0.0, 2, "#4b78f1"), new Point(42, 16, 0.0, 1.5, "#4b78f1"), new Point(45, 14, 0.0, 1, "#4b78f1"), new Point(48, 12, 0.0, 1, "#4b78f1"),




new Point(59, 82, 0.0, 1, "#ed9d33"), new Point(62, 80, 0.0, 1.5, "#d44d61"), new Point(66, 77, 0.0, 2, "#4f7af2"), new Point(70, 73, 0.0, 2, "#4976f3"), new Point(73, 69, 0.0, 2, "#269230"), new Point(76, 65, 0.0, 2, "#1f9e2c"), new Point(79, 60, 0.0, 2, "#36b641"), new Point(80, 55, 0.0, 1.5, "#2e5def"),

new Point(81, 65, 0.0, 2.5, "#eb676f"), new Point(83, 71, 0.0, 3, "#f9b125"), new Point(84, 77, 0.0, 2.5, "#de3646"), new Point(82, 82, 0.0, 2, "#de3646"),

new Point(88, 74, 0.0, 1.5, "#efa11e"), new Point(90, 70, 0.0, 1.5, "#2e55e2"), new Point(92, 66, 0.0, 1.5, "#4869e3"), new Point(93, 62, 0.0, 1.5, "#4869e3"),

new Point(95, 53, 0.0, 1, "#10a11d"), new Point(95, 57, 0.0, 2, "#cf4055"), new Point(97, 62, 0.0, 2.5, "#cd4359"), new Point(100, 68, 0.0, 3, "#ca273c"), new Point(102, 74, 0.0, 2.5, "#2650e1"), new Point(101, 80, 0.0, 2, "#4a7bf9"),

new Point(105, 78, 0.0, 1, "#f36764"), new Point(107, 75, 0.0, 1, "#1d4eeb"), new Point(109, 72, 0.0, 1, "#698bf1"), new Point(110, 69, 0.0, 1, "#fac652"), new Point(111, 66, 0.0, 1, "#ee5257"), new Point(112, 63, 0.0, 1, "#5681f5"), new Point(112, 60, 0.0, 1.5, "#f8c247"), new Point(112, 56, 0.0, 1.5, "#4577f6"), new Point(110, 52, 0.0, 2, "#f7b326"), new Point(107, 48, 0.0, 2.5, "#facb5e"), new Point(102, 45, 0.0, 2.5, "#e02e3d"), new Point(97, 43, 0.0, 2, "#f16d6f"),




new Point(110, 83, 0.0, 1, "#507bf2"), new Point(112, 80, 0.0, 1, "#5683f7"), new Point(114, 77, 0.0, 1.5, "#3158e2"), new Point(116, 73, 0.0, 1.5, "#f0696c"), new Point(118, 69, 0.0, 1.5, "#3769f6"), new Point(119, 65, 0.0, 1.5, "#6084ef"), new Point(119, 61, 0.0, 1.5, "#2a5cf4"), new Point(119, 57, 0.0, 1.5, "#f4716e"), new Point(118, 53, 0.0, 1.5, "#f8c247"), new Point(116, 50, 0.0, 1, "#ec4147"),

new Point(120, 51, 0.0, 1, "#4876f1"), new Point(123, 53, 0.0, 1, "#2552ea"), new Point(126, 55, 0.0, 1, "#4779f7"), new Point(129, 58, 0.0, 1.5, "#4b78f1"), new Point(132, 61, 0.0, 1.5, "#4b78f1"), new Point(135, 65, 0.0, 1.5, "#4b78f1"), new Point(138, 69, 0.0, 1.5, "#4b78f1"), new Point(140, 73, 0.0, 2, "#4b78f1"), new Point(142, 78, 0.0, 2, "#4b78f1"), new Point(143, 83, 0.0, 2, "#4b78f1"),

new Point(121, 70, 0.0, 1, "#4b78f1"), new Point(124, 71, 0.0, 1, "#4b78f1"), new Point(127, 71, 0.0, 1, "#4b78f1"), new Point(130, 71, 0.0, 1.5, "#4b78f1"), new Point(134, 70, 0.0, 1.5, "#4b78f1"), new Point(142, 68, 0.0, 1.5, "#4b78f1"), new Point(146, 68, 0.0, 1, "#4b78f1"), new Point(149, 69, 0.0, 1, "#4b78f1")];

gLength = g.length;
for (var i = 0; i < gLength; i++) {
g[i].curPos.x = (canvasWidth/2 - 0) + g[i].curPos.x;
g[i].curPos.y = (canvasHeight/2 - 0) + g[i].curPos.y;

g[i].originalPos.x = (canvasWidth/2 - 0) + g[i].originalPos.x;
g[i].originalPos.y = (canvasHeight/2 - 0) + g[i].originalPos.y;
};

pointCollection = new PointCollection();
pointCollection.points = g;

initEventListeners();
timeout();
};

function initEventListeners() {
$(window).bind('resize', updateCanvasDimensions).bind('mousemove', onMove);

canvas.get(0).ontouchmove = function(e) {
e.preventDefault();
onTouchMove(e);
};

canvas.get(0).ontouchstart = function(e) {
e.preventDefault();
};
};

function updateCanvasDimensions() {
canvas.attr({height: $(window).height(), width: $(window).width()});
canvasWidth = canvas.width();
canvasHeight = canvas.height();

draw();
};

function onMove(e) {
if (pointCollection)
pointCollection.mousePos.set(e.pageX, e.pageY);
};

function onTouchMove(e) {
if (pointCollection)
pointCollection.mousePos.set(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
};

function timeout() {
draw();
update();

setTimeout(function() { timeout() }, 30);
};

function draw() {
var tmpCanvas = canvas.get(0);

if (tmpCanvas.getContext == null) {
return;
};

ctx = tmpCanvas.getContext('2d');
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

if (pointCollection)
pointCollection.draw();
};

function update() {
if (pointCollection)
pointCollection.update();
};

function Vector(x, y, z) {
this.x = x;
this.y = y;
this.z = z;

this.addX = function(x) {
this.x += x;
};

this.addY = function(y) {
this.y += y;
};

this.addZ = function(z) {
this.z += z;
};

this.set = function(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
};
};

function PointCollection() {
this.mousePos = new Vector(0, 0);
this.points = new Array();

this.newPoint = function(x, y, z) {
var point = new Point(x, y, z);
this.points.push(point);
return point;
};

this.update = function() {
var pointsLength = this.points.length;

for (var i = 0; i < pointsLength; i++) {
var point = this.points[i];

if (point == null)
continue;

var dx = this.mousePos.x - point.curPos.x;
var dy = this.mousePos.y - point.curPos.y;
var dd = (dx * dx) + (dy * dy);
var d = Math.sqrt(dd);

if (d < 80) {
point.targetPos.x = (this.mousePos.x < point.curPos.x) ? point.curPos.x - dx : point.curPos.x - dx;
point.targetPos.y = (this.mousePos.y < point.curPos.y) ? point.curPos.y - dy : point.curPos.y - dy;
} else {
point.targetPos.x = point.originalPos.x;
point.targetPos.y = point.originalPos.y;
};

point.update();
};
};

this.draw = function() {
var pointsLength = this.points.length;
for (var i = 0; i < pointsLength; i++) {
var point = this.points[i];

if (point == null)
continue;

point.draw();
};
};
};

function Point(x, y, z, size, colour) {
this.colour = colour;
this.curPos = new Vector(x, y, z);
this.friction = 0.8;
this.originalPos = new Vector(x, y, z);
this.radius = size;
this.size = size;
this.springStrength = 0.1;
this.targetPos = new Vector(x, y, z);
this.velocity = new Vector(0.0, 0.0, 0.0);

this.update = function() {
var dx = this.targetPos.x - this.curPos.x;
var ax = dx * this.springStrength;
this.velocity.x += ax;
this.velocity.x *= this.friction;
this.curPos.x += this.velocity.x;

var dy = this.targetPos.y - this.curPos.y;
var ay = dy * this.springStrength;
this.velocity.y += ay;
this.velocity.y *= this.friction;
this.curPos.y += this.velocity.y;

var dox = this.originalPos.x - this.curPos.x;
var doy = this.originalPos.y - this.curPos.y;
var dd = (dox * dox) + (doy * doy);
var d = Math.sqrt(dd);

this.targetPos.z = d/100 + 1;
var dz = this.targetPos.z - this.curPos.z;
var az = dz * this.springStrength;
this.velocity.z += az;
this.velocity.z *= this.friction;
this.curPos.z += this.velocity.z;

this.radius = this.size*this.curPos.z;
if (this.radius < 1) this.radius = 1;
};

this.draw = function() {
ctx.fillStyle = this.colour;
ctx.beginPath();
ctx.arc(this.curPos.x, this.curPos.y, this.radius, 0, Math.PI*2, true);
ctx.fill();
};
};

init();
});