var CurrentRow;
var PreviousRow;
var RowCount;
var interval;
var TranstionPercent;
var Speed;
var AutoChange;
var ChangeSpeed;
var Rotating;
var AutoRotationg;
var ManualChangeTimeOut;
var MannualInput;
var TabLocation;
var TransitionAttribute;
var FadeInterval;

$(document).ready
(
    function() 
    {   
        if($(".ImageRotatorContainer") != null)
        {
            CreateArrays();
            
            $(".ImageRotatorContainer").each
            (
                function()
                {
                    var Id = this.id;
                    Rotating[Id] = false;
                    MannualInput[Id] = false;
                    RowCount[Id] = 0;
                    
                    $(this).find(".RotatorItem").each
                    (
                        function(index)
                        {
                            RowCount[Id]++;
                        }
                    )
                    
                    TranstionPercent[Id] = 0;
                    CurrentRow[Id] = 0;
                    PreviousRow[Id] = 0;
                    GetImageRotatorAtributies(Id);
                    CreateEverything(Id);
                    
                    $(this).find(".FooterContent").html($(this).find(".FooterHTML").html());
                    $(this).find(".HeaderContent").html($(this).find(".HeaderHtml").html());

                    $(this).find(".ButtonNext").click(divButtonNext_Click);
                    $(this).find(".ButtonNext").attr("ContainerID", Id);

                    $(this).find(".ButtonPrevious").click(divButtonPrevious_Click);
                    $(this).find(".ButtonPrevious").attr("ContainerID", Id);
                }
            )
        }
    }
);

function CreateArrays()
{
    CurrentRow = new Array();
    PreviousRow = new Array();
    RowCount = new Array();
    interval = new Array();
    TranstionPercent = new Array();
    Speed = new Array();
    AutoChange = new Array();
    ChangeSpeed = new Array();
    Rotating = new Array();
    AutoRotationg = new Array();
    ManualChangeTimeOut = new Array();
    MannualInput = new Array();
    TabLocation = new Array();
    TransitionAttribute = new Array();
    FadeInterval = new Array();
}

function divButtonPrevious_Click()
{
    var Id = $(this).attr("ContainerID");
    Rotate(-1, RowCount[Id] - 1, TransitionPrevious, Id);
}

function divButtonNext_Click()
{
    var Id = $(this).attr("ContainerID");
    Rotate(1, 0, TransitionNext, Id);
}

function Rotate(Increment, DefaultTab, TransitionFunction, Id)
{
    if(Rotating[Id] == false)
    {
        var TempCurrentRow = CurrentRow[Id];

        if(TempCurrentRow + Increment >= 0 && TempCurrentRow + Increment < RowCount[Id])
        {
            PreviousRow[Id] = CurrentRow[Id];
            CurrentRow[Id] += Increment;
        }
        else
        {
            PreviousRow[Id] = CurrentRow[Id];
            CurrentRow[Id] = DefaultTab;
        }
        
        UpdateTabs(Id);
        
        StartTransition(Id, TransitionFunction);
    }
}

function UpdateTabs(Id)
{
        SetTabBackgroundImage($("#" + Id + "_" + "Tab" + PreviousRow[Id]),"UnselectedImage"); 
        SetTabBackgroundImage($("#" + Id + "_" + "Tab" + CurrentRow[Id]),"SelectedImage"); 
        
        $("#" + Id + "_" + "Tab" + PreviousRow[Id]).toggleClass("Selected");
        $("#" + Id + "_" + "Tab" + CurrentRow[Id]).toggleClass("Selected");
}

function CreateTabList(Id)
{   
    if(TabLocation[Id].toLowerCase() == "footer")
    {  
        CreateContentAndTabList("Footer", Id);
        CreateContentDiv("Header", Id);
    }
    else if(TabLocation[Id].toLowerCase() == "content")
    {
        CreateContentAndTabList("ContentContainer", Id);
        CreateContentDiv("Header", Id);
        CreateContentDiv("Footer", Id);
    }
    else
    {
        CreateContentAndTabList("Header", Id);
        CreateContentDiv("Footer", Id);
    }
    
}

function CreateContentAndTabList(Type, Id)
{
    var Div = document.createElement("div");
    var List = document.createElement("ul");
    var ClassName = Type.toLowerCase() + "column";
    
    List.id = Id + "_ulTabs";
    Div.id = Id + "_" + "divTabList";
    
    Div.setAttribute("class",ClassName);
    List.setAttribute("class","listoftabs");
    CreateContentDiv(Type, Id);
    
    $("#" + Id).find("." + Type).append(Div);
    $("#" + Id).find("#" + Div.id).append(List);
}

