function SA(){
	this.x = 0;
	this.y = 0;
	this.direction = "";
	this.version = 999;
	this.timerId = 0;
	this.timeout = 1500;
	this.DEFAULT_LEN = 27;
	this.DEFAULT_MIN_HEIGHT = 815;
	this.MAX_ON_TOP = 7;
	this.AD_HIGHT = 103;
}

var supA = new SA();

supA.randomize = function() {
	this.a.sort(function(){
		return (Math.round(Math.random())-0.5); 
	});
	
}



supA.getLength = function(){
	controller.main.style.minHeight = this.DEFAULT_MIN_HEIGHT + 'px';

	if (this.a.length == this.DEFAULT_LEN)
		return this.DEFAULT_LEN;
	
	if (this.a.length < this.DEFAULT_LEN){
		var newSize = Math.max(this.DEFAULT_MIN_HEIGHT - (Math.floor((this.DEFAULT_LEN - this.a.length) / 2) * this.AD_HIGHT),600);
		controller.main.style.minHeight = newSize + "px";
		return this.a.length;
	}
	
	if (this.a.length > this.DEFAULT_LEN && (controller.main.offsetHeight > this.DEFAULT_MIN_HEIGHT || userInfo.isOpen)){
		var h = controller.main.offsetHeight - this.DEFAULT_MIN_HEIGHT;
		if (userInfo.isOpen) h += userInfo.OPEN_HEIGHT;
		var extra = Math.ceil(h/this.AD_HIGHT);
		var minHieght = this.DEFAULT_MIN_HEIGHT + (extra * this.AD_HIGHT);
		if (userInfo.isOpen) minHieght -= userInfo.OPEN_HEIGHT;
		controller.main.style.minHeight = minHieght + 'px';
		return  Math.min(this.DEFAULT_LEN + (extra * 2), this.a.length);
	}
	
	return this.DEFAULT_LEN;
	
	
	

}

supA.print = function(){
	if (navigator.appVersion.indexOf("MSIE") != -1)          
		this.version = parseFloat(navigator.appVersion.split("MSIE")[1]);

	this.sa = document.getElementById("sa");
	document.onresize = this.close();
	
	this.randomize();
	this.randomize();
	this.randomize();
	
	var aSlot = document.getElementById("a0");
	var i;
	
	var length = this.getLength();

	aSlot.innerHTML = "";
	for (i=0;i<length;i++){
		if (i == this.MAX_ON_TOP)
			break;
		if (i == 0)
			this.a[i].dir = 'sNW';
		else if (i < 3)
			this.a[i].dir = 'sNNW';
		else if (i == this.MAX_ON_TOP - 1)
			this.a[i].dir = 'sNE';
		else if (i >=3)
			this.a[i].dir = 'sNNE';
			
		aSlot.innerHTML += this.formatA(i);
	}
	
	if (length < this.MAX_ON_TOP)
		return;
		
	var leftLen = Math.round((length - this.MAX_ON_TOP)/2);
	aSlot = document.getElementById("a1");
	aSlot.innerHTML = "";
	for (i=this.MAX_ON_TOP; i < this.MAX_ON_TOP+leftLen; i++){
		this.a[i].dir = 'sW';
		aSlot.innerHTML += this.formatA(i);
	}
	
	aSlot = document.getElementById("a2");
	aSlot.innerHTML = "";
	for (i; i < length; i++){
		this.a[i].dir = 'sE';
		aSlot.innerHTML += this.formatA(i);
	}
	
}

supA.findPos = function findPos(obj) {
	
	this.x = obj.offsetLeft;
	this.y = obj.offsetTop;
	var offsetParent = obj.offsetParent;
    	while (offsetParent) {
      		this.x += offsetParent.offsetLeft;
      		this.y += offsetParent.offsetTop;
      		offsetParent = offsetParent.offsetParent;
    	}
	
}

supA.on = function(img){
	
	if (this.version < 7)
		return;
	
	this.sa.innerHTML = "";
	this.findPos(img);
	
	this.direction = this.a[img.id].dir;

	this.sa.style.top = this.y-13 + "px";
	if (this.direction == "sE" || this.direction == "sNE")
		this.sa.style.left = this.x-191 + "px";
	else if (this.direction == "sNNE")
		this.sa.style.left = this.x-33 + "px";
	else this.sa.style.left = this.x-12 + "px";

	
	if (this.direction == "sW" || this.direction == "sE"){
		this.sa.style.width = "361px";
		this.sa.style.height = "188px";
		
	}

	if (this.direction == "sNW" || this.direction == "sNE"){
		this.sa.style.width = "361px";
		this.sa.style.height = "294px";
		
	}

	if (this.direction == "sNNW" || this.direction == "sNNE"){
		this.sa.style.width = "200px";
		this.sa.style.height = "294px";
		
	}

	this.sa.style.backgroundImage = "url(images/" + this.direction + ".png)";
	this.sa.style.visibility = 'visible';
	this.printSA(img.id);
	
	this.timerId = setTimeout("supA.close()", this.timeout);

		
}

