
var _style = '<style>';
//_style += '.photo_box {margin:0px;padding:5px;border:1px solid #ccddee;width:505px;font-family:Arial,Helvetica,sans-serif;font-size:11px;background:#ddd;}';
_style += '#photo_notes_23187093 {position:absolute;margin:0px;padding:0px;border:0px solid #cc0000; z-index:1000; visibility:visible;}';
_style += '.photo_note {position:absolute; min-width:500px; margin:0px; padding:0px;}';
_style += '.photo_note_box_div {position:absolute; border:0px solid #d4d82d;}';
_style += '.photo_note_box_inner_div {border:1px solid black;}';
_style += '.photo_note_box_inner_inner_div {border:1px solid white;}';
_style += '.photo_note_text_div {display:none;overflow:auto; position:relative; padding:0px; border: 0px solid black;z-index:2000;padding:0px 0px 0px 0px;width:200px;}';
_style += '.photo_note_text_table { display:table;margin:0px; padding:1px;background-color:#ffffd3;border: 1px solid black;}';
_style += '</style>';

var _IE4=(document.all);
var _box_23187093 = new Array();
var _notes_23187093 = new Array();
_box_23187093[_box_23187093.length] = '<div class="photo_note" id="photo_note_910299" style="left:220px; top:64px;"><div class="photo_note_box_div"><div class="photo_note_box_inner_div"><div class="photo_note_box_inner_inner_div"><div style="width:24px; height:21px;"></div></div></div></div><div class="photo_note_text_div" style="top:26px;"><table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">Step 1 <br>Click the Gmap icon.</span></td></tr></table></div></div>';
_notes_23187093[_notes_23187093.length] = 'photo_note_910299';

// <table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">' +result.note[i].text+ '</span></td></tr></table>

_box_23187093[_box_23187093.length] = '<div class="photo_note" id="photo_note_910301" style="left:141px; top:304px;"><div class="photo_note_box_div"><div class="photo_note_box_inner_div"><div class="photo_note_box_inner_inner_div"><div style="width:31px; height:33px;"></div></div></div></div><div class="photo_note_text_div" style="top:38px;"><table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">Step 2<br>Place the red marker where you took the photo on the google map.</span></td></tr></table></div></div>';
_notes_23187093[_notes_23187093.length] = 'photo_note_910301';

// <table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">' +result.note[i].text+ '</span></td></tr></table>

_box_23187093[_box_23187093.length] = '<div class="photo_note" id="photo_note_910307" style="left:153px; top:201px;"><div class="photo_note_box_div"><div class="photo_note_box_inner_div"><div class="photo_note_box_inner_inner_div"><div style="width:106px; height:33px;"></div></div></div></div><div class="photo_note_text_div" style="top:38px;"><table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">Step 3<br>Open the marker info window, and you will see the lat/lon info. If everything is correct, click &quot;Add geo tags&quot;.</span></td></tr></table></div></div>';
_notes_23187093[_notes_23187093.length] = 'photo_note_910307';

// <table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">' +result.note[i].text+ '</span></td></tr></table>

_box_23187093[_box_23187093.length] = '<div class="photo_note" id="photo_note_910310" style="left:315px; top:356px;"><div class="photo_note_box_div"><div class="photo_note_box_inner_div"><div class="photo_note_box_inner_inner_div"><div style="width:140px; height:16px;"></div></div></div></div><div class="photo_note_text_div" style="top:21px;"><table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">Step 4<br>The tags with the lat/lon will show up here. Click &quot;ADD&quot; to add these tags.</span></td></tr></table></div></div>';
_notes_23187093[_notes_23187093.length] = 'photo_note_910310';

// <table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">' +result.note[i].text+ '</span></td></tr></table>

_box_23187093[_box_23187093.length] = '<div class="photo_note" id="photo_note_910318" style="left:155px; top:237px;"><div class="photo_note_box_div"><div class="photo_note_box_inner_div"><div class="photo_note_box_inner_inner_div"><div style="width:81px; height:12px;"></div></div></div></div><div class="photo_note_text_div" style="top:17px;"><table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">Step 5<br>This step is optional. You can actively post your geotagged photo to Geobloggers database. Or you can just wait for Geobloggers to grab your geotagged photo automatically.</span></td></tr></table></div></div>';
_notes_23187093[_notes_23187093.length] = 'photo_note_910318';

// <table class="photo_note_text_table" cellpadding="0" cellspacing="0"><tr><td><span style="font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;">' +result.note[i].text+ '</span></td></tr></table>

// var _imgdiv = '<div id="comm_div"></div><div id="rotate_div"></div><div id="shadow_div"></div><div id="photoImgDiv23187093" style="padding:1px;width:502px;" class="photoImgDiv" onMouseOver="showNoteBox()" onMouseOut="hideNotes()"><img src="http://static.flickr.com/12/23187093_252cdf199b.jpg" /></div>';
var site = '<div style="font-size:11px;font-family:Arial;text-align:left;margin-right:10px;">Powered by <a href="http://webdev.yuan.cc/flickr/flickr_notes.html" style="text-decoration:none;">YuanCC Scriptlets</a></div>';
var _imgdiv = '<div id="photoImgDiv23187093" style="display:inline;padding:1px;" class="photoImgDiv" onMouseOver="showNoteBox(23187093)" onMouseOut="hideNotes(23187093)"><a href="http://www.flickr.com/photos/ckyuan/23187093/"><img src="http://static.flickr.com/12/23187093_252cdf199b.jpg" border="0" /></a>'+site+'</div>';

document.write(_style);
document.write('<div class="photo_box">');
document.write('<div id="photo_notes_23187093" class="photo_notes"><div id="notes_text_div"></div>');
for(var i=0;i<_box_23187093.length;i++) document.write(_box_23187093[i]);
document.write('</div>');
document.write(_imgdiv);
document.write('</div>');
document.getElementById('photo_notes_23187093').style.visibility = 'hidden';

for(var i=0;i<_notes_23187093.length;i++) {
    _n = document.getElementById(_notes_23187093[i]);
//    _n.firstChild.firstChild.firstChild.onmouseover = function() {
    _n.onmouseover = function() {
	document.getElementById('photo_notes_23187093').style.visibility = 'visible';
	this.lastChild.style.display = 'block';
	return true;
    }
    _n.onmouseout = function() {
	if(!_IE4) this.lastChild.style.display = 'none';
    }
    if(_IE4) _n.lastChild.style.display = 'block';
}

function showNote(x) {
    document.getElementById('photo_notes_23187093').style.visibility = 'visible';
}
function hideNotes(id) {
    document.getElementById('photo_notes_'+id).style.visibility = 'hidden';
}
function showNoteBox(id) {
    document.getElementById('photo_notes_'+id).style.visibility = 'visible';
}

