//var curIndex=0;
//var curDegree=10;
//var Delay=3000;
//var fdInterval=60;
//	   	   
function $(id)
{
	return document.getElementById(id);
}
function fpCanvas(canvasID)
{		
	this.ID = canvasID;
	this.Div = $(canvasID);
	this.Img = $(canvasID+"_image");
	
	this.DivBase = $(canvasID + "_base");						
	this.ImgBase = $(canvasID+"_image_base");
}

//fpCanvas.prototype.resetit=function()
//{
//	curDegree=10
//	// 把当前div提前，并且设置成不可见
//	if (this.DivBase.style.zIndex >= this.Div.style.zIndex)
//	{
//	    var temp = this.DivBase.style.zIndex;
//	    this.DivBase.style.zIndex = this.Div.style.zIndex;
//	    this.Div.style.zIndex=temp;
//	}
//	
//	var canvas=this.Div;
//	if (canvas.filters&&canvas.filters[0])
//	{
//		if (typeof canvas.filters[0].opacity=="number") //if IE6+
//			canvas.filters(0).opacity=curDegree
//		else //else if IE5.5-
//			canvas.style.filter="alpha(opacity="+curDegree+")"
//	}
//	else if (canvas.style.opacity)
//	{
//	    canvas.style.opacity=curDegree/100
//	}
//	else if (canvas.style.MozOpacity)
//	{
//	    canvas.style.MozOpacity=curDegree/101
//	}
//	else if (canvas.style.KhtmlOpacity)
//	{
//		canvas.style.KhtmlOpacity=curDegree/100
//    }
//} 				

function fpImage(canvas,url)
{
	this.Canvas = canvas;
	this.Url = url;
}

//	<!--<img id="fp2" src="img/banner-1_03.jpg" width="250" height="201" /> -->
//	<div style="position:relative;width:376px;height:201px;overflow:hidden;">
//		<div id="fp2" style=" z-index:12;position:absolute;width:250px;height:201px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:100;-khtml-opacity:100;background-color:white">
//		<img id="fp2_image" src="img/banner-1_03.jpg" width="250" height="201" />
//		</div>
//		<div id="fp2_base" style=" z-index:11;position:absolute;width:250px;height:201px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:white">
//		<img id="fp2_image_base" src="img/banner-1_03.jpg" width="250" height="201" />
//		</div>
//		</div>
//		
//		

function _SwitchCallHelper(aSwitcher, callFade)
{   
    if (callFade)
        return function(){aSwitcher.FadeImage();};
    else
        return function(){aSwitcher.ChangeImage();};
}

function Switcher()
{
    this.Index=0;
    this.Degree=10;
    this.Delay=3000;
    this.Interval=60;
    this.IsRun=false;
    this.CanvasArray = new Array();
    this.ImageArray = new Array();
}

Switcher.prototype.AddCanvas=function(canvasID)
{
    var canvas = new fpCanvas(canvasID);
    this.CanvasArray.push(canvas);    
    return canvas;
}

Switcher.prototype.FindCanvas=function(canvasID)
{
    for(var i=0;i<this.CanvasArray.length;i++)
        if(this.CanvasArray[i].ID == canvasID)
            return this.CanvasArray[i];
    return null;
}

Switcher.prototype.AddImage=function(canvas, imgURL)
{
    if(canvas == null) return null;
    var img = new fpImage(canvas, imgURL);
    this.ImageArray.push(img);
    return img;
}

Switcher.prototype.AddImageByCanvasID=function(canvasID, imgURL)
{
    return this.AddImage(this.FindCanvas(canvasID), imgURL);
}

Switcher.prototype.Start=function()
{
    if (this.IsRun) return;
    this.IsRun = true;
    
    if (this.Index < this.ImageArray.length)
    {
        this.IsRun = true;
        this.ResetCanavs(this.ImageArray[this.Index].Canvas);
        this.FadeImage();    
    }
}

