// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// HOW TO USE
// ----------------------------------------------
//
//  <div class="CMN_SlideTip_Question" 
//      onmouseover="ready(1,this)" 
//	    onmouseout="ready(2,this)" 
//      title="Click to expand and contract">Masriadi: Black is my last weapon</div>
//      
//      <div class="CMN_SlideTip_Answer">
//          <div>
//              The exhibition desires to evoke and present a striking portrait of Masriadi 
//              through four thematic sections, each providing a different angle to understand 
//              different façades of Masriadi's personality, his commitment to painting and the 
//              formal and thematic aspects in his works. Seen together, the exhibition sections 
//              will render an intimate and striking portrait of the artist's life, works and 
//              practice in painting over the last decade.
//              <a href="http://www.singart.com/8qsam/masriadi.html" target="_blank" >read more</a>
//          </div>
//      </div>
//
// ----------------------------------------------
// STYLE SHEET NEEDED
// ----------------------------------------------
// .CMN_SlideTip_Question { CURSOR: pointer; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 12px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 5px; OVERFLOW: hidden; }
// .CMN_SlideTip_Answer { BORDER: #cccccc 1px dotted; PADDING-RIGHT: 10px; MARGIN-TOP: 10px; PADDING-LEFT: 10px; VISIBILITY: hidden; MARGIN-BOTTOM: 30px; PADDING-BOTTOM: 5px; OVERFLOW: hidden; POSITION: relative; }
// .CMN_SlideTip_Answer_Content { POSITION: relative; }
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

var dhtmlgoodies_slideSpeed = 250;	// Higher value = faster
var dhtmlgoodies_timer = 7;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
var highlighting="";

function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
	//alert(answerDiv.innerText);
	highlighting = answerDiv;

	objectIdToSlideDown = false;
	
	if(!answerDiv.style.display || answerDiv.style.display=='none'){		
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){	
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{
			
			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';
			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}	
}

function slideContent(inputId,direction)
{
	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
	}else{
		if(height<=1){
			obj.style.display='none'; 
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
			}else{
				dhtmlgoodies_slideInProgress = false;
			}
		}
		else
		{
		    // Commenting the next line will allow multiple views to be loaded
			//dhtmlgoodies_activeId = inputId;
			dhtmlgoodies_slideInProgress = false;
		}
	}
}

function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='CMN_SlideTip_Question'){
			divs[no].onclick = showHideContent;
			//divs[no].onmouseover = showHideContent;
			divs[no].id = 'dhtmlgoodies_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'dhtmlgoodies_a'+divCounter;	
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
			contentDiv.className='CMN_SlideTip_Answer_Content';
			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}		
	}	
}

 function ready(o1,o2){
 	if (o1==1){
		o2.style.borderBottom="1px #000000 dotted";
	} else {
		o2.style.borderBottom="1px #CCCCCC dotted";
	}
 }

window.onload = initShowHideDivs;