var odEle,imgContainer,displayImg;
var imgEleList;
var curImgIndex = 0;
var hiddenImgIndex = 0;
var hiddenOpacity,showOpacity;
var timeId = 0;
var nonIeOpacityOffset = 0.05;
var ieOpacityffset = nonIeOpacityOffset * 200;
var currentWinPos = null;
var initImgContainerSize = new Array();

function clearChangeOpacity() {
	window.clearInterval( timeId );
	timeId = 0;
}

function resetImg2None(imgIndex) {
	with( imgEleList[imgIndex].style ) {
		if( typeof opacity != 'undefined' ) opacity = 1;
		else if( typeof filter != 'undefined' ) filter = "alpha(opacity=100)";
		display = 'none';
	}
}

function setImageWH( iEle,w,h ) {
	var maxW = currentWinPos[2] - initImgContainerSize[0];
	var maxH = currentWinPos[3] - initImgContainerSize[1];
	if( w > maxW || h > maxH ) {
		if( maxW > maxH ) {
			oh = h;
			h = maxH;
			w = ( w * h ) / oh;
		} else {
			ow = w;
			w = maxW;
			h = ( h * w ) / ow;
		}
	}
	iEle.setAttribute( "width",w );
	iEle.setAttribute( "height",h );
	return new Array(w,h);
}

function setImageProperty( hR ) {
	var jsonStr = '';
	var imgInfo,imgEle;
	var useImgEleCounter = 0;
	var docFrag = null;
	var displayWidth = 0;
	var displayHeight = 0;
	
	jsonStr = hR.responseText;
	imgEleList = new Array();
	for( var i=0 ; i < displayImg.childNodes.length ; ++i )
		if( displayImg.childNodes[i].nodeName == 'IMG' ) 
			imgEleList[ imgEleList.length ] = displayImg.childNodes[i];
	
	if( ( imgInfo = myParseJson( jsonStr ) ) ) {
		if( ! imgInfo.result ) {
			alert( imgInfo.message );
			return false;
		}
		for( i in imgInfo.imgList ) {
			if( useImgEleCounter < imgEleList.length ) {
				with( imgInfo.imgList[i] ) {
					var tmpImg = imgEleList[ useImgEleCounter++ ];
					newSize = setImageWH( tmpImg,imageWidth,imageHeight );
					imageWidth = newSize[0];
					imageHeight = newSize[1];
					tmpImg.setAttribute( "src",'../' + imageSourcePath );
				}
			} else {
				if( docFrag == null ) docFrag = document.createDocumentFragment();
				imgEle = document.createElement('img');
				docFrag.appendChild( imgEle );
				with( imgEle.style ) {
					position = 'absolute';
					left = '0px';
					top = '0px';
					display = 'none';
				}
				with( imgInfo.imgList[i] ) {
					newSize = setImageWH( imgEle,imageWidth,imageHeight );
					imageWidth = newSize[0];
					imageHeight = newSize[1];
					imgEle.setAttribute( "src",'../' + imageSourcePath );
				}
				imgEleList[ imgEleList.length ] = imgEle;
				useImgEleCounter++;
			}
			with( imgInfo.imgList[i] ) {
				if( imageWidth > displayWidth ) displayWidth = imageWidth;
				if( imageHeight > displayHeight ) displayHeight = imageHeight;
			}
		}
		if( useImgEleCounter < imgEleList.length ) {
			for( var i=imgEleList.length-1 ; i >= useImgEleCounter ; --i ) {
				displayImg.removeChild( imgEleList[i] );
				imgEleList.pop();
			}
		}
		if( !imgEleList.length ) return fasle;
		if( docFrag != null ) displayImg.appendChild( docFrag );
		with( displayImg.style ) {
			width = displayWidth+'px';
			height = displayHeight+'px';
		}
		for( var i=0 ; i < imgEleList.length ; ++i ) centerIt( imgEleList[i],displayImg );
		setOdSize();
		curImgIndex = 0;
		imgEleList[curImgIndex].style.display = 'block';
		setDisplayImgUI('block');
		centerInWindow( imgContainer,currentWinPos );
		window.scrollTo( currentWinPos[0],currentWinPos[1] );
	}
}

function changeNonIEOpacity() {
	var hs = 0;
	with( imgEleList[hiddenImgIndex].style ) {
		hiddenOpacity -= nonIeOpacityOffset;
		if( hiddenOpacity < 0 ) { 
			display = 'none';
			opacity = 1;
			++hs;
		} else opacity = hiddenOpacity;
	}
	with( imgEleList[curImgIndex].style ) {
		showOpacity += nonIeOpacityOffset;
		if( showOpacity > 1 ) {
			opacity = 1;
			++hs;
		} else opacity = showOpacity;
	}
	if( hs == 2 ) clearChangeOpacity();
}

function changeIEOpacity() {
	var hs = 0;
	with( imgEleList[hiddenImgIndex].style ) {
		hiddenOpacity -= ieOpacityffset;
		if( hiddenOpacity < 0 ) { 
			display = 'none';
			filter = "alpha(opacity=100)";
			++hs;
		} else filter = "alpha(opacity="+hiddenOpacity+")";
	}
	with( imgEleList[curImgIndex].style ) {
		showOpacity += ieOpacityffset;
		if( showOpacity > 100 ) {
			filter = "alpha(opacity=100)";
			++hs;
		} else filter = "alpha(opacity="+showOpacity+")";
	}
	if( hs == 2 ) clearChangeOpacity();
}

function initNonIEOpacity() {
	hiddenOpacity = 1;
	showOpacity = 0;
	with( imgEleList[hiddenImgIndex].style ) opacity = hiddenOpacity;
	with( imgEleList[curImgIndex].style ) {
		display = 'block';
		opacity = showOpacity;
	}
}

