//
// Copyright Just2Easy Limited 2009
// all rights reserved
//
// see - www.j2e.com
//


function Pin(words,colour,by,x,y){
	if (document.pins==undefined){
		document.pins = new Array()
		document.pinId = 0
	}

	words = urldecode( words )
	this.words = words.substr(6, words.length-13);	// remove <html> and </html>
	this.colour = colour
	this.by = urldecode( by )
	this.x = x
	this.y = y
	this.pinId = document.pinId++

	if (this.words.length<1)
		this.words = "&nbsp"

	document.pins.push(this)
}

function showPin( pin ){
	if (!pin.div){
		var layer = 1
		var div = document.createElement('div')
     		div.style.position = "relative"
		var x = pin.x * 96 / 25.4
		var y = pin.y * 96 / 25.4 - 120
      	div.style.top = y + "px"
      	div.style.left = x + "px"
		div.style.width = 220 + "px"
		div.style.height = "0px"
      	div.style.zIndex = layer

		div.innerHTML = pin.words

		pin.div = div
      	document.getElementById("content").appendChild(div)

		var bubble = firstChild(div)
      	bubble.style.zIndex = layer

		var pos = getPos(bubble)
		var top = pin.y * 96 / 25.4 - 120 - pos.h
		var left = x

		if (top < 25 ){	// Make sure on screen
			if (top < -10){
				left = x + 40
      			div.style.left = left + "px"	// nudge right so we can see pin
			}

			top = 25
		}

      	div.style.top = top + "px"

		var src = "src=\"/markShapes/bubble.png\">"

		if ( pin.colour== "0000ff")
			src = "src=\"/markShapes/bubble+blue.png\">"
		else if ( pin.colour== "00ff00")
			src = "src=\"/markShapes/bubble+green.png\">"
		else if ( pin.colour== "ffd700")
			src = "src=\"/markShapes/bubble+gold.png\">"
		else if ( pin.colour== "ffff00")
			src = "src=\"/markShapes/bubble+yellow.png\">"
		else if ( pin.colour== "d2691e")
			src = "src=\"/markShapes/bubble+bronze.png\">"
		else if ( pin.colour== "c0c0c0")
			src = "src=\"/markShapes/bubble+silver.png\">"

		// top left
		var t = document.createElement('div')
		setStyle(t,layer)
		t.style.top = "-25px"
		t.style.left = "-25px"
		t.innerHTML = "<img style=\"position:absolute; top:0px; left:0px\;\" " + src;
		div.appendChild(t)

		var width = Math.max( 120, pos.w+5 )

		// top middle
		t = document.createElement('div')
		setStyle(t,layer)
		t.style.top = "-25px"
		t.style.width = width + "px"
		t.innerHTML = "<img style=\"position:absolute; top:0px; left:-25px\;\" " + src;
		div.appendChild(t)

		// top right
		t = document.createElement('div')
		setStyle(t,layer)
		t.style.top = "-25px"
		t.style.left = width + "px"
		var xPos = 692-25
		t.innerHTML = "<img style=\"position:absolute; top:0px; left:-" +xPos + "px;\" " + src;
		div.appendChild(t)

		// close icon
		t = document.createElement('div')
		setStyle(t,layer)
		t.style.top = (-17) + "px"
		t.style.left = (width) + "px"
		t.innerHTML = "<a href=\"javascript:closeBox('" + pin.pinId + "')\"><span style=\"font-family:Tahoma,sans-serif;font-size:10pt;color:blue;\">" + "X" + "</span></a>"
		div.appendChild(t)

		var height = pos.h + 20	// allow for 'by ....'

		// left edge
		t = document.createElement('div')
		setStyle(t,layer-2)
		t.style.left = "-25px"
		t.style.width = (width + 25) + "px"
		t.style.height = height + "px"
		t.innerHTML = "<img style=\"position:absolute; top:-25px; left:0px;\" " + src;
		div.appendChild(t)

		// right edge
		t = document.createElement('div')
		setStyle(t,layer)
		t.style.left = width + "px"
		t.style.height = height + "px"
		t.innerHTML = "<img style=\"position:absolute; top:-25px; left:-" +xPos + "px;\" " + src;
		div.appendChild(t)

		// bottom left
		var yPos = 472-25-40

		t = document.createElement('div')
		setStyle(t,layer)
		t.style.top = height + "px"
		t.style.left = "-25px"
		t.style.width = "50px"
		t.innerHTML = "<img style=\"position:absolute; top:-" + yPos + "px; left:0px;\" " + src;
		div.appendChild(t)

		// bottom middle
		t = document.createElement('div')
		setStyle(t,layer)
		t.style.top = height + "px"
		t.style.left = "25px"
		t.style.width = (width - 25) + "px"
		t.style.height = "58px"
		t.innerHTML = "<img style=\"position:absolute; top:-" + yPos + "px; left:-314px;\" " + src;
		div.appendChild(t)

		// bottom right
		t = document.createElement('div')
		setStyle(t,layer)
 		t.style.top = height + "px"
		t.style.left = width + "px"
		t.innerHTML = "<img style=\"position:absolute; top:-" + yPos + "px; left:-" +xPos + "px;\" " + src;
		div.appendChild(t)

		// by text
		t = document.createElement('div')
     		t.style.position = "absolute"
		t.style.top = height - 14 + "px"
		t.style.left = "0px"
     		t.style.zIndex = layer
		t.innerHTML = "<span style=\"font-family:Tahoma,sans-serif;font-size:10pt;color:blue;\">" + "by " + pin.by + "</span>"
		div.appendChild(t)

		var posBy = getPos(lastChild(div))
		t.style.left = (width - posBy.w -5) + "px"

		showArea( left-25, left+width+25, top-25, top+height+25 )

		src = "src=\"/markShapes/bubbleShadow.png\">"

		// SHADOW bottom left
		yPos = 420
		var o = -20
		t = document.createElement('div')
		setStyle(t,layer-1)
		t.style.top = (height + 5 ) + "px"
		t.style.left = o + "px"
		t.style.width = "50px"
		t.style.height = "30px"
		t.innerHTML = "<img style=\"position:absolute; top:-" + yPos + "px; left:0px;\" " + src;
		div.appendChild(t)

		// bottom middle
		t = document.createElement('div')
		setStyle(t,layer-1)
		t.style.top = (height + 5) + "px"
		t.style.left = (o+50) + "px"
		t.style.width = (width-20) + "px"
		t.style.height = "50px"
		t.innerHTML = "<img style=\"position:absolute; top:-" + yPos + "px; left:-300px;\" " + src;
		div.appendChild(t)

		// bottom right
		t = document.createElement('div')
		setStyle(t,layer-1)
		t.style.top = (height + 5) + "px"
		t.style.left = (o+width+30) + "px"
		t.style.width = "40px"
		t.style.height = "30px"
		t.innerHTML = "<img style=\"position:absolute; top:-" + yPos + "px; left:-680px;\" " + src;
		div.appendChild(t)

		// top right
		t = document.createElement('div')
		setStyle(t,layer-1)
		var h = Math.round((height + 50 ) /2)
		var w = 865 * h / 472
		t.style.top = ((height + 5)-h)+ "px"
		t.style.left = (o+width+30) + "px"
		t.style.width = "100px"
		t.style.height = h + "px"

		var theta = Math.atan2( 41.5, 56.9 )
		var offset = Math.tan( theta ) * h
		offset = 101-offset

		t.innerHTML = "<img style=\"position:absolute; top:-" + 220 + "px; left:-" + (729+offset) + "px;\" " + src;	// 784
		div.appendChild(t)
	}
	else{
      	pin.div.parentNode.removeChild(pin.div);
      	pin.div = null;
	}
}