function CreateContentDiv(Type, Id)
{
    var ContentDiv = document.createElement("div");
    var ClassName = Type.toLowerCase() + "column " + Type + "Content";
    var DivID = Id + "_" + Type + "Content";
    
    ContentDiv.id =  DivID;
    ContentDiv.setAttribute("class", ClassName);
    
    $("#" + Id).find("." + Type).append(ContentDiv);
}

function GetImageRotatorAtributies(Id)
{

    Speed[Id] = parseInt($("#" + Id).find(".divImageRotatorData").attr("speed"));
    AutoChange[Id] = $("#" + Id).find(".divImageRotatorData").attr("autochange");
    TabLocation[Id] = $("#" + Id).find(".divImageRotatorData").attr("tablocation");
    var TransitionType = $("#" + Id).find(".divImageRotatorData").attr("transitiontype");
    
    switch(TransitionType.toLowerCase())
    {
        case "vertical":
            TransitionAttribute[Id] = "top";
            break;
        case "horizontal":
            TransitionAttribute[Id] = "left";
            break;
        case "fade":
            TransitionAttribute[Id] = "opacity";
            FadeInterval[Id] = Speed[Id];
            Speed[Id] = 1;
            break;
    }

    if(AutoChange[Id].toLowerCase() == "true")
    {
        ChangeSpeed[Id] = $("#" + Id).find(".divImageRotatorData").attr("changespeed");
        window.setInterval(function(){AutoRotate(Id);}, parseInt(ChangeSpeed[Id]) * 1000);
        ManualChangeTimeOut[Id] = parseInt($("#" + Id).find(".divImageRotatorData").attr("manualchangetimeout"));
    }
}

function AutoRotate(Id)
{  
    if(Rotating[Id] == false && MannualInput[Id] == false)
    {
        PreviousRow[Id] = CurrentRow[Id];
        if(CurrentRow[Id] + 2 > RowCount[Id])
        {
            CurrentRow[Id] = 0;
        }
        else
        {
            CurrentRow[Id]++;
        }
        
        SetTabBackgroundImage($("#" + Id + "_" + "Tab" + PreviousRow[Id]),"UnselectedImage"); 
        SetTabBackgroundImage($("#" + Id + "_" + "Tab" + CurrentRow[Id]),"SelectedImage"); 
                   
        StartTransition(Id,TransitionNext);
    }
}

function CreateEverything(Id)
{   

    CreateTabList(Id);
    
    $("#" + Id).find(".RotatorItem").each
    (
        function(index)
        {   
            var BackGroundImage = $(this).find(".BackGroundImage");
            var BackGroundHtml = $(this).find(".BackGroundHtml");
            
            var TabHTML = $(this).find(".TabHTML");
            var TabImage = $(this).find(".TabImage");
            var SelectedTabImage = $(this).find(".SelectedTabImage");
            
            var div = CreateContent(index, BackGroundHtml, BackGroundImage, Id);

            CreateTab(index, TabHTML, TabImage, SelectedTabImage, Id);
            InitalizeTab(index, div, Id);
        }
    )
}

function CreateContent(index, BackGroundHtml, BackGroundImage, Id)
{
    var divContentContainer = $("#" + Id).find(".ContentContainer");
    var div = document.createElement("div");

    div.id = Id + "_" + "divContent_" + index;
    div.setAttribute("class", "ImageContainer");
    divContentContainer.append(div);

    LoadBackgroundImage( "#" + div.id , BackGroundImage.html());
    $("#" + div.id).html(BackGroundHtml.html());
    $("#" + div.id).hide();
    
    return div;
}

function CreateTab(index, TabHTML, TabImage, SelectedTabImage, Id)
{
    var ulTabs = $("#" + Id + "_ulTabs");
    
    var li = document.createElement("li");
    li.innerHTML = TabHTML.html();
    li.id =  Id + "_" + "Tab" + index;
    li.setAttribute("SelectedImage", SelectedTabImage.html());
    li.setAttribute("UnselectedImage", TabImage.html());
    li.setAttribute("Index", index);
    li.setAttribute("ContainerID", Id);
    ulTabs.append(li);

    SetTabBackgroundImage($("#" + li.id),"UnselectedImage");
    
    $("#" + li.id).hover(Tab_OnFocus, Tab_LostFocus); 
    $("#" + li.id).click(Tab_Click);
}

function InitalizeTab(index, div, Id)
{
    var TabId =  Id + "_" + "Tab" + index;

    if(index == CurrentRow[Id])
    {
        $("#" + Id).find("#" + div.id).show();
        $("#" + Id).find("#" + TabId).addClass("Selected");
        SetTabBackgroundImage($("#" + Id).find("#" + TabId),"SelectedImage");
    }
}

