/*
button.js is now version 2.0

The following variable can be set by the user.
To do so, in the head of your page, define any of the variables below.
Optional Usage examples
Taggable_sDisplayStyle = 'text';
Taggable_sButtonInnerHTML = 'See who is tagged on this page!';
Taggable_bShowNames = true;
Taggable_bFbIcon = true;
Taggable_bTaggableIcon = true;
*/

// already loaded
if(typeof(Taggable_bLoaded) == 'undefined')
	Taggable_bLoaded = false;
	
// sandbox setting
if(typeof(Taggable_sSandbox) == 'undefined')
	Taggable_sSandbox = '';

// bookmarklet mode
if(typeof(Taggable_bBookmarkletMode) == 'undefined')
	Taggable_bBookmarkletMode = false;
else if(Taggable_bBookmarkletMode == true)
	Taggable_bLoaded = true;


// include facebook favicon
if(typeof(Taggable_bFbIcon) == 'undefined')
	Taggable_bFbIcon = false;

// include taggable favicon
if(typeof(Taggable_bTaggableIcon) == 'undefined')
	Taggable_bTaggableIcon = false;

// css of the button text
if(typeof(Taggable_sTextCss) == 'undefined')
{
	Taggable_sTextCss = '';
	if(Taggable_bFbIcon)
		Taggable_sTextCss = 'margin-bottom: 4px; background-image:url(http://taggable.com/img/fb_favicon.png);background-repeat:no-repeat;padding-left: 20px;';
	if(Taggable_bTaggableIcon)
		Taggable_sTextCss = 'margin-bottom: 4px; background-image:url(http://taggable.com/img/taggable_rounded_favicon.png);background-repeat:no-repeat;padding-left: 20px;';
}

// use a standard button or (custom) text. allowed values: 'button', 'text', 'thumbs'
if(typeof(Taggable_sDisplayStyle) == 'undefined' || !Taggable_sDisplayStyle.length)
	Taggable_sDisplayStyle = 'button';

// your custom text. used if sUseButtonOrText is set not set to 'button'
if(typeof(Taggable_sButtonInnerHTML) == 'undefined')
	Taggable_sButtonInnerHTML = 'Who is on this page?';

// show names of the tagged people?
if(typeof(Taggable_bShowNames) == 'undefined')
	Taggable_bShowNames = 0;

// float the button?
if(typeof(Taggable_bFixedPosition) == 'undefined')
	Taggable_bFixedPosition = false;

// if floating, where?
if(typeof(Taggable_sFixedLocation) == 'undefined')
	Taggable_sFixedLocation = 'top:0px; left:0px;';

// url - useful if more than one button/page, like wordpress home page
if(typeof(Taggable_sUrlOfPage) == 'undefined')
	Taggable_sUrlOfPage = escape(document.location.href);
// end of variables that user can change

// additional variables
Taggable.sDomain = 'http://taggable.com';
if(Taggable_sSandbox)
	Taggable.sDomain = 'http://'+Taggable_sSandbox+'.taggable.com';