function initIEOpacity() {
	hiddenOpacity = 100;
	showOpacity = 0;
	with( imgEleList[hiddenImgIndex].style ) filter = "alpha(opacity="+hiddenOpacity+")";
	with( imgEleList[curImgIndex].style ) {
		display = 'block';
		filter = "alpha(opacity="+showOpacity+")";
	}
}

function moveImg( direction,e ) {
	var myE = ( e ) ? e : window.event;
	if( myE.preventDefault ) myE.preventDefault();
	if( imgEleList.length == 1 || timeId ) return false;
	hiddenImgIndex = curImgIndex;
	if( direction == 1 ) curImgIndex = ++curImgIndex % imgEleList.length;
	else if( direction == 2 ) curImgIndex = ( ( --curImgIndex % imgEleList.length ) + imgEleList.length ) % imgEleList.length;
	if( browserInfo.browserType == 'msie' ) {
		initIEOpacity();
		timeId = window.setInterval( changeIEOpacity,33 );
	} else {
		initNonIEOpacity();
		timeId = window.setInterval( changeNonIEOpacity,33 );
	}
	return false;
}

function showLargeImg( e ) {
	var myEvent = window.event || e;
	var srcEle = myEvent.srcElement || myEvent.target;
	var hR = getHttpRequest();
	var imgEle;
	var entryId = 0;
	var demoPath = getDemoPath();
	currentWinPos = getWindowPosAndSize();
	if( browserInfo.browserType == 'msie' && browserInfo.majorVersion == 8 ) {
		hR.onload = function() { setImageProperty( hR ); }
		hR.onerror = function() { alert('error happen') }
		hR.open("GET","/"+demoPath+"ajax_php/viewLargeImg.php?location=" + srcEle.id);
		hR.send();
	} else {
		hR.onreadystatechange = function () {
			if( hR.readyState == 4 && hR.status == 200 ) {
				setImageProperty( hR );
			}
		}
		hR.open("GET","/"+demoPath+"ajax_php/viewLargeImg.php?location=" + srcEle.id);
		hR.send(null);
	}
}

function setDisplayImgUI( cStatus ) {
	odEle.style.display = cStatus;
	imgContainer.style.display = cStatus;
}

function closeLargeImage() {
	clearChangeOpacity();
	resetImg2None( hiddenImgIndex );
	resetImg2None( curImgIndex );
	setDisplayImgUI('none');
}

function setOdSize() {
	with ( odEle.style ) {
		width = getMaxVal( new Array(document.body.scrollWidth,document.documentElement.scrollWidth,
			document.documentElement.clientWidth,document.body.clientWidth) ) + 'px';
		height = getMaxVal( new Array(document.body.scrollHeight,document.documentElement.scrollHeight,
			document.documentElement.clientHeight,document.body.clientHeight) ) + 'px';
	}
}

function init() {
	with ( odEle.style ) {
		display = 'none';
		zIndex = 100;
		backgroundColor = '#CCCCCC';
	}
	with( imgContainer.style ) {
		position = 'absolute';
		zIndex = 101;
		left = '0px';
		top = '0px';
	}
	with( displayImg.style ) {
		position = 'relative';
		left = '0px';
		top = '0px';
	}
	initImgContainerSize[0] = getAttr( imgContainer,'clientWidth',true ) + 25;
	initImgContainerSize[1] = getAttr( imgContainer,'clientHeight',true ) + 25;
	setDisplayImgUI('none');
}

function initLargeImgLink() {
	var eleCollation;
	odEle = document.getElementById('OpacityDiv');
	imgContainer = document.getElementById('imgContainer');
	displayImg = document.getElementById('displayImg');
	if( !( odEle && imgContainer && displayImg ) ) return false;
	init();
	if( document.getElementsByClassName ) {
		eleCollation = document.getElementsByClassName('viewLargeImage');
		for( var i=0 ; i < eleCollation.length ; ++i ) eleCollation[ i ].onclick = showLargeImg;
		eleCollation = document.getElementsByClassName('close_icon');
		for( var i=0 ; i < eleCollation.length ; ++i ) eleCollation[i].onclick = closeLargeImage;
		eleCollation = document.getElementsByClassName('right_arrow');
		for( var i=0 ; i < eleCollation.length ; ++i ) eleCollation[i].onclick = function( e ) { return moveImg(1,e) };
		eleCollation = document.getElementsByClassName('left_arrow');
		for( var i=0 ; i < eleCollation.length ; ++i ) eleCollation[i].onclick = function( e ) { return moveImg(2,e) };
	} else {
		eleCollation = document.getElementsByTagName("*");
		for( var i=0 ; i< eleCollation.length ; ++i ) {
			if( eleCollation[i].id && eleCollation[i].id.indexOf('largeImg_') != -1 ) {
				eleCollation[ i ].onclick = showLargeImg;
				continue;
			}
			if( eleCollation[i].getAttribute ) {
				var classAttr = eleCollation[i].getAttribute("class");
				if( !classAttr ) classAttr = eleCollation[i].getAttribute("className");
				if( classAttr == 'close_icon' ) {
					eleCollation[i].onclick = closeLargeImage;
				} else if( classAttr == 'right_arrow' ) 
					eleCollation[i].onclick = function( e ) { return moveImg(1,e) };
				else if ( classAttr == 'left_arrow' ) {
					eleCollation[i].onclick = function( e ) { return moveImg(2,e) };
				}
			}
		}
	}
}

if( window.addEventListener ) window.addEventListener( "load" , initLargeImgLink, false );
else if ( window.attachEvent ) window.attachEvent( "onload", initLargeImgLink );