Hi, I'm looking for some help on a script somewhat beyond my level, so first let me explain what I'm attempting in full.
I am the webmaster of a large game played for two weeks 24/7 across New York City. 6 man teams are arranged in a circle and compete against those on either side of them. With javascript, I'm attempting to draw the circle, which will later be linked to a php script that will access a scoreboard that will update in real time, eliminating teams from the circle. This I have no problem with.
I am also attempting to have the circle respond on click to spin the circle, "selecting" the object clicked, and toggling the display of a div that shows the recent activity of that team. I have been searching and searching for hours within the script, but have been unable to locate the variable that would allow me to identify the index of the particular object selected (which i must have to toggle the appropriate div).
This problem is closely linked to another, which is how to cancel the toggle function if the clicked object is already selected.
I also need help adding an image positioned in the center of the circle. I have attempted to use another div with z-index positioned separately, but this has failed, and I believe I need to draw the object from within the script.
I am using a script taken and already slightly modified from
http://www.desjors.nl/blog/moopath-m...s-in-a-circle/
Thank you so much for your help.
Code:
<script type="text/javascript" src="http://www.desjors.nl/snippets/javascript/mootools-1.2.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(e) {
new SmoothScroll();
});
/*
Script: MooPath-0.1.js
MooPath version 0.1 19-09 2008
License:
MIT-style license.
Copyright:
Copyright 2008
Sjors van der Pluijm
http://www.desjors.nl/blog
See also:
http://mootools.net
Usage:
window.addEvent('domready', function() {
new MooPath.Ellipse($$('div.myelements'), {
show: 2,
ellipse: {x: 400, y: 400},
factor: 0.8,
fxoptions: {
duration: 1000
}
});
});
*/
/*
Class: Fx.Any
Fx.Any is a hack of Fx.Elements to add custom properties to change.
Each property has a callback function that takes the element and the current value of
the property as its arguments.
Callback example: {myname: function(el, value) {el.setStyle('height', value);}}
Arguments:
elements - see Fx.Elements
callbacks - an object of callbacks
options - optional, see Fx.Elements
*/
Fx.Any = new Class({
Extends: Fx.Elements,
initialize: function(elements, callbacks, options) {
this.callbacks = callbacks || {};
this.parent(elements, options);
},
render: function(element, property, value) {
if (this.callbacks[property]) {
this.callbacks[property](element, value[0]['value']);
} else {
this.parent(element, property, value);
}
}
});
/*
Class: MooPath
To use MooPath you need to subclass it and add the method 'set' which will
set the position of the element at a point
Arguments:
elements - the elements to arrange
options - optional
Options:
show - the element to show at start (int)
fxoptions - options, see Fx.Elements
*/
var MooPath = new Class({
Implements: [Options],
maxposition: 1,
options: {
show: 0,
fxoptions: {},
position: 'position',
origsize: 'origsize'
},
initialize: function(elements, options) {
this.setOptions(options);
this.elements = elements;
this.curel = this.options.show;
this.fx = new Fx.Any(this.elements, {pathpoint: this.set.bind(this)}, this.options.fxoptions);
var numelements = this.elements.length;
this.elements.each(function(el, i) {
el.store(this.options.origsize, el.getSize());
// Position element on path
if (!el.retrieve(this.options.position)) {
el.store(this.options.position, (i - this.curel) / numelements);
}
this.set(el, el.retrieve(this.options.position));
el.setStyle('cursor', i==this.curel?'default':'pointer');
el.addEvent('click', this.display.bind(this, i));
}, this);
},
/*
Property: turn
Do a full animation from position 0 to position 1
Arguments:
numrounds - integer, number of rounds
Example:
(start code)
new MooPath.Ellipse($$('a')).turn(2);
(end)
*/
turn: function(numrounds) {
var diff = numrounds * this.maxposition * -1;
var obj = {};
this.elements.each(function(el, i) {
var curpos = el.retrieve(this.options.position);
obj[i] = {pathpoint: [curpos, curpos - diff]};
el.store(this.options.position, curpos - diff);
}, this);
this.fx.start(obj);
},
/*
Property: display
Brings the element to position 0 (front).
Arguments:
idx - integer, the index of the item to show, or the actual element to show.
Example:
(start code)
new MooPath.Ellipse($$('a')).display(1);
(end)
*/
display: function(idx) {
if ($type(idx) == 'element') {
this.curel = idx = this.elements.indexOf(idx);
} else if ($type(idx) == 'string') {
if (idx == 'next') {
this.curel--;
idx = this.elements[this.curel]?this.curel:this.elements.length-1;
} else if (idx == 'previous') {
this.curel++;
idx = this.elements[this.curel]?this.curel:0;
}
} else {
this.curel = idx;
}
var diff = this.movement(this.elements[idx]);
if (diff == 0) return;
var obj = {};
this.elements.each(function(el, i) {
var curpos = el.retrieve(this.options.position);
obj[i] = {pathpoint: [curpos, curpos - diff]};
el.store(this.options.position, curpos - diff);
el.setStyle('cursor', i==this.curel?'default':'pointer');
}, this);
this.fx.start(obj);
},
movement: function(el) {
// Calculate movement diff (current position + diff = new position)
return el.retrieve(this.options.position);
}
});
/*
Class: MooPath.Ellipse
Move objects over an ellipse
Arguments:
elements - the elements to arrange
options - optional
Options:
see MooPath and
ellipse - object with width and height of the ellipse
factor - objects far away look smaller
*/
MooPath.Ellipse = new Class({
Extends: MooPath,
options: {
ellipse: {x: 500, y: 300},
factor: 0.7
},
set: function(el, position) {
// Set the styles of the element at position
var origsize = el.retrieve(this.options.origsize);
var a = this.options.ellipse.x/2;
var b = this.options.ellipse.y/2;
// 0-1 scale to 0-2pi
position = 2 * Math.PI * position;
var newy = b + b * Math.sin(position - 0.5 * Math.PI);
var factor = this.realFactor(newy);
var point = {
x: a + (a * Math.sin(position-Math.PI) * factor),
y: newy
};
el.setStyles({
'bottom': Math.round(point.y),
'left': Math.round(point.x - (origsize.x *1/ 2)),
'width': Math.round(origsize.x * 1),
'height': Math.round(origsize.y * 1),
'z-index': this.options.ellipse.y - Math.round(point.y)
});
},
realFactor: function(posy) {
// Get the factor that aplies on position posy
return ((this.options.ellipse.y - posy) * (1 - this.options.factor) / this.options.ellipse.y) + this.options.factor;
},
movement: function(el) {
// Calculate movement diff (current position + diff = new position)
var diff = el.retrieve(this.options.position);
while (diff < 0) diff += this.maxposition;
while (diff >= this.maxposition) diff -= this.maxposition;
// Reverse direction
if (diff >= this.maxposition / 2) {
diff -= this.maxposition;
}
return diff;
}
});
window.addEvent('domready', function(e) {
// Example 1:
var myMooPath = new MooPath.Ellipse($$('#example1 img'), {
show: 2,
ellipse: {x: 400, y: 300},
factor: 0.6,
fxoptions: {
wait: false,
duration: 3000,
transition: Fx.Transitions.Elastic.easeOut
}
});
$('doturns').addEvent('click', function(e) {
myMooPath.turn(1);
});
$$('#example1 img').each(function (img) {
img.addEvent('click', function(e) {
var team="";
if(document.getElementById('TEAMONE').style.display == 'none'){ document.getElementById('TEAMONE').style.display = 'block'; }else{
document.getElementById('TEAMONE').style.display = 'none';}
alert('Change HISTORY display in lower div \n always display ranking (and team scores? or team scores in top marquee?) in absolute position right div \n
START WITH MIDDLE ICON SELECTED AND FULL HISTORY DISPLAY (import like updates.php) \n stop event if already selected!' + team);
});
});
});
</script>
<style type="text/css">
div.container {
width: 400px;
height: 450px;
margin: 0px auto;
position: relative;
}
div.container img {
position: absolute;
}
</style>
Code:
<div class="container">
<input type="button" id="doturns" value="turn" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
<img src="http://course.cengage.com/downloads/newperspectives/crweb2/dhtml/Circle.gif" alt="" border=0 width="50"
height="50" />
</div>
<div id=RANKING style="float:right;border:#7E7E7E solid 1px;width:150px;text-align:right;font-weight:bold;padding-right:10px; ">
<h2>Current Rankings:</h1>
TEAM ONE<br>
TEAM TWO<br>
<br>
</div>
<div id=TEAMONE style="display:none">
TEAM ONE
</div>
<div id=TEAMTWO style="display:none">
TEAM TWO
</div>
Before you post, read our: 