// the Taggable object
function Taggable()
{
	// first time this is called?
	if (typeof(iTaggableButtonCount)=='undefined')
	{
		iTaggableButtonCount=0;
		aTaggableButtons = new Array();
		this.initOnce();
	}

	aTaggableButtons[iTaggableButtonCount] = this;
	this.iButtonCount = iTaggableButtonCount;
	iTaggableButtonCount++;

	this.sUrlOfPage = Taggable_sUrlOfPage; // could vary per object

	// set some internal variables based on the user's settings
	Taggable.sLinkClass = "taggableLink";
	Taggable.sButtonContainerCss = "";

	Taggable.bPopWindow = false;
//	if((Taggable_bShowNames == 1)||(Taggable_bShowNames))
//		Taggable.bPopWindow = true;
		
	if(Taggable_bBookmarkletMode)
		Taggable.bPopWindow = false;

	// get the alignment right for the number element based on the browser
	// MUST have a font-family: helvetica; font-size: 12px;
	var taggable_numtags_padding = 'padding: 5px 4px 2px 4px;'; // works for firefox mac
	if(navigator.platform == 'Win32')
		var taggable_numtags_padding = 'padding: 3px 4px 2px 4px;'; // works for firefox pc
	if(navigator.userAgent.indexOf('Safari') > -1)
		taggable_numtags_padding = 'padding: 4px 4px 2px 4px;'; // works for safari and chrome
	if(navigator.platform == 'Win32')
		taggable_numtags_padding = 'padding: 3px 4px 2px 4px;'; // works for safari and chrome pc
	if(navigator.userAgent.indexOf('MSIE') > -1)
		taggable_numtags_padding = 'padding: 3px 4px 2px 4px;'; // explorer

	Taggable.sNumberOfTagsCss = "visibility:hidden; position:relative; font-family: helvetica; \
				 left: -4px; top: -5px; font-face:verdana; font-weight: bold; font-size:12px; \
				background-color: #d3e5e6; color: #373737; border: 1px none #363636;" + taggable_numtags_padding;


	if (Taggable_sDisplayStyle == 'button')
	{
		Taggable_sButtonInnerHTML = "<img \
			style='border: 1px solid #96a2a3;' id='taggableButton' \
			src='" + Taggable.sDomain + "/img/taggable_button_112x18.png' \
			title='Tag or find Facebook friends on this page' />";
	}
	else if (Taggable_sDisplayStyle == 'text')
	{
		Taggable.sNumberOfTagsCss = "visibility:hidden; position:relative;"
		Taggable.sLinkClass = "taggableText";
	}
	else if (Taggable_sDisplayStyle == 'thumbs')
	{
		Taggable.sNumberOfTagsCss = "visibility:hidden; position:relative;"
		Taggable.bPopWindow = true;
	}

	if(Taggable_bFixedPosition)
	{
		Taggable.sNumberOfTagsCss = "visibility:hidden; position:relative; cursor: pointer; "
		Taggable.sLinkClass = "taggableText";
		Taggable.sButtonContainerCss = "background-image: url(" + Taggable.sDomain + "/img/taggable_rounded_favicon.png); \
			background-repeat: no-repeat; background-position: left; \
			position: fixed; " + Taggable_sFixedLocation + "\
			background-color: #eee; border: 1px solid #eee; font-size: 12px; padding: 0px 0px 0px 20px;"
	}
	
	if(Taggable_bBookmarkletMode)
	{
		if(!document.getElementById('taggableContainer_top')) // make sure not on the page
		{
			// main Taggable div container
			var a = document.createElement('div');
			a.id = 'taggableContainer_top';
	//		a.setAttribute('class','taggableContainer');
			a.style.width = '488px';
			a.style.height = '384px';
	//		a.style.border = '1px solid';
			a.style.background = 'transparent';
			a.style.display = 'none';
			a.style.position = 'absolute';
			a.style.zIndex = '100001';
			
			// close button
			var b = document.createElement('a');
			b.id = 'taggableClose_top';
	//		b.setAttribute('class','taggableClose');
			b.style.backgroundImage = "url(" + Taggable.sDomain + "/img/button_close.png)";
	//		b.href = document.location.href; // may turn this on in the future
			b.href = 'javascript:Taggable.show(0,\'top\');';
			b.style.left = '0px';
			b.style.top = '0px';
			b.style.width = '42px';
			b.style.height = '42px';
			b.style.textDecoration = 'none';
			b.style.overflow = 'hidden';
			b.style.position = 'absolute';
			b.style.zIndex = '100010';
			
			// iframe container
			var c = document.createElement('div');
			c.id = 'taggableFrameHolder_top';
	//		c.setAttribute('class','taggableFrameHolder');
			c.setAttribute('style','border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;');
			c.innerHTML = ' ';
			c.style.width = '474px';
			c.style.height = '370px';
			c.style.background = '#fff';
			c.style.paddingTop = '16px';
			c.style.paddingRight = '12px';
			c.style.paddingBottom = '4px';
			c.style.paddingLeft = '12px';
			c.style.borderTop = '1px solid #FFF';
			c.style.borderRight = '1px solid #9ea3a9';
			c.style.borderBottom = '1px solid #9ea3a9';
			c.style.borderLeft = '1px solid #FFF';
			c.style.display = 'none';
			c.style.position = 'absolute';
			c.style.top = '14px';
			c.style.left = '14px';
			c.style.zIndex = '100009';
			
			// window shade
			var d = document.createElement('div');
			d.id = 'taggableShade_top';
	//		d.setAttribute('class','taggableShade');
			d.setAttribute('style','opacity: 0.5; -moz-opacity:0.50; filter: alpha(opacity=50);')
			d.style.filter = 'alpha(opacity=50)';
			d.setAttribute('onclick','Taggable.show(0,\'top\');');
			d.setAttribute('title','clear Taggable window');
			d.style.zIndex = '100000';
			d.style.backgroundColor = '#000';
			d.style.cursor = 'pointer';
			d.style.position = 'absolute';
			d.style.top = '0px';
			d.style.left = '0px';
			d.style.width = '100%';
			d.style.height = '100%';
			d.innerHTML = ' ';
			a.appendChild(b);
			a.appendChild(c);
			document.body.appendChild(a);
			document.body.appendChild(d);
		}
		Taggable.show(1,'top');
	}
	else
	{

		document.write(" \
			<div id='taggableButtonContainer_"+ this.iButtonCount +"' class='taggableButtonContainer'> \
			 <a class='" + Taggable.sLinkClass + "' href='javascript:Taggable.show(1,"+this.iButtonCount+");'>"+ Taggable_sButtonInnerHTML + "</a> \
			 <span id='taggableNum_"+ this.iButtonCount +"' class='taggableNumText' style='"+Taggable.sNumberOfTagsCss+"' title='Number of people tagged on this page'>0</span> \
			</div> \
			<div class='taggableContainer' id='taggableContainer_"+ this.iButtonCount +"'> \
			  <a class='taggableClose' id='taggableClose_"+ this.iButtonCount +"' href='"+document.location.href+"'></a> \
			  <div class='taggableFrameHolder' id='taggableFrameHolder_"+ this.iButtonCount +"'> </div> \
			</div> \
			<div class='taggableShade' id='taggableShade_"+ this.iButtonCount +"' onclick='Taggable.show(0,"+this.iButtonCount+");'></div> \
		");
	
		var f = document.createElement('script');
		f.setAttribute("type","text/javascript");
		f.setAttribute("src", Taggable.sDomain+"/buttonDetails.php?showNames="+Taggable_bShowNames+
			"&displayStyle="+Taggable_sDisplayStyle+"&action=getCountForButtonJs&buttonCount="+
			this.iButtonCount+"&url="+this.sUrlOfPage);
		document.getElementsByTagName("head")[0].appendChild(f);
	}
}

