window.addEvent('domready',function() {
									
	//smooooooth scrolling enabled
	//new SmoothScroll({ options }, window);
	new SmoothScroll({ duration:300 }, window); //300 milliseconds to get there									
	
	// css has display hidden, turn display block to make JS see the elem
	$$('.hidden').setStyle('display','block'); 
	$$('.slideWrpGri').each(function(element, index) {

		var title = element.getElement('.titleGri2'); // using class getting the each element
		var title_more = element.getElement('.more');
		var title_anchor = element.getElement('.titleName2');
		var info  = element.getElement('.hidden');
		
		// CHECKING FOR MORE LINK AND COLLAPSED INFO
		// if($chk(title_more) || $chk(info)) {
		
		// CHECKING FOR MORE LINK. IF THERE IS MORE LINK, THEN EXPAND.
		if($chk(title_more)) {
			var thisSlide = new Fx.Slide(info); // applying Slide
			thisSlide.hide(); // onload hide all the elements
			
			// writting this function to avoid duplicate code
			var slidThis = function() {
				if(title_anchor.hasClass('inView')) {
					$('griIndex').setStyle('padding-bottom',0); // remove the extraSpace in the bottom from the body
					thisSlide.slideOut(); // hide the mssg
					title_anchor.removeClass('inView'); // remove the ON state class
					title_more.setStyle('visibility','visible'); // show the more link
					// title.removeClass('inview'); // ON state class for the parent of the title				
				} else {
					$('griIndex').setStyle('padding-bottom',0); // remove the extraSpace in the bottom from the body
					thisSlide.slideIn(); // show the mssg
					title_anchor.addClass('inView'); // add ON state class
					title_more.setStyle('visibility','hidden'); // hide the more link
					// title.addClass('inview'); // ON state class for the parent of the title
				}			
			} // slideThis funt
			
			// Title
			title.addEvent('click',function(e){ // calling each title element and creating a click function
				e.stop();
				slidThis();
			}); // title click
			
			// Title 2 more link
			title_more.addEvent('click',function(e){ // calling each title more element and creating a click function
				e.stop();
				slidThis();
			}); // title click
		} // if chk title_more
		else {
			// alert ('empty:'+index);
		}
	}); // .subSlideWrapper
// alert ('should happen first');

}); // DOM


// Call this function onload to show the clicked twistee

var test_chk = false;
function showOnload(ary_key) {
	// alert (ary_key);
	
	$$('.slideWrpGri').each(function(element, index) {
		if(ary_key==index) {
			// alert ('s u found me');
			var title = element.getElement('.titleGri2'); // using class getting the each element
			var title_more = element.getElement('.more');
			var title_anchor = element.getElement('.titleName2');
			var info  = element.getElement('.hidden');
			
			if($chk(title_more)) {
				var thisSlide = new Fx.Slide(info); // applying Slide
	 			// alert ('should happen second');
	 			thisSlide.slideIn(); // onload hide all the elements
				title_anchor.addClass('inView'); // add ON state class
				title_more.setStyle('visibility','hidden'); // hide the more link
			} 
	 		
	 		// using delay with out that its not scrolling to the element, because it so preliminary to find the real height of the window
	 		testScroll.delay(1000,this,title); 
	 		test_chk = true;
		} // if ary_key == index
		
	}); // slideWrpGri

	if(test_chk==false) {
		// alert ('address the slow loading problem');
	}	
} // showOnload funct

var myWidth = 0, myHeight = 0;
function alertSize() {
 // 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'
    // this one works in all the browsers IE7, IE6, FF2, FF3, GoogleC, Safari

    // GIVES THE WHOLE VIEWABLE AREA OF THE BROWSER

 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;
 }
 // window.alert( 'Width = ' + myWidth );
 // window.alert( 'Height = ' + myHeight );
}


function testScroll(el) {
	// before it scrolls add some extra space in the bottom
	alertSize();
	extraSpace = myHeight+(myHeight*.20);
	extraSpace = extraSpace+'px';
	// alert (extraSpace);
	// comment below line to remove extra space at the bottom
	$('griIndex').setStyle('padding-bottom',extraSpace);
	// comment below line to remove scrolling
	var myFx = new Fx.Scroll(window);
	myFx.toElement(el);
} // testScroll