/*******************************************************************
* Kainaw's Flower Buttons
* A javascript-powered collection of buttons that appear in a circle
* around a central control button. This is similar to the controls
* used in The Sims video game.
********************************************************************
* INSTALLATION
* To install, place this script in your website's directory.
* Add to your HTML page:
*
* You must add this to every HTML page that will use at least one
* flower button.
* Do not include the script twice in one HTML page.
* If your BODY tag does not have the ONLOAD option, add:
*
* If it does have onload already defined, add kfb_init to the end:
*
********************************************************************
* CREATING A FLOWER BUTTON
* Each flower button requires an anchor on the webpage with the 'id'
* option set. Then, use the kfb_Flower constructor.
* Example:
* CLICK ME
*
* The number after the ID in the constructor is the radius of the
* petals. The larger the number, the further out the petals will
* appear.
* Note: The href of javascript:void(0) keeps the browser from trying
* to load a webpage. Some people use javascript:null instead.
********************************************************************
* ADDING PETALS TO THE FLOWER BUTTON
* Petals are added with a method call on the flower button object:
*
* The first part of the method call is obviously the HREF link.
* The second part is the text that will appear. You may use plain
* text or an image, as in:
* example.addPetal("http://kainaw.com", "
");
********************************************************************
* CUSTOMIZING THE ANGLE OF DISPLAY
* By default, the buttons bloom in a 360 degree angle. You may
* alter the start/end angles easily. After you create your flower
* button object, define the start/end angles with:
* example.start_angle = 25;
* example.end_angle = 130;
* Zero degrees points directly to the right of the center button.
* 90 degrees points down. 180 degrees points left (and so on).
* If your total rotation (end_angle-start_angle) is >= 360 degrees,
* it will automatically pad the end of the rotation so the first
* and last buttons do sit on top of each other.
********************************************************************
* TIPS AND TRICKS
* Images are the best for this script. However, you can be creative
* with text links. Use solid backgrounds and colored text, such as:
* example.addPetal("some.link", "RED");
*
* If you have more than one flower link on a page, the others will
* automatically close when one opens. Just make sure they all have
* unique ID values.
********************************************************************
* ISSUES
* This script requires a browser with Javascript and CSS capability.
* It uses absolute placement of objects and z-indexing.
*
* This has been tested successfully on the following web browsers:
* Firefox v1.0.4
* Konqueror v3.4.1
* Internet Explorer v6.0
********************************************************************
* BUG FIXES (so they aren't repeated)
* Internet Explorer does not allow document.body.append until the
* entire document is loaded. Therefore, the init function is
* required to add petals to the document.body after the page is
* completely loaded.
*
* See the getXY function. It attempts to get the accurate position
* of the main button. This may not work on all web browsers.
*
* The getXY function returns an object. I was using it as a simple
* integer (causing errors in IE). It is now treated properly as
* an object with items x and y.
********************************************************************/
// Array of flowers on the page.
var kfb_flowers = new Array(0);
/**
* Flower object.
* @param id ID of the flower's main anchor
* @param radius Radius of the petals
*/
function kfb_Flower(id, radius)
{
this.id = id;
this.element = document.getElementById(this.id);
if(this.element != null)
{
this.radius = radius;
this.petals = new Array(0);
this.popup = false;
this.start_angle = 0;
this.end_angle = 360;
this.element.onclick = function()
{
var flower = kfb_getFlower(this.id);
if(flower.popup) flower.close();
else flower.open();
return false;
};
kfb_flowers.push(this);
}
}
kfb_Flower.prototype.addPetal = kfb_addPetal;
kfb_Flower.prototype.open = kfb_open;
kfb_Flower.prototype.close = kfb_close;
/**
* Petal object.
* @param flower Flower to attach petal to
* @param id ID of flower's anchor
* @param link Link for petal to go to
* @param text Text for petal's display
*/
function kfb_Petal(flower, id, link, text)
{
this.flower = flower;
this.id = id;
this.link = link;
this.text = text;
this.element = null;
}
/**
* Initialize all flower links.
*/
function kfb_init()
{
for(var f=0; f