function showArea( minX, maxX, minY, maxY ){
	var s = wSize()
	var xy = getScrollXY()
	var targetX = xy[0]
	var targetY = xy[1]

	if ( minX < xy[0] + s.x )
		targetX = Math.max(0,minX-s.x)
	if ( maxX > s.width + xy[0] + s.x )
		targetX = maxX-s.width-s.x
	if ( minY < xy[1])
		targetY = Math.max(0,minY)
	if ( maxY > s.height + xy[1])
		targetY = maxY-s.height;

	if (targetX!=xy[0] || targetY!=xy[1]){
		var framesPerSec = 30
		var frames = framesPerSec / 2
		var deltaX = (targetX - xy[0])/frames
		var deltaY = (targetY - xy[1])/frames

		animateScroll( xy[0], xy[1], targetX, targetY, deltaX, deltaY, framesPerSec, frames, 0 )
	}
}

function animateScroll( startX, startY, x, y, deltaX, deltaY, framesPerSec, frames, i){
	if (i<frames){
		i++
		window.scroll(startX+deltaX*i, startY+deltaY*i);
		var cmd = 'animateScroll(' + startX + ',' + startY + ',' + x + ',' + y + ',' + deltaX + ',' + deltaY + ',' + framesPerSec + ',' + frames + ',' + i + ')'
		scrolldelay = setTimeout(cmd,1000/framesPerSec); // scrolls every 100 milliseconds
	}
	else
		window.scroll(x, y);	// final position
}