Switcher.prototype.FadeImage=function()
{
	var curImage = this.ImageArray[this.Index];
	if (this.Degree < 100)
	{
		this.Degree+=10
		canvas = curImage.Canvas.Div;
		if (canvas.filters&&canvas.filters[0])
		{
			if (typeof canvas.filters[0].opacity=="number") //if IE6+
				canvas.filters[0].opacity=this.Degree
			else //else if IE5.5-
				canvas.style.filter="alpha(opacity="+this.Degree+")"
		}
	    else if (canvas.style.opacity)
	    {
	        canvas.style.opacity=this.Degree/100
	    }
		else if (canvas.style.MozOpacity)
			canvas.style.MozOpacity=this.Degree/101
		else if (canvas.style.KhtmlOpacity)
			canvas.style.KhtmlOpacity=this.Degree/100
			
		setTimeout(_SwitchCallHelper(this, true), this.Interval)
	}
	else
	{
		setTimeout(_SwitchCallHelper(this, false), this.Delay);
	}			    
}

Switcher.prototype.ChangeImage=function()
{
	this.Index ++
	if (this.Index >= this.ImageArray.length)
		this.Index = 0
	var curImage = this.ImageArray[this.Index];
	var curCanvas = curImage.Canvas;
				
	var temp = curCanvas.Div;
	curCanvas.Div = curCanvas.DivBase;
	curCanvas.DivBase = temp;

	temp = curCanvas.Img;
	curCanvas.Img = curCanvas.ImgBase;
	curCanvas.ImgBase = temp;
	
	this.ResetCanavs(curCanvas);
	curCanvas.Img.src = curImage.Url;					
	this.FadeImage();
}

Switcher.prototype.ResetCanavs=function(aCanvas)
{
	this.Degree=10
	// 把当前div提前，并且设置成不可见
	if (aCanvas.DivBase.style.zIndex >= aCanvas.Div.style.zIndex)
	{
	    var temp = aCanvas.DivBase.style.zIndex;
	    aCanvas.DivBase.style.zIndex = aCanvas.Div.style.zIndex;
	    aCanvas.Div.style.zIndex=temp;
	}
	
	var canvas=aCanvas.Div;
	if (canvas.filters&&canvas.filters[0])
	{
		if (typeof canvas.filters[0].opacity=="number") //if IE6+
			canvas.filters(0).opacity=this.Degree;
		else //else if IE5.5-
			canvas.style.filter="alpha(opacity="+this.Degree+")"
	}
	else if (canvas.style.opacity)
	{
	    canvas.style.opacity=this.Degree/100
	}
	else if (canvas.style.MozOpacity)
	{
	    canvas.style.MozOpacity=this.Degree/101
	}
	else if (canvas.style.KhtmlOpacity)
	{
		canvas.style.KhtmlOpacity=this.Degree/100
    }
}

var hiddenDiv = document.createElement("div");
hiddenDiv.style.visibility="hidden"
hiddenDiv.style.display="none"

var picSwitch = new Switcher();

var canvas1 = picSwitch.AddCanvas("fp1");
var canvas2 = picSwitch.AddCanvas("fp2");
var canvas3 = picSwitch.AddCanvas("fp3");

//var canvas1 = new fpCanvas("fp1");
//var canvas2 = new fpCanvas("fp2");
//var canvas3 = new fpCanvas("fp3");
//var fpimgs = new Array()

var group1 = [
    "img/banner-1.jpg", 
    "img/banner-1_01.jpg", 
    "img/banner-1_02.jpg", 
    "img/banner-1_04.jpg"];
var group2 = [
    "img/banner-2.jpg", 
    "img/banner-2_01.jpg", 
    "img/banner-2_02.jpg", 
    "img/banner-2_03.jpg", 
    "img/banner-2_04.jpg", 
    "img/banner-2_05.jpg", 
    "img/banner-2_06.jpg"];
var group3 = [
    "img/banner-3.jpg", 
    "img/banner-3_01.jpg", 
    "img/banner-3_02.jpg", 
    "img/banner-3_03.jpg", 
    "img/banner-3_04.jpg", 
    "img/banner-3_05.jpg", 
    "img/banner-3_06.jpg", 
    "img/banner-3_07.jpg", 
    "img/banner-3_08.jpg", 
    "img/banner-3_09.jpg"];

var bAdd1 = false;
var bAdd2 = false;
var bAdd3 = false;