Taggable.prototype.initOnce = function()
{
	var rules = document.createTextNode(" \
		<style type='text/css'> \
			.taggableLink, .taggableLink a, .taggableLink a:hover { text-decoration: none !important; \
				background-color: transparent !important; } \
			.taggableText { " + Taggable_sTextCss + "} \
			.taggableNumText {" + Taggable.sNumberOfTagsCss + " } \
			.taggableContainer { 	width: 488px; \
						height: 384px; \
						background:transparent; \
						display:none; \
						position:absolute; \
						z-index:100001; } \
						\
			.taggableClose { 	width:42px; \
						height: 42px; \
						background-image:url(" + Taggable.sDomain + "/img/button_close.png); \
						position:absolute; \
						left: 0px; \
						top: 0px; \
						cursor:pointer; \
						text-decoration: none !important; \
						outline-color: -moz-use-text-color; outline-style:none; outline-width:medium; \
						overflow:hidden; \
						z-index:100010; } \
						\
			.taggableClose, .taggableClose a, .taggableClose a:hover { text-decoration: none; background-color: transparent !important;}  \
						\
			.taggableFrameHolder {  width: 474px; \
						height: 370px; \
						background: #fff; \
						padding: 16px 12px 4px 12px; \
						border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; \
						border: 1px solid #FFF #9ea3a9 #9ea3a9 #FFF; \
						position:absolute; \
						top: 14px; \
						left: 14px; \
						display:none; \
						z-index:100009; } \
						\
			.taggableShade { 	width:100%; \
						height:100%; \
						background-color: #000; \
						opacity: 0.5; -moz-opacity:0.50; filter: alpha(opacity=50); \
						display:none; \
						position:fixed; \
						top:0; \
						left:0; \
						z-index:100000; } \
			.taggableButtonContainer { " + Taggable.sButtonContainerCss + "} \
		</style> \
	");

	var style = document.createElement('style');
	style.type = 'text/css';
	if(style.styleSheet)
	    style.styleSheet.cssText = rules.nodeValue;
	else
		style.appendChild(rules);
	document.getElementsByTagName('head')[0].appendChild(style);
}