function wSize(){ 
	var frame = document.getElementById("content")
	var framePos = getPos(frame)

	if(document.body.clientWidth) { 
		this.x= -framePos.x
		this.y=0
		this.width=document.body.clientWidth
		this.height=document.body.clientHeight
	} else { 
		this.x= -framePos.x
		this.y=0
		this.width = window.innerWidth
		this.height=document.innerheight
	} 

	return this
} 

function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;

	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}

	return [ scrOfX, scrOfY ];
}

function setStyle(e,layer){
	e.style.position = "absolute"
	e.style.top = "0px"
	e.style.left = "0px"
	e.style.width = "25px"
	e.style.height = "25px"
	e.style.overflow = "hidden"
	e.style.zIndex = layer
}

function closeBox(pinId){
	for (p in document.pins){
		var pin = document.pins[p];

		if (pinId==pin.pinId){
			showPin(pin)
			break
		}
	}
}

function firstChild(e){
	var n = e.firstChild;

	try{
		while (n.nodeType!=1)
  			n=n.nextSibling;

		return n;
	}
	catch(err){}

	return e;
}

function lastChild(e){
	var n = e.firstChild;

	try{
		while (n.nextSibling)
  			n=n.nextSibling;

		return n;
	}
	catch(err){}

	return e;
}

function getPos(e){
	var left = 0
	var top = 0
	var width = e.offsetWidth
	var height = e.offsetHeight

	while (e.offsetParent){
		left += e.offsetLeft
		top += e.offsetTop
		e = e.offsetParent
	}

	left += e.offsetLeft
	top+= e.offsetTop

	return {x:left, y:top, w:width, h:height}
}

// see http://www.mabaloo.com/Web-Development/Urlencode-and-Urldecode-with-JavaScript.html
/*function URLEncode(url) //Function to encode URL.
{
// The Javascript escape and unescape functions do not correspond
// with what browsers actually do...
var SAFECHARS = "0123456789" + // Numeric
"ABCDEFGHIJKLMNOPQRSTUVWXYZ" + // Alphabetic
"abcdefghijklmnopqrstuvwxyz" +
"-_.!~*'()"; // RFC2396 Mark characters
var HEX = "0123456789ABCDEF";

var plaintext = url;
var encoded = "";
for (var i = 0; i < plaintext.length; i++ ) {
var ch = plaintext.charAt(i);
if (ch == " ") {
encoded += "+"; // x-www-urlencoded, rather than %20
} else if (SAFECHARS.indexOf(ch) != -1) {
encoded += ch;
} else {
var charCode = ch.charCodeAt(0);
if (charCode > 255) {
alert( "Unicode Character '" 
+ ch 
+ "' cannot be encoded using standard URL encoding.\n" +
"(URL encoding only supports 8-bit characters.)\n" +
"A space (+) will be substituted." );
encoded += "+";
} else {
encoded += "%";
encoded += HEX.charAt((charCode >> 4) & 0xF);
encoded += HEX.charAt(charCode & 0xF);
}
}
}

return encoded;
};
*/

