var Dom = YAHOO.util.Dom;
var oPanel;
function initGCA () {
	
	oPanel = new YAHOO.widget.Panel("overlayPanel",   
	            { 
	              close:true,  
	              draggable:false,  
	              zindex:9999, 
	              modal:true, 
	              visible:false 
	            }  
        ); 
	oPanel.render();
	//oPanel.hideEvent.subscribe(resetPanel);
	oPanel.showEvent.subscribe(resetPanel);
	
	//create div for thumb mouseover
	var moThumb = document.createElement('div');
	moThumb.setAttribute('id','thumbDetail');
	document.body.appendChild(moThumb);
	Dom.addClass(moThumb,'thumbOn');
	Dom.addClass(moThumb,'hidden');
	
	moThumb.onmouseover = function() {
		Dom.removeClass(this,'hidden')	;
	}
	
	moThumb.onmouseout = function() {
		Dom.addClass(this,'hidden');
	}
	
	var thumbs = Dom.getElementsByClassName('thumb','div','thumbnails');
	if (thumbs) {
		for (var i=0; i < thumbs.length; i++) {
			thumbs[i].onmouseover = function() {
				moThumb.innerHTML = this.innerHTML;	
				Dom.removeClass(moThumb,'hidden');
				var xPos = Dom.getX(this);
				var yPos = Dom.getY(this);
				Dom.setX(moThumb,xPos-9);
				Dom.setY(moThumb,yPos-9);
			}
			
			thumbs[i].onmouseout = function() {
				Dom.addClass(moThumb,'hidden');	
			}
		} // end for
	} // end if thumbs
	
	
}

function enlargeImage(imgPath) {
	oPanel.setBody('<img src="'+imgPath+'"/ >');
	oPanel.center();
	oPanel.show();
}

function resetPanel() {
	oPanel.center();
}

function addMarker(imgdata) {
	//var baseIcon = new GIcon(G_DEFAULT_ICON);
	//baseIcon.shadow = "/asset/images/shadow-art.png";
	//baseIcon.iconSize = new GSize(22, 27);
	//baseIcon.shadowSize = new GSize(42, 35);
	//baseIcon.iconAnchor = new GPoint(9, 34);
	//baseIcon.infoWindowAnchor = new GPoint(9, 2);

	//baseIcon.image = "/asset/images/single_digit.png";
	//markerOptions = {icon:baseIcon};
	var marker = new GMarker(new GLatLng(imgdata.lat,imgdata.lng));
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(markerHTML(imgdata));											 
	});
	return marker;		
} //end add marker

function markerHTML(imgdata) {
	var thumbHTML = '';
	thumbHTML += '<table cellpadding="0" cellspacing="0" border="0" width="250" class="markerInfo"><tr>';
	thumbHTML += '<td valign="top" width="140"><img src="asset/art/thumb/thumb_'+imgdata.filename+'.jpg" height="80" width="137" /><br><a href="javascript:void(0)" onclick="enlargeImage(\'asset/art/'+imgdata.filename+'.jpg\')" class="enlargeLink">Enlarge</a><img src="asset/art/'+imgdata.filename+'.jpg" width="1" height="1" style="display:none;" /></td>';
	thumbHTML += '<td valign="top"><div class="description">'+imgdata.description+'</div>';
	thumbHTML += '<div class="artist"><span class="txtLight txtSmall">Artist:</span><br /><a href="collection.php?artistid='+imgdata.artist+'">'+imgdata.name+'</a></div>';
	thumbHTML += '</td></tr></table>';
	return thumbHTML;
}

function mapThumb(imgdata) {
	var thumbHTML = '';
	thumbHTML += '<div class="thumb">';
	thumbHTML += '<div class="links"><a href="imgdetail.php?imgid='+imgdata.imgid+'&artistid='+imgdata.artist+'" class="map">MAP</a></div>';
	thumbHTML += '<div class="img"><img src="asset/art/thumb/thumb_'+imgdata.filename+'.jpg" height="80" width="137" /></div>';
	thumbHTML += '<div class="description">'+imgdata.description+'</div>';
	thumbHTML += '<div class="artist"><span class="txtLight txtSmall">Artist:</span><br /><a href="artists.php?artistid='+imgdata.artist+'">'+imgdata.name+'</a></div>';
	thumbHTML += '<div class="region"><span class="txtLight txtSmall">Region:</span><br /><a href="#">Region Name</a></div>';
	thumbHTML += '</div>';
	return thumbHTML;
}


YAHOO.util.Event.onDOMReady(initGCA);