/*
 * Function to add a flickr panel with the given tag to the given div.
 * Based on the flickr coder from http://www.flickr.com/badge.gne
 *
 * Written by Carl Vincent
 * Copyright 2008 Netskills, University of Newcastle-upon-Tyne.
 */

function addFlickrToDiv( divId, flickrTag ) {
    if (document.getElementById( divId ) ) {
        var targetDiv = document.getElementById( divId );

        var outerDiv = document.createElement('div');
        outerDiv.style.margin="0px 5px 5px 0px";
        outerDiv.style.width="117px";

        var innerDiv = document.createElement('div');
        innerDiv.style.color="#666666";
        innerDiv.style.textAlign="center";
        innerDiv.style.fontFamily="arial, helvetica, sans-serif";
        innerDiv.style.fontSize="11px";

        var whatDiv = document.createElement('div');
        whatDiv.innerHTML='This is a Flickr badge showing public photos from Flickr tagged with <a href="http://www.flickr.com/photos/tags/'+flickrTag+'">'+flickrTag+'</a>. Make your own badge <a href="http://www.flickr.com/badge.gne">here</a>.';
        whatDiv.style.display='none';
  
        var whatDivClose = document.createElement('a');
        whatDivClose.innerHTML='(Hide Info)';

        whatDiv.appendChild(whatDivClose);

        var whatLink = document.createElement('a');
        whatLink.innerHTML='What is this?';
        whatLink.href="http://www.flickr.com/badge.gne";
        whatLink.style.color='#3993ff';

        var toggleWhat = function() {
            whatDiv.style.display = ( whatDiv.style.display != 'none' ) ? 'none' : 'block';
            whatLinkDiv.style.display = ( whatLinkDiv.style.display != 'none' ) ? 'none' : 'block';
            return false;
        }

        whatDivClose.onclick = toggleWhat;
        whatLink.onclick = toggleWhat;

        var whatLinkDiv = document.createElement('div');
        whatLinkDiv.appendChild(whatLink);

        var flickrURL =  'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color=ffffff&zg_tags='+flickrTag+'&zg_tag_mode=any';

        
/* We have to write this in because IE won't let you clear the scrolling attribute programatically... */
        var flickrLink = document.createElement('a');
        flickrLink.href="http://www.flickr.com";
        flickrLink.innerHTML='www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com';

        var lineBreak = document.createElement('br');

        
        var iFrame = '<a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br /><iframe style="background-color: #ffffff; border-color:#ffffff; border: none;" width="113" height="151" frameborder="0" scrolling="no" title="Flickr Badge" src="'+flickrURL+'"></iframe>';
        /*document.createElement('iframe');
        iFrame.style.backgroundColor='#ffffff';
        iFrame.style.borderColor='#ffffff';
        iFrame.style.border='none';
        iFrame.width=113;
        iFrame.height=151;
        iFrame.frameborder=0;
        iFrame.scrolling=0;
        iFrame.src=flickrURL;
        iFrame.title="Flickr Badge";
*/
        innerDiv.appendChild( flickrLink );
        innerDiv.appendChild( lineBreak );
        innerDiv.innerHTML= iFrame ;
        innerDiv.appendChild( whatLinkDiv );
        innerDiv.appendChild( whatDiv );

        outerDiv.appendChild( innerDiv );

        targetDiv.appendChild( outerDiv );
    }
}