/*

DEFAULT HTML:
<div id="visualBadge" class="visual-badge">
  <div class="visual-badge-photos">
    <div class="visual-badge-photo-item" style="padding:2px 0; text-align:center;">
      <a href="(...)"><img src="(.../quad50)" style="border:0; padding:2px 4px;">
    </div>
    (...)
  </div>
</div>

FULL HTML THROUGH OPTIONS:
<div id="visualBadge" class="visual-badge">
  <div class="visual-badge-photos" style="border:[options.border]; background:[options.background]">
    <div class="visual-badge-photo-item" style="padding:[options.containerPadding]; text-align:[options.containerTextAlign];">
      <a href="(...)"><img src="(.../quad50)" style="border:0; padding:[options.imgPadding]">
    </div>
    (...)
  </div>
</div>

DEFAULT OPTIONS:
     writeVisualBadge('visualBadge', {
	     format:'quad100',
	     border:'',
	     background:'',
	     containerPadding:'2px 0',
	     containerTextAlign:'center',
	     imgPadding:'2px 4px',
	     layout:'vertical',
	     link_photos:true
	 });

ALTERNATIVE OPTIONS:
     writeVisualBadge('visualBadge', {
	     format:'medium',
	     border:'2px solid #666',
	     background:'#fafafa',
	     containerPadding:'8px 0',
	     containerTextAlign:'right',
	     imgPadding:'4px 8px',
	     layout:'horisontal',
	     link_photos:false
	 });

CSS:
div.visual-badge {}
div.visual-badge div.visual-badge-photos {}
div.visual-badge div.visual-badge-photos div.visual-badge-photo-item {}
div.visual-badge div.visual-badge-photos div.visual-badge-photo-item a {}
div.visual-badge div.visual-badge-photos div.visual-badge-photo-item a img {}

... And remember that all inline style css can be overwritten from stylesheet using "!important" such as:
div.visual-badge div.visual-badge-photos div.visual-badge-photo-item a img {padding:0 !important; border:4px solid blue !important;}

*/

function writeVisualBadge(container, options) {
    if (typeof(options)!='object'||!options) options={};
    if (!options.format||!options.format.length) options.format='quad100';
    if (!options.border||!options.border.length) options.border='';
    if (!options.background||!options.background.length) options.background='';
    if (!options.containerPadding||!options.containerPadding.length) options.containerPadding='2px 0';
    if (!options.containerTextAlign||!options.containerTextAlign.length) options.containerTextAlign='center';
    if (!options.imgPadding||!options.imgPadding.length) options.imgPadding='2px 4px';
    if (!options.layout||!options.layout.length) options.layout='vertical';
    if (!options.link_photos||!options.link_photos.length) options.link_photos=true;
    
    var c = document.getElementById(container); if (!visual || !visual.photos || !c || visual.photos.length==0) return;
    var p = visual.photos;

    // Default styling on container
    c.className+=' visual-badge';
    if(options.background.length) c.style.background = options.background;
    if(options.border.length) c.style.border = options.border;

    // Photos container
    var photosDiv = document.createElement('div');
    photosDiv.className='visual-badge-photos';
    if(options.containerPadding.length) photosDiv.style.padding=options.containerPadding;
    if(options.containerTextAlign.length) photosDiv.style.textAlign=options.containerTextAlign;
    for(var i=0; i<p.length; i++) {
	// Individual photos
	var div = document.createElement('div');
	div.className='visual-badge-photo-item';
	if (options.layout=='horisontal') div.style.display = 'inline';
	var img = document.createElement('img');
	img.src = 'http://'+visual.site.domain+p[i][options.format+'_download'];
	img.style.border = '0';
	if(options.imgPadding.length) img.style.padding = options.imgPadding;

	if (options.link_photos) {
	    var a = document.createElement('a');
	    a.href = 'http://'+visual.site.domain+p[i].one;
	    a.appendChild(img);
	    div.appendChild(a);
	} else {
	    div.appendChild(img);
	}
	photosDiv.appendChild(div);
    }
    c.appendChild(photosDiv);
}