var $;

    function initImageView( ) {

            name = jQuery('div:first', this).attr('class');
            
            var imageBar = $("imageBar["+name+"]");
                if ( imageBar === null ) return false;
            var container = $("imageViewContainer["+name+"]");
            var items = imageBar.getElementsByTagName("div");
            var num = items.length;
            imageBar.className = 'imageBar';
            container.className = 'imageViewContainer';
            var numberBar = '<ul id="numberBar['+name+']" class="numberBar">';
            for(var i=1;i<=num;i++) {
                    if(i==1) $(name+'['+i+']').className = 'imageLayerShow';
                    else $(name+'['+i+']').className = 'imageLayerHidden';
                    numberBar += '<a href="javascript:showImage(\''+name+'\','+i+');" onclick="showImage(\''+name+'\','+i+');"><li>'+i+'</li></a>';
            }
            numberBar += '</ul>';
            var containerContent = container.innerHTML;
            container.innerHTML = containerContent+numberBar;
    }

    function showImage(name,image) {
        
            var imageBar = $("imageBar["+name+"]");
            var items = imageBar.getElementsByTagName("div");
            var num = items.length;
            for(var i=1;i<=num;i++) {
                    $(name+'['+i+']').className = 'imageLayerHidden';
            }
            $(name+'['+image+']').className = 'imageLayerShow';
      }



var init = function () {
    imagecontainers = jQuery('.big');
        if ( imagecontainers.length ){
            $=function(id){return document.getElementById(id);};
            imagecontainers.each(initImageView);
        }
}

jQuery(document).ready(init);

//function initImageView(name) {
//	var imageBar = $("imageBar["+name+"]");
//	var container = $("imageViewContainer["+name+"]");
//	var items = imageBar.getElementsByTagName("div");
//	var num = items.length;
//	imageBar.className = 'imageBar';
//	container.className = 'imageViewContainer';
//	var numberBar = '<ul id="numberBar['+name+']" class="numberBar">';
//	for(var i=1;i<=num;i++) {
//		if(i==1) $(name+'['+i+']').className = 'imageLayerShow';
//		else $(name+'['+i+']').className = 'imageLayerHidden';
//		numberBar += '<a href="javascript:showImage(\''+name+'\','+i+');" onclick="showImage(\''+name+'\','+i+');"><li>'+i+'</li></a>';
//	}
//	numberBar += '</ul>';
//	var containerContent = container.innerHTML;
//	container.innerHTML = containerContent+numberBar;
//}
//
//function showImage(name,image) {
//	var imageBar = $("imageBar["+name+"]");
//	var items = imageBar.getElementsByTagName("div");
//	var num = items.length;
//	for(var i=1;i<=num;i++) {
//		$(name+'['+i+']').className = 'imageLayerHidden';
//	}
//	$(name+'['+image+']').className = 'imageLayerShow';
//}