Summary

This program insert a random image using jquery library The configuration of the images to be randomly display are in the banner.json file.
This file can contain either images (jpg, png) or flash.

• Images can have the attributes link and onclick. The src attribute is mandatory.
  the onclick attribute aims to get statistics on the click on a image
• Flash can have the attribute width (default : 728) and height (defaut : 90). The attribute src is mandatory.
  

 
 [
 	{"src":"http://www.numerikids.com/alpha/wp-content/uploads/2009/06/mario_bros.jpg",
 	"link":"http://www.google.fr",
 	"onclick":"$.get(\"http:\/\/172.16.31.180\/rotateBanner\/vide.gif\");",
 	"options":"target=\"_blank\" style="\"border:purple dotted 3px;\""
 	},
 	{"src":"http://monophonik.com/wp-content/uploads/2009/06/mario-wii.jpg",
 	"link":"http://www.bing.com",
 	"onclick":"$.get(\"http:\/\/172.16.31.180\/rotateBanner\/vide.gif\");"
 	},
 	{"src":"http://www.nintendolesite.com/images/news/news_Nouveau_Mario_en_approche_titre.jpg",
 	"link":"http://www.yahoo.fr",
 	"onclick":"$.get(\"http:\/\/172.16.31.180\/rotateBanner\/vide.gif\");"
 	},
 	{"src":"http://www.vidalonline.com/vidal-theme/images/pub.swf",
 	"width":"728",
 	"height":"90"
 	}
 
 ] 
 

1. configure the multiple banners in the banner.json file
2. create a <div id="banner"></div> in your html file
3. load jquery in your html file
4. load this banner.js in your html file and call rotateBanner()

/**
 * @fileoverview This program insert a random image using jquery library 
 * 
 * The configuration of the images to be randomly display are in the <em>banner.json</em> file.<br>
 * This file can contain either images (jpg, png) or flash.<br>
 * <ul>
 * <li>Images can have the attributes <em>link</em> and <em>onclick</em>. The <em>src</em> attribute is mandatory.<br>
 * 	the <em>onclick</em> attribute aims to get statistics on the click on a image</li>
 *
 * <li>Flash can have the attribute <em>width</em> (default : 728) and <em>height</em> (defaut : 90). The attribute <em>src</em> is mandatory.<br></li>
 * </ul>
 * here is a example of the content of the <em>banner.json</em> file<br>
 * <pre>
 * 
 * [
 * 	{"src":"http://www.numerikids.com/alpha/wp-content/uploads/2009/06/mario_bros.jpg",
 * 	"link":"http://www.google.fr",
 * 	"onclick":"$.get(\"http:\/\/172.16.31.180\/rotateBanner\/vide.gif\");",
 * 	"options":"target=\"_blank\" style="\"border:purple dotted 3px;\""
 * 	},
 * 	{"src":"http://monophonik.com/wp-content/uploads/2009/06/mario-wii.jpg",
 * 	"link":"http://www.bing.com",
 * 	"onclick":"$.get(\"http:\/\/172.16.31.180\/rotateBanner\/vide.gif\");"
 * 	},
 * 	{"src":"http://www.nintendolesite.com/images/news/news_Nouveau_Mario_en_approche_titre.jpg",
 * 	"link":"http://www.yahoo.fr",
 * 	"onclick":"$.get(\"http:\/\/172.16.31.180\/rotateBanner\/vide.gif\");"
 * 	},
 * 	{"src":"http://www.vidalonline.com/vidal-theme/images/pub.swf",
 * 	"width":"728",
 * 	"height":"90"
 * 	}
 * 
 * ] 
 * </pre>
 *
 * To install in your website, follow these steps :
 * <ol>
 * 	<li> configure the multiple banners in the banner.json file 
 * 	<li> create a &lt;div id="banner"&gt;&lt;/div&gt; in your html file  
 * 	<li> load jquery in your html file
 * 	<li> load this banner.js in your html file and call rotateBanner() 
 * </ol>
 *
 * @author Cédric Levasseur
 * @version 1.0
 *
 */


/**
 * The bootstrap which load the script
 */
$(document).ready(function() {
//  rotateBanner();
  rotateBanner($("#banner"),"http://www.otherdomain.com/rotateBanner/banner.php?callback=?");	
});


/**
 * rotateBanner is the main function of this script. It is loaded when
 * the html document finished to load.
 * @param {object} target a html element, member of the Document Object Model. If empty, it use &lt;div id="banner"&gt;
 * @param {string} an url for the banner.json file, if empty, 'banner.json' in the current folder will be used. Otherwise, take care for a Same host url. See http://en.wikipedia.org/wiki/Same_origin_policy for details.
 *
 */
function rotateBanner(target, json_url){
	//loadJQuery();
	if(typeof target === 'undefined' || !target) {
		target=$("#banner");
	}
	if(typeof json_url === 'undefined' || !json_url) {
		json_url="banner.json";	
	}
	$.ajax({
    	url : json_url,
    	dataType : 'jsonp',
    	success : function(data){
		elem=randomize(data);
		insertElement(target,elem);
	} 
});


}

/**
 * To prevent multiple load of jquery
 * NO LONGER USED, be sure to load JQUERY before using this  banner.js
 * @private
 * @deprecated
 */
/* window.onload = function () {

	 function loadJQuery(){
	  if (window.jQuery === undefined) {
	    var script = document.createElement('script');
	    script.src = 'http://code.jquery.com/jquery-latest.min.js';
	    document.getElementsByTagName('head')[0].appendChild(script); // load jQuery
	  }
	}

}
*/



/**
 * randomize a data in this data array
 * @private
 * @param {array} data the array generated by reading the json file
 */
function randomize(data){
	var numLow = 0;
	var numHigh = data.length-1;
	var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
	var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
	return data[numRand];
}


/**
 * insert the Element (image or flash) in the &lt;div id="banner"&gt;
 * @private
 * @param {object} target a html element, member of the Document Object Model
 * @param {object} a item of a data (img or flash)
 *
 */
function insertElement(target,elem){
	ext=elem.src.substring(elem.src.length-3, elem.src.length);
	var params=""
	var source="";	
	var options="";
	if(ext=='swf'){
		if(elem.width){
			params=params+'width="'+elem.width+'" ';				
		}else{
			params=params+'width="728" ';				
		}
		if(elem.height){
			params=params+'height="'+elem.height+'" '
		}else{		
			params=params+'height="90" '
		}
		if(elem.options && elem.options.indexOf('=',0)>1 ){
			options=elem.options;
		}
		source='<object '+params+' data="'+elem.src+'" type="application/x-shockwave-flash" '+options+'><param value="'+elem.src+'" name="movie"><param value="true" name="loop"></object>'
	}else{
		// jpg or png
		var source='<img src="'+elem.src+'" />'
		var onclck="";	
		if(elem.onclick){
			onclck=onclck+'onclick='+elem.onclick.replace('/\"/g','\\\"')+' '
		}		
		if(elem.options && elem.options.indexOf('=',0)>1 ){
			options=elem.options;
		}
		if(elem.link){
			source='<a href="'+elem.link+'" '+onclck+' '+options+' >'+source+'</a>';
		}

	}
	target.append(source);
}