offOpac = 50;

window.onload = function() {
    
	// find thumbnails first
	var thumbs = document.getElementById( 'thumbs' );
	if(thumbs) {
		var imgs = thumbs.getElementsByTagName( 'img' );
		for (var i=0;i<imgs.length;i++) {
			o = imgs[i];
			if (o.id!='active') {
				o.onmouseover = imgOver;
				o.onmouseout = imgOut;
			}
		}
	}
    // fix pages
    var $name = new Array('outdoor', 'travel', 'feature');
    while ($name.length) {
        // get ul li items
        $n = $name.pop();
        $ulNode = document.getElementById( $n+'Items' );
        if($ulNode) {
	$li = $ulNode.getElementsByTagName( 'li' );
        $i = $li.length;
        while($i--) {  
            if($li[$i]['className'].indexOf('active') != -1) {
                // find number
                $arr = $li[$i]['className'].split('page');
                // call javascript function
                doNavPress($n, $arr[$arr.length-1]);
                // exit loop
                $i = 0;
            }
        }
	}
    }
}
function imgOver() {
	setOpacity(this, 100);
}
function imgOut() {
	setOpacity(this, offOpac);
}
function setOpacity(obj, opacity) { 
    
    object = obj.style;
    
    // If it's 100, set it to 99 for Firefox.
    
    if (navigator.userAgent.indexOf('Firefox') != -1) {
        if (opacity == 100) { opacity = 99.999; } // This is majorly retarded
    }
    
    // Multi-browser opacity setting
    
    object.filter = 'alpha(opacity=' + opacity + ')'; // IE/Win
    object.KhtmlOpacity = (opacity / 100);            // Safari 1.1 or lower, Konqueror
    object.MozOpacity = (opacity / 100);              // Older Mozilla+Firefox
    object.opacity = (opacity / 100);                 // Safari 1.2, Firefox+Mozilla
}

/**
* doNavPress
 *
 * Updates items for navigation, perfoming a paging function
 *
 * @param  string     $ul      id of UL element
 * @param  string     $page    'page' to make active
 * @return null
 * @access public
 */
function doNavPress($ul, $page) {
    // update ul li items
    $ulNode = document.getElementById( $ul+'Items' );
    $li = $ulNode.getElementsByTagName( 'li' );
    $i = $li.length;
    while($i--) {  
        if($li[$i]['className'].indexOf('page'+$page) != -1) {
            $li[$i].style['display'] = 'block'; 
        } else {
            $li[$i].style['display'] = 'none'; 
        }
    }
    // update numbers along the bottom
    $ulNode = document.getElementById( $ul+'Numbers' );
    if($ulNode) {
		$li = $ulNode.getElementsByTagName( 'li' );
		$i = $li.length;
		while($i--) {
			if($i==$page-1) {
				$li[$i]['className'] = 'active';
			} else {
				$li[$i]['className'] = '';
			}
		}
    }
}