supA.edge = function(e){
	
	
	if (!e) var e = window.event;
	
	clearTimeout(this.timerId);
	
	var L = e.clientX-this.x;
	var T = e.clientY-this.y;

	if ((this.direction == "sNW" || this.direction == "sW") && L < 150 && T > 120){
		this.close();
		return;
	}

	if (this.direction == "sNW" && L > 180 && T < 100){
		this.close();
		return;
	}

	if ((this.direction == "sNE" || this.direction == "sE") && L > 0 && T > 120){
		this.close();
		return;
	}

	if (this.direction == "sNE" && L < -30 && T < 100){
		this.close();
		return;
	}

	this.timerId = setTimeout("supA.close()", this.timeout);

}


supA.close = function(){
	clearTimeout(this.timerId);
	this.sa.style.visibility = 'hidden';
}



supA.off = function(e){
	
	if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg && reltg != tg && reltg.nodeName != 'BODY'){
		reltg= reltg.parentNode
	}
	
	if (reltg== tg) return;
	
	this.close();
}

supA.formatA = function(index,top,left) {
	if (!this.a[index].URL && this.a[index].etsy)
		this.a[index].URL = "http://www.etsy.com/shop/" + this.a[index].etsy;
	if (!this.a[index].image && this.a[index].etsy)
		this.a[index].image = this.a[index].etsy + '.jpg';
		
	var aHTML = '<a ';
	
	aHTML += 'href="' + this.a[index].URL + '" target="_blank"><img ';
	
	
	if (top && left){
		aHTML += 'style="top: ' + top + 'px; left: ' + left + 'px" ';
	}
	
	else if (this.a[index].listingId){
		aHTML += 'id="' + index + '" onmouseover="supA.on(this)"';
	}
	
	aHTML += ' src="http://craftopolis.com/a/' + this.a[index].image + '" alt="' + this.a[index].URL + '" /></a>';
	return aHTML;
}



supA.formatListing = function(index,top,left,right){
	var aHTML = '<a href ="http://www.etsy.com/listing/' +  this.a[index].listingId + '" target="_blank"><img class="listing" style="top: ' + top + 'px; left: ' + left + 'px" src = "' + this.a[index].listingURL + '" alt="' + this.a[index].listingTitle + '" /></a>';
	
	if (this.version == 7)
		top += 9;
		
	left = left+3;
	aHTML += '<p style=\"top: ' + (top+131) + 'px; left: ' + left + 'px\">' + this.a[index].listingTitle + '</p>';
	aHTML += '<p style=\"top: ' + (top+141) + 'px; left: ' + left + 'px\">' + this.a[index].etsy + '</p>';
	aHTML += '<p style=\"top: ' + (top+141) + 'px; right: ' + right + 'px\">' + this.a[index].price + '</p>';
	return aHTML;
}

supA.printSA = function(index) {
	
	var top = 10;
	var left;
	var right;
	var listingLeft;
	var listingTop;
	
	switch (this.direction){
	case 'sNW':
	case 'sW':
	case 'sNNW':
		left = 9;
		right = 17;
		break;	
	}
	
	switch (this.direction){
	case 'sNE':
		left = 188;
		right = 177;
		listingTop = 119;
		listingLeft = 10;
		break;
	case 'sNNE':
		left = 30
		right = 14;
		listingTop = 119;
		listingLeft = 10;
		break;
	case 'sNW':
		listingTop = 119;
		listingLeft = 170;
		break;
	case 'sW':
		listingTop = top;
		listingLeft = 170;
		break;
	case 'sNNW':
		listingTop = 119;
		listingLeft = 8;
		break;
	case 'sE':
		left = 188
		right = 177;
		listingTop = top;
		listingLeft = 10;
		break;
	}
	
	this.sa.innerHTML = this.formatA(index,top,left);
	this.sa.innerHTML += this.formatListing(index,listingTop,listingLeft,right);
	
}