//<![CDATA[
// MY OWN WAY OF DOING THIS: based on: http://www.theurer.cc/blog/2005/12/15/web-services-json-dump-your-proxy/
// ********************* START OF JSONscriptRequest
 function JSONscriptRequest(fullUrl) {
  // REST request path
  this.fullUrl = fullUrl;
  // Keep IE from caching requests
  this.noCacheIE = '&noCacheIE=' + (new Date()).getTime();
  // Get the DOM location to put the script tag
  this.headLoc = document.getElementsByTagName("head").item(0);
  // Generate a unique script tag id
  this.scriptId = 'YJscriptId' + JSONscriptRequest.scriptCounter++;
}

// Static script ID counter
JSONscriptRequest.scriptCounter = 1;

// buildScriptTag method
JSONscriptRequest.prototype.buildScriptTag = function () {
  // Create the script tag
  this.scriptObj = document.createElement("script");

  // Add script object attributes
  this.scriptObj.setAttribute("type", "text/javascript");
  this.scriptObj.setAttribute("src", this.fullUrl);// + this.noCacheIE);  MAY WANT TO ADD THAT LATER
  this.scriptObj.setAttribute("id", this.scriptId);
}

// removeScriptTag method
JSONscriptRequest.prototype.removeScriptTag = function () {
  // Destroy the script tag
  this.headLoc.removeChild(this.scriptObj);
}

// addScriptTag method
JSONscriptRequest.prototype.addScriptTag = function () {
  // Create the script tag
  this.headLoc.appendChild(this.scriptObj);
}
// ****************************** END OF JSONscriptRequest

// FADE EFFECT
var TimeToFade = 1000.0;

function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
    if(element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1')
    {
      element.FadeState = 2;
    }
    else
    {
      element.FadeState = -2;
    }
  }
   
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  }  
}

function animateFade(lastTick, eid)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

// INITIALIZE
function Listing() {
	this.title = null;
	this.imageURL = null;
	this.URL = null;
	this.price = null;
	this.store = null;	
}

function Listing(atitle, aimageURL250, aimageURL125, aURL, aprice, astore) {
	this.title = atitle;
	this.imageURL250 = aimageURL250;
	this.imageURL125 = aimageURL125;
	this.URL = aURL;
	//alert("The Price: " + aprice + "The Lenght: " + aprice.length);
	this.price = aprice.toFixed(2);
	this.store = astore;	
}

var adArray = [];
var adIndex = 0; // Starts at the big goose-egg now, later random.
var adSize = 250;

function updateElements(index) {
	var title = document.getElementById('adtop');
	fontSize = 16;
	pricefontSize = 12;
	var titleText = adArray[index].title;
	if (adArray[index].title.length < 20) {
		fontSize = 23;
	}
	if (adArray[index].title.length > 33) {
		fontSize = 12;
	}

	if (adSize == 125) {
		fontSize = 10;
		pricefontSize = 10;
		if (adArray[index].title.length < 20) {
			fontSize = 12;
		}
		if (adArray[index].title.length > 23) {
			fontSize = 10;
			titleText = titleText.substr(0,20);
			titleText = titleText + '...'
		}
	}
	lineHeight = fontSize-2;
	imageURL = adArray[index].imageURL250;
	if (adSize == 125) {
		imageURL = adArray[index].imageURL125;
	}
	title.innerHTML= '<a href ="' + adArray[index].URL + '" style="color:#444;text-decoration:none; font-size:' + fontSize + 'px">' + titleText + '</a>';
	var picture = document.getElementById('admid');
	picture.innerHTML='<a href ="' + adArray[index].URL + '" style="text-decoration:none;margin:0;padding:0"><img style="border:none" src="' + imageURL + '" /></a>'
	var price = document.getElementById('adbot');
	priceHTML = '<a href ="' + adArray[index].URL + '" style="color:#444;text-decoration:none;font-size:' + pricefontSize + 'px;line-spacing:1px">' + adArray[index].store + '.etsy.com $' + adArray[index].price + '</a>';
	if (adSize == 250) {
		priceHTML = 'Available at: ' + priceHTML;	
	}
	price.innerHTML= priceHTML;
}
function buildDiv(size) {

	var width = 250;
	var topHeight = 50;
	var imgHeight = 125;
	var imgWidth = 155;
	var arrowWidthLeft = 47
	var arrowWidthRight = 48
	var bottomHeight = 75
	if (size == 125) {
		width = 125;
		topHeight = 25;
		imgHeight = 75;
		imgWidth = 75;
		arrowWidthLeft = 25;
		arrowWidthRight = 25;
		bottomHeight = 25;
	}
	var textblock = document.getElementById("myAdDiv");	
	//var textblock=document.createElement("div");
	//textblock.setAttribute("id", 'divName');
	//textblock.style.opacity = opacity;
	textblock.innerHTML = '<table width="' + size + '" cellpadding="0" cellspacing="0" border="0" style="background-color:white;text-align: left;margin:0;padding:0;border: 1px solid #EEEEEE;font-family: Times, Tahoma, Geneva, Arial, Helvetica, sans-serif;"> \
		<tr height=' + topHeight + ' > \
			<td id="adtop" colspan="3" align="center" style="text-decoration:none;font-weight:bold">&nbsp;</td> \
		</tr> \
		<tr height=' + imgHeight + '> \
			<td width=' + arrowWidthLeft + ' onclick="adArrowClick(1);"><img src="http://www.bentti.com/images/leftArrow' + size + '.PNG"/></td> \
			<td id="admid" width=' + imgWidth + '></td> \
			<td width=' + arrowWidthRight + ' style="cursor:pointer" onclick="adArrowClick(-1);"><img src="http://www.bentti.com/images/rightArrow' + size + '.PNG"/></td> \
		</tr> \
		<tr height=' + bottomHeight + '> \
			<td id="adbot" align="center" colspan="3">&nbsp;</td> \
		</tr>';
	return textblock;
}

function adArrowClick(shift) {
	var newPos = adIndex + shift;
	if (newPos < 0) {
		newPos = adArray.length -1;
	}
	if (newPos == adArray.length) {
		newPos = 0;
	}
	adIndex = newPos;
	updateElements(newPos);
}

images = new Array(); // hold preloaded images
function ad_results(jData) {
//alert("jData" + jData);
    if (jData == null) {
      alert("There was a problem parsing search results.");
      return;
    }
    for (i = 0;i<jData.length;i++) {
    	adArray[i] = new Listing(jData[i].listing.title,jData[i].listing.image_url_155x125,jData[i].listing.image_url_75x75,jData[i].listing.url,jData[i].listing.price,jData[i].listing.user_name);
    	imageObj = new Image();
    	imageObj.src = adArray[i].imageURL;
    }
    updateElements(0);
}

// THIS IS WHAT IS CALLED FROM THE HTML
	function getAdData(userId) {

	    request = 'http://www.bentti.com/listings/featured/' + userId + '.json';
	//alert('getting that data: ' + request);
	    aObj = new JSONscriptRequest(request);
	    // Build the script tag
	    aObj.buildScriptTag();
	    // Execute (add) the script tag
	    aObj.addScriptTag();
	//alert('DONE getting that data');
	}

function genWidget(adId) {
	var myDiv = document.getElementById("myAdDiv");
	//myDiv.appendChild(buildDiv(adSize));
	buildDiv(adSize);
	getAdData(adId);
}

if (window.store_id !== undefined) {
	document.writeln("<div style='display:inline;clear:none' id='myAdDiv'></div>");
	document.close();
	adSize = size_id;
	genWidget(store_id);
}
//]]>