function LoadBackgroundImage(ControlID, Image)
{
    $(ControlID).css({'background-image':'url(' + Image + ')'}); 
}

function ReSetTimeout(Id)
{
    MannualInput[Id] = false;
}

function TransitionNext(Id)
{
    Transition(Id, false)
}

function TransitionPrevious(Id)
{
     Transition(Id, true)
}

function Transition(Id, Previous)
{
    TranstionPercent[Id] += Speed[Id];

    var FirstContent = $("#" + Id).find("#" + Id + "_divContent_" + PreviousRow[Id]);
    var SecondContent = $("#" + Id).find("#" + Id + "_divContent_" + CurrentRow[Id]);

    SetManualInput(Id);
            
    if(TranstionPercent[Id] <= 100)
    {
                 
        SetAttribute(FirstContent, SecondContent, Previous, Id, "#" + Id + "Content_" + PreviousRow[Id]);
    }
    else
    {
        FinishTransition(FirstContent, SecondContent, Id);
    }

}

function SetManualInput(Id)
{
    if(AutoChange[Id].toLowerCase() == "true" && MannualInput[Id] == false)
    {
        setTimeout(function(){ ReSetTimeout(Id);}, ManualChangeTimeOut[Id] * 1000);
    }
    
    MannualInput[Id] = true;
}

function GetWidth(ControlName, Id)
{
    var Width = $("#" + Id).find(ControlName).css("width");
    
    Width = Width.substring(0, Width.length - 2)
    
    return Width;
}

function SetAttribute(FirstContent, SecondContent, Previous, Id, ControlId)
{
    Rotating[Id] = true;

    var ContentID = "#" + FirstContent.attr("id");
    var TotalWidth = parseInt(GetWidth(ContentID, Id));
    
    var FirstPercent = (100 - TranstionPercent[Id]) * .01;
    var SecondPercent = TranstionPercent[Id] * .01;

    var FirstWidth = TotalWidth * FirstPercent;
    var SecondWidth = TotalWidth * SecondPercent;
           
    if(Previous == true)
    {
        FirstWidth = FirstWidth * -1;
    }
    else
    {
        SecondWidth = SecondWidth * -1;
    }
    
    if( TransitionAttribute[Id] != "opacity")
    {
        FirstContent.css(TransitionAttribute[Id] , SecondWidth); 
        SecondContent.css(TransitionAttribute[Id] , FirstWidth);
    }
    else
    {
        FirstContent.css("zindex", 5);
        SecondContent.css("zindex", 0);
        FirstContent.css(TransitionAttribute[Id] , FirstPercent); 
        SecondContent.css(TransitionAttribute[Id] , SecondPercent);
    }

    FirstContent.show();
    SecondContent.show();

}

function FinishTransition(FirstContent, SecondContent, Id)
{
    Rotating[Id] = false;
    
    if( TransitionAttribute[Id] != "opacity")
    {
        SecondContent.css(TransitionAttribute[Id], "0");
    }
    FirstContent.css(TransitionAttribute[Id], "0");
    FirstContent.hide();
    SecondContent.show();
    TranstionPercent[Id] = 0;
    clearInterval(interval[Id]);
}

function Tab_OnFocus()
{ 
    SetTabBackgroundImage($(this),"SelectedImage");
}

function Tab_LostFocus()
{ 
    var index = parseInt($(this).attr("Index"));
    var Id = $(this).attr("ContainerID");
    
    if(index != CurrentRow[Id])
    {
        SetTabBackgroundImage($(this),"UnselectedImage");
    }
}

function Tab_Click()
{
    var Index = parseInt($(this).attr("Index"));
    var Id = $(this).attr("ContainerID");

    if(Rotating[Id] == false)
    {
        PreviousRow[Id] = CurrentRow[Id];
        CurrentRow[Id] = Index;
        UpdateTabs(Id);
        
        if(Index != PreviousRow[Id])
        {
            if(Index > PreviousRow[Id])
            {
                StartTransition(Id, TransitionNext);
            }
            else
            {
                StartTransition(Id, TransitionPrevious);
            }
        }
    }
}

function SetTabBackgroundImage(CurrentTab, ImageAtribute)
{
    CurrentTab.css({'background-image':'url(' + CurrentTab.attr(ImageAtribute) + ')'}); 
}

function StartTransition(Id, TransitionFunction)
{
    var _Interval = 1;
    
    if(TransitionAttribute[Id] == "opacity")
    {
        _Interval = FadeInterval[Id];
    }
    
    if(Rotating[Id] == false)
    {
        interval[Id] = window.setInterval(function() { TransitionFunction(Id) }, _Interval);
    }
}