function urldecode(url) //function decode URL
{
// Replace + with ' '
// Replace %xx with equivalent character
// Put [ERROR] in output if %xx is invalid.
var HEXCHARS = "0123456789ABCDEFabcdef"; 
var encoded = url;
var plaintext = "";
var i = 0;
while (i < encoded.length) {
var ch = encoded.charAt(i);
if (ch == "+") {
plaintext += " ";
i++;
} else if (ch == "%") {
if (i < (encoded.length-2) 
&& HEXCHARS.indexOf(encoded.charAt(i+1)) != -1 
&& HEXCHARS.indexOf(encoded.charAt(i+2)) != -1 ) {
plaintext += unescape( encoded.substr(i,3) );
i += 3;
} else {
alert( 'Bad escape combination near ...' + encoded.substr(i) );
plaintext += "%[ERROR]";
i++;
}
} else {
plaintext += ch;
i++;
}
} // while

return plaintext;
};

 
/* The following broke with some characters.
function urldecode1 (str) {
    // http://kevin.vanzonneveld.net
    // +   original by: Philip Peterson
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +      input by: AJ
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: travc
    // +      input by: Brett Zamir (http://brett-zamir.me)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Lars Fischer
    // +      input by: Ratheous
    // +   improved by: Orlando
    // %        note 1: info on what encoding functions to use from: http://xkr.us/articles/javascript/encode-compare/
    // *     example 1: urldecode('Kevin+van+Zonneveld%21');
    // *     returns 1: 'Kevin van Zonneveld!'
    // *     example 2: urldecode('http%3A%2F%2Fkevin.vanzonneveld.net%2F');
    // *     returns 2: 'http://kevin.vanzonneveld.net/'
    // *     example 3: urldecode('http%3A%2F%2Fwww.google.nl%2Fsearch%3Fq%3Dphp.js%26ie%3Dutf-8%26oe%3Dutf-8%26aq%3Dt%26rls%3Dcom.ubuntu%3Aen-US%3Aunofficial%26client%3Dfirefox-a');
    // *     returns 3: 'http://www.google.nl/search?q=php.js&ie=utf-8&oe=utf-8&aq=t&rls=com.ubuntu:en-US:unofficial&client=firefox-a'
    
    var hash_map = {}, ret = str.toString(), unicodeStr='', hexEscStr='';
    
    var replacer = function (search, replace, str) {
        var tmp_arr = [];
        tmp_arr = str.split(search);
        return tmp_arr.join(replace);
    };
    
    // The hash_map is identical to the one in urlencode.
    hash_map["'"]   = '%27';
    hash_map['(']   = '%28';
    hash_map[')']   = '%29';
    hash_map['*']   = '%2A';
    hash_map['~']   = '%7E';
    hash_map['!']   = '%21';
    hash_map['%20'] = '+';
    hash_map['\u00DC'] = '%DC';
    hash_map['\u00FC'] = '%FC';
    hash_map['\u00C4'] = '%D4';
    hash_map['\u00E4'] = '%E4';
    hash_map['\u00D6'] = '%D6';
    hash_map['\u00F6'] = '%F6';
    hash_map['\u00DF'] = '%DF';
    hash_map['\u20AC'] = '%80';
    hash_map['\u0081'] = '%81';
    hash_map['\u201A'] = '%82';
    hash_map['\u0192'] = '%83';
    hash_map['\u201E'] = '%84';
    hash_map['\u2026'] = '%85';
    hash_map['\u2020'] = '%86';
    hash_map['\u2021'] = '%87';
    hash_map['\u02C6'] = '%88';
    hash_map['\u2030'] = '%89';
    hash_map['\u0160'] = '%8A';
    hash_map['\u2039'] = '%8B';
    hash_map['\u0152'] = '%8C';
    hash_map['\u008D'] = '%8D';
    hash_map['\u017D'] = '%8E';
    hash_map['\u008F'] = '%8F';
    hash_map['\u0090'] = '%90';
    hash_map['\u2018'] = '%91';
    hash_map['\u2019'] = '%92';
    hash_map['\u201C'] = '%93';
    hash_map['\u201D'] = '%94';
    hash_map['\u2022'] = '%95';
    hash_map['\u2013'] = '%96';
    hash_map['\u2014'] = '%97';
    hash_map['\u02DC'] = '%98';
    hash_map['\u2122'] = '%99';
    hash_map['\u0161'] = '%9A';
    hash_map['\u203A'] = '%9B';
    hash_map['\u0153'] = '%9C';
    hash_map['\u009D'] = '%9D';
    hash_map['\u017E'] = '%9E';
    hash_map['\u0178'] = '%9F';
    hash_map['\u00C6'] = '%C3%86';
    hash_map['\u00D8'] = '%C3%98';
    hash_map['\u00C5'] = '%C3%85';
 
    for (unicodeStr in hash_map) {
        hexEscStr = hash_map[unicodeStr]; // Switch order when decoding
        ret = replacer(hexEscStr, unicodeStr, ret); // Custom replace. No regexing
    }
    
    // End with decodeURIComponent, which most resembles PHP's encoding functions
    try{
	ret = decodeURIComponent(ret);
    }
    catch(err){}
 
    return ret;
}
*/

