﻿/* 
* ContentSwitcher: 页面内容切换器
* 公司：易企达（北京）科技有限公司
* 开始：2008-05-04
* 目的：实现页面上指定模块内容可以自动切换
* 历史：
*/

function $(id)
{
    return document.getElementById(id);
}

function _CallHelper(aObject, aType)
{
    if (aType == 0)
        return function() { aObject.Fade(); };
    else if (aType == 1)
        return function() { aObject.Change(); };
    else if (aType == 2)
        return function() { if (aObject.Switcher != null) aObject.Switcher.Pause(); };
    else if (aType == 3)
        return function() { if (aObject.Switcher != null) aObject.Switcher.Resume(); };
    else if (aType == 4)
        return function() { aObject.panelCanvas.Go(aObject.panelIndex); };
    else
        return function() { alert(aType); };
}

function SetOpacity(aObj, aDegree)
{
    var canvas = aObj;
    var degree = aDegree;
    if (canvas.filters && canvas.filters[0])
    {
        if (typeof canvas.filters[0].opacity == "number") //if IE6+
            canvas.filters(0).opacity = degree;
        else //else if IE5.5-
            canvas.style.filter = "alpha(opacity=" + degree + ")"
    }
    else if (canvas.style.opacity)
    {
        canvas.style.opacity = degree / 100
    }
    else if (canvas.style.MozOpacity)
    {
        canvas.style.MozOpacity = degree / 101
    }
    else if (canvas.style.KhtmlOpacity)
    {
        canvas.style.KhtmlOpacity = degree / 100
    }
}

function Content(picURL, hrefURL)
{
    this.PicURL = picURL;
    this.HrefURL = hrefURL;

    this.Canvas = null;
}

Content.prototype.GetContentHTML = function()
{
    if (this.HrefURL != null && this.HrefURL != "")
        return "<a href='" + this.HrefURL + "' target='_blank'><img border='0' src='" + this.PicURL + "' width='" + this.Canvas.Width + "px' height='" + this.Canvas.Height + "px' ></a>";
    else
        return "<img border='0' src='" + this.PicURL + "' width='" + this.Canvas.Width + "px' height='" + this.Canvas.Height + "px' >";
}

function HTMLContent(sHTML)
{
    this.HTML = sHTML;
}

HTMLContent.prototype.GetContentHTML = function()
{
    return this.HTML;
}

function ContentCanvas(canvasContainerID, canvasWidth, canvasHeight, cssStyle)
{
    this.ContainerID = canvasContainerID;
    this.Width = canvasWidth;
    this.Height = canvasHeight;
    this.ContentIndex = -1;
    this.Degree = 10;
    this.Interval = 60;
    this.ControlPanelWidth = 16;
    this.ControlPanelHeight = 16;

    this.ContentArray = new Array();
    this.ContentPanelArray = new Array();
    this.Switcher = null;

    this.IsShowIndex = true;

    var container = $(canvasContainerID);
    if (container != null)
    {
        container.style.position = 'relative';
        container.style.overflow = 'hidden';
        container.onmouseover = _CallHelper(this, 2);
        container.onmouseout = _CallHelper(this, 3);

        var sHTML = "<div id='" + this.ContainerID + "_div1' style='border:0px solid red;z-index:2;position:absolute;width:" + this.Width + "px;height:" + this.Height + "px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:100;-khtml-opacity:100;opacity:1;background-color:white;" + cssStyle + "' ></div>" +
		    "<div id='" + this.ContainerID + "_div2' style='border:0px solid red;z-index:1;position:absolute;width:" + this.Width + "px;height:" + this.Height + "px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;opacity:0.1;background-color:white;" + cssStyle + "'></div>";
        container.innerHTML = sHTML;
    }

    this.DIV = $(this.ContainerID + "_div1");
    this.DIVBase = $(this.ContainerID + "_div2");
}

ContentCanvas.prototype.AddContent = function(aContent) {
    aContent.Canvas = this;
    this.ContentArray.push(aContent);

    var panel = document.createElement("div");
    panel.style.zIndex = 3;
    panel.style.position = "absolute";
    panel.style.left = "0px";
    panel.style.top = "4px";
    panel.style.width = this.ControlPanelWidth + "px";
    panel.style.height = this.ControlPanelHeight + "px";
    panel.style.border = "1px solid white";
    panel.style.backgroundColor = "black";
    panel.style.color = "white";
    panel.style.cursor = "pointer";
    panel.style.fontSize = "12px";
    panel.style.textAlign = "center";
    panel.innerHTML = this.ContentArray.length;
    panel.panelIndex = this.ContentPanelArray.length;
    panel.panelCanvas = this;
    panel.onclick = _CallHelper(panel, 4);

    if (!this.IsShowIndex) {
        panel.style.display = "none";
    }

    if ($(this.ContainerID))
        $(this.ContainerID).appendChild(panel);
    this.ContentPanelArray.push(panel);
    this.SortPanel();
    SetOpacity(panel, 70);
}