Taggable.displayEl = function(el)
{
	el.style.display = 'inline';
	el.style.visibility = 'visible';
}
Taggable.getWinTop = function()
{
	return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement && document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;
}
Taggable.displayCenteredDiv = function(el)
{
	el.style.display = 'inline';
	var iTopOffset = 40;
	var iLeftAdjustment = 0;
	if(Taggable.getWindowSize('h') < 500)
		iTopOffset = 15;
	if(document.location.href.indexOf('twitvid') > -1 && !Taggable_bBookmarkletMode)
	{
		if(navigator.platform == 'Win32')
			iLeftAdjustment = 0; // works for firefox pc
		else
			iLeftAdjustment = -200;
	}
		
	el.style.top = (Taggable.getWinTop() + iTopOffset) + 'px';
	var iWinWidth = Taggable.getWindowSize('w');
	var iDivWidth = (el.offsetWidth == 0) ? 225 : el.offsetWidth;
	el.style.left= Math.round(Math.max(1, (iWinWidth-iDivWidth)/2)) + iLeftAdjustment +'px';
	el.style.visibility = 'visible';
}

Taggable.getWindowSize = function (sType)
{
	var myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' )
	{
	  //Non-IE
	  myWidth = window.innerWidth;
	  myHeight = window.innerHeight;
	}
	else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
	{
	  //IE 6+ in 'standards compliant mode'
	  myWidth = document.documentElement.clientWidth;
	  myHeight = document.documentElement.clientHeight;
	}
	else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
	{
	  //IE 4 compatible
	  myWidth = document.body.clientWidth;
	  myHeight = document.body.clientHeight;
	}
	if(sType == 'h')
	      return myHeight;
	else
	      return myWidth;
}

Taggable.show = function(bShow, iButtonCount)
{
//	if(iButtonCount == 'top') // top is bookmarklet mode
		elButton = aTaggableButtons[iButtonCount];
		
	var container = document.getElementById('taggableContainer_'+iButtonCount);
	frameHolder = document.getElementById('taggableFrameHolder_'+iButtonCount);
	var frame = document.getElementById('taggableIframe_'+iButtonCount);
	var display='inline';
	if(Taggable.bPopWindow)
	{
	//	setPrefInCookie('inPopup', 1);
		w=window.open(Taggable.sDomain+'/url/'+elButton.sUrlOfPage, 'taggable',
			'width=800,height=500,status=1,toolbar=0,menubar=0,location=1,scrollbars=1,resizable=1');
		w.focus();
	}
	else
	{
		if (bShow)
		{
			if (!frame)
			{
				frame = document.createElement('iframe');
				frame.setAttribute("id", "taggableIframe_"+iButtonCount);
				frame.setAttribute("frameBorder","0");
				frame.setAttribute("marginwidth","0");
				frame.setAttribute("marginheight","0");
				frame.setAttribute("width","450");
				frame.setAttribute("height","350");
				frame.setAttribute("scrolling","no");
				var sUrlOfPage = (elButton) ? elButton.sUrlOfPage : Taggable_sUrlOfPage;
				frame.setAttribute("src", Taggable.sDomain+"/buttonDetails.php?url="+sUrlOfPage);
				frame.setAttribute("style",' width:450px; height:350px;');
				document.getElementById('taggableFrameHolder_'+iButtonCount).appendChild(frame);
			}
			Taggable.displayCenteredDiv(container);
			if(Taggable_bLoaded) // this may not be needed with the new release
			{
//				frameHolder.style.position = 'absolute';
//				frameHolder.style.left = '14px';
			}
			
			Taggable.displayEl(frameHolder);
		}
		else
		{
			display='none';
			frameHolder.style.display=display;
			container.style.display=display;
		}
		elShade = document.getElementById('taggableShade_'+iButtonCount);
		elShade.style.display=display;
	}
}

Taggable.createButton = function()
{
	new Taggable();
}

// end Taggable

// run time!
Taggable.createButton();


/*
if (typeof window.onload != 'function')
{
	window.onload = Taggable.createButton;
}
else
{
	var oldonload = window.onload;
	window.onload = function()
	{
		oldonload();
		Taggable.createButton();
	}
}
*/