var iIndex1 = 0;
var iIndex2 = 0;
var iIndex3 = 0;
var addTag = 0;

while (!(bAdd1 && bAdd2 && bAdd3))
{
    if (addTag == 0)
    {
        picSwitch.AddImage(canvas1, group1[iIndex1]);
        if (!bAdd1)
        {
            var preLoad = document.createElement("img");
            preLoad.src = group1[iIndex1];
            hiddenDiv.appendChild(preLoad);
        }
        
        iIndex1++;
        if (iIndex1 >= group1.length)
        {
            iIndex1 = 0;
            bAdd1 = true;
        }
    }
    if (addTag == 1)
    {
        picSwitch.AddImage(canvas2, group2[iIndex2]);
        if (!bAdd2)
        {
            var preLoad = document.createElement("img");
            preLoad.src = group2[iIndex2];
            hiddenDiv.appendChild(preLoad);
        }		        
        
        iIndex2++;
        if (iIndex2 >= group2.length)
        {
            iIndex2 = 0;
            bAdd2 = true;
        }
    }
    if (addTag == 2)
    {
        picSwitch.AddImage(canvas3, group3[iIndex3]);
        if (!bAdd3)
        {
            var preLoad = document.createElement("img");
            preLoad.src = group3[iIndex3];
            hiddenDiv.appendChild(preLoad);
        }
        		        
        iIndex3++;
        if (iIndex3 >= group3.length)
        {
            iIndex3 = 0;
            bAdd3 = true;
        }
    }
    
    addTag ++;
    if (addTag >= 3) addTag = 0;
}

picSwitch.Start();

// 第二组
var picSwitch2 = new Switcher();
picSwitch2.Delay=5000;
var canvas21 = picSwitch2.AddCanvas("head1");
var group21 = [
    "img/head1.jpg", 
    "img/head2.jpg", 
    "img/head3.jpg"];
for(var j=0;j<group21.length;j++)
{    
    picSwitch2.AddImage(canvas21, group21[j]);
    var preLoad = document.createElement("img");
    preLoad.src = group1[iIndex1];
    hiddenDiv.appendChild(preLoad);
}
picSwitch2.Start();


//function FadePic()
//{
//	var curImage = fpimgs[curIndex]
//	if (curDegree < 100)
//	{
//		curDegree+=10
//		canvas = curImage.Canvas.Div;
//		if (canvas.filters&&canvas.filters[0])
//		{
//			if (typeof canvas.filters[0].opacity=="number") //if IE6+
//				canvas.filters[0].opacity=curDegree
//			else //else if IE5.5-
//				canvas.style.filter="alpha(opacity="+curDegree+")"
//		}
//	    else if (canvas.style.opacity)
//	    {
//	        canvas.style.opacity=curDegree/100
//	    }
//		else if (canvas.style.MozOpacity)
//			canvas.style.MozOpacity=curDegree/101
//		else if (canvas.style.KhtmlOpacity)
//			canvas.style.KhtmlOpacity=curDegree/100
//			
//		setTimeout("FadePic()", fdInterval)
//	}
//	else
//	{
//		setTimeout("ChangePic()", Delay);
//	}			
//}

//function ChangePic()
//{
//	curIndex ++
//	if (curIndex >= fpimgs.length)
//		curIndex = 0
//	var curImage = fpimgs[curIndex];
//	var curCanvas = curImage.Canvas;
//				
//	var temp = curCanvas.Div;
//	curCanvas.Div = curCanvas.DivBase;
//	curCanvas.DivBase = temp;

//	temp = curCanvas.Img;
//	curCanvas.Img = curCanvas.ImgBase;
//	curCanvas.ImgBase = temp;
//	
//	curCanvas.resetit()
//	curCanvas.Img.src = curImage.Url;					
//	//alert(curCanvas.ID + "," + curCanvas.Div.id + "," + curCanvas.DivBase.id + "," + curCanvas.Img.src + "," + curCanvas.ImgBase.src);
//	FadePic()
//}

//if(curIndex < fpimgs.length)
//{
//	var curImage = fpimgs[curIndex];
//	var curCanvas = curImage.Canvas;
//	//curCanvas.resetit();
//    //FadePic();
//}