ContentCanvas.prototype.SortPanel = function() {
    var MaxColumn = Math.floor(this.Width / this.ControlPanelWidth);
    var RowCount = Math.floor(this.ContentPanelArray.length / MaxColumn) + 1;

    for (var row = 0; row < RowCount; row++) {
        for (var col = 0; col < MaxColumn; col++) {
            var index = row * MaxColumn + col;
            if (index >= this.ContentPanelArray.length) return;

            var Panel = this.ContentPanelArray[index];
            Panel.style.top = (this.Height - (RowCount - row) * this.ControlPanelHeight - 1) + "px";
            Panel.style.left = (col * this.ControlPanelWidth + 5) + "px";
        }
    }
}

ContentCanvas.prototype.AddPicContent = function(aPicUrl, aPicHref)
{
    var content = new Content(aPicUrl, aPicHref);
    return this.AddContent(content);
}

ContentCanvas.prototype.GetCount = function()
{
    return this.ContentArray.length;
}

ContentCanvas.prototype.Fade = function()
{
    this.Degree += 10;
    SetOpacity(this.DIVBase, this.Degree);
    if (this.Degree < 100)
    {
        if (this.Degree == 10)
        {
            var temp = this.DIVBase.style.zIndex;
            this.DIVBase.style.zIndex = this.DIV.style.zIndex;
            this.DIV.style.zIndex = temp;
        }
        setTimeout(_CallHelper(this, 0), this.Interval);
    }
    else
    {
        var temp = this.DIVBase;
        this.DIVBase = this.DIV;
        this.DIV = temp;
        this.Switcher.GoNext();
    }
}

ContentCanvas.prototype.Go = function(n)
{
    if (this.Switcher.LastTimeID != 0)
    {
        clearTimeout(this.Switcher.LastTimeID);
        this.Switcher.LastTimeID = 0;
    }

    if (this.ContentIndex == -1)
    {
        this.ContentIndex = 0;
        if (this.DIV)
            this.DIV.innerHTML = this.ContentArray[this.ContentIndex].GetContentHTML();

        this.Switcher.GoNext();
    }
    else
    {
        this.ContentIndex = n;
        if (this.ContentIndex >= this.GetCount())
        {
            this.ContentIndex = 0;
        }

        this.DIVBase.innerHTML = this.ContentArray[this.ContentIndex].GetContentHTML();
        this.Degree = 0;
        this.Fade();
    }

    for (var i = 0; i < this.ContentPanelArray.length; i++)
    {
        if (i != this.ContentIndex)
            this.ContentPanelArray[i].style.background = "black";
        else
            this.ContentPanelArray[i].style.background = "red";
    }
}

ContentCanvas.prototype.GoNext = function()
{
    if (this.ContentArray.length == 0)
    {
        this.Switcher.GoNext();
        return;
    }

    this.Go(this.ContentIndex + 1);
}

ContentCanvas.prototype.SetShowIndex = function(isShowIndex)
{
    if (this.IsShowIndex != isShowIndex)
    {
        this.IsShowIndex = isShowIndex;
        var displayValue = "";
        if (!this.IsShowIndex)
            displayValue = "none";
        for (var i = 0; i < this.ContentPanelArray.length; i++)
        {
            this.ContentPanelArray[i].style.display = displayValue;
        }
    }
}

// 创建一个ContentSwitcher对象
function ContentSwitcher()
{
    // 属性
    this.Index = -1;
    this.Interval = 1500;
    this.IsActive = false;
    this.LastTimeID = 0;

    this.CanvasArray = new Array();
}

ContentSwitcher.prototype.AddCanvas = function(canvasContainerID, canvasWidth, canvasHeight, cssStyle)
{
    var canvas = new ContentCanvas(canvasContainerID, canvasWidth, canvasHeight, cssStyle);
    canvas.Switcher = this;
    this.CanvasArray.push(canvas);
    return canvas;
}

ContentSwitcher.prototype.Start = function()
{
    if (this.IsActive) return;
    if (this.GetCount() == 0) return;

    this.IsActive = true;
    this.GoNext();
}

ContentSwitcher.prototype.GoNext = function()
{
    if (!this.IsActive) return;

    if (this.Index == -1)
    {
        this.Index = 0;
        this.CanvasArray[0].GoNext();
    }
    else
    {
        this.Index++;
        if (this.Index >= this.GetCount())
        {
            this.Index = 0;
        }
        this.LastTimeID = setTimeout(_CallHelper(this, 1), this.Interval);
    }
}

ContentSwitcher.prototype.Change = function()
{
    if (!this.IsActive) return;

    this.CanvasArray[this.Index].GoNext();
}

ContentSwitcher.prototype.GetCount = function()
{
    return this.CanvasArray.length;
}

ContentSwitcher.prototype.Pause = function()
{
    this.IsActive = false;
    if (this.LastTimeID != 0)
    {
        clearTimeout(this.LastTimeID);
        this.LastTimeID = 0;
    }
}

ContentSwitcher.prototype.Resume = function()
{
    if (this.IsActive) return;

    this.IsActive = true;
    this.GoNext();
}

ContentSwitcher.prototype.Stop = function()
{
    this.Index = -1;
    this.IsActive = false;
    for (var i = 0; i < this.CanvasArray.length; i++)
    {
        this.CanvasArray[i].Index = -1;
    }
}


