﻿var t = null;
var CurrentElemShowing = 0
var AnimInterval = 3000; //the timer interval
var firstAnim = true

var PanelInterval = 5000; //the timer interval
var PanelTimer = null;  //used for timer
var CurrentPanel = 0; //Tracks the current panel in the carousel

function SetHomeConent() {
    SetMap();
    MapAnimationTimer();
    SearchLocationAutoComplete();
    
    //Enable the four below for the carousel    
    //PanelTimer = setTimeout("PanelAnimationTimer()", PanelInterval);
    //YAHOO.util.Event.addListener("CarouselPlayPause", "click", CarouselPlayPause);
    //YAHOO.util.Event.addListener("CarouselPlayPause", "mouseover", CarouselPlayPauseMouseOver);
    //YAHOO.util.Event.addListener("CarouselPlayPause", "mouseout", CarouselPlayPauseMouseOut);
}

function SetMap() {
    var ndeMapLinks = YAHOO.util.Selector.query('div.CityMapLinks a', 'ColumnHeight');
    SetLinksOnMap(ndeMapLinks);
    
    YAHOO.util.Event.addListener(ndeMapLinks, "mouseover", MapAnimInEvent);
    YAHOO.util.Event.addListener(ndeMapLinks, "mouseout", MapAnimOutEvent);  
}

function MapAnimationTimer() {
    MapAnimation()
    t = setTimeout("MapAnimationTimer()", AnimInterval);
}

function MapAnimation() {
    var ndeMapLinks = YAHOO.util.Selector.query('div.CityMapLinks a', 'ColumnHeight');

    if (!firstAnim) {
        MapAnimOutEvent(null);
    } else {
        firstAnim = true;
    }

    MapAnimInEvent(null, ndeMapLinks[CurrentElemShowing]);
    
    CurrentElemShowing = CurrentElemShowing + 1

    if (ndeMapLinks.length == CurrentElemShowing) {
        CurrentElemShowing = 0;  
    }   
}

function MapAnimInEvent(e, elem) {
    
    var elemToUse

    if (e == null) {
        elemToUse = elem
    } else {
        elemToUse = this
        clearTimeout(t);
    }
    
    var MapLabelID = "CityMapLabel"
    var MapLabelWidthID = "CityMapLabelWidth"
    var labelText = GetParsedAltTag(elemToUse)

    var AnimWidth = GetWidthForAnimDiv(labelText);
        
    ndeLabel = YAHOO.util.Dom.get(MapLabelID);

    elemRegionTop = YAHOO.util.Dom.getStyle(elemToUse, "top");
    elemRegionTop = +elemRegionTop.replace('px', '') - 3;
    elemRegionTop = elemRegionTop + 'px';
    
    elemRegionLeft = YAHOO.util.Dom.getStyle(elemToUse, "left");
    elemRegionLeft = +elemRegionLeft.replace('px', '') + 17
    elemRegionLeft = elemRegionLeft + 'px'

    YAHOO.util.Dom.setStyle(ndeLabel, "top", elemRegionTop);
    YAHOO.util.Dom.setStyle(ndeLabel, "left", elemRegionLeft);
    YAHOO.util.Dom.setStyle(ndeLabel, "width", AnimWidth + "px");

    ndeLabel.innerHTML = labelText;

    YAHOO.util.Dom.addClass(ndeLabel, 'CityMapLabel');

    var myAnim = new YAHOO.util.Anim(MapLabelID, {
        width: { from: 0, to: AnimWidth, unit: 'px' }
    }, 1, YAHOO.util.Easing.backOut);

    myAnim.animate();

    
}

function MapAnimOutEvent(e) {

    if (e == null) {
        
    } else {
         t = setTimeout("MapAnimationTimer()", AnimInterval);
    }


    var MapLabelID = "CityMapLabel"

    ndeLabel = YAHOO.util.Dom.get(MapLabelID);

    var myAnim = new YAHOO.util.Anim(MapLabelID, {
        width: { from: 100, to: 0, unit: 'px' }
    }, 1, YAHOO.util.Easing.backOut);

    myAnim.animate();

    YAHOO.util.Dom.removeClass(ndeLabel, 'CityMapLabel');
    ndeLabel.innerHTML = ""
}

function GetWidthForAnimDiv(LabelToAdd) {

    var MapLabelWidthID = "CityMapLabelWidth";
    var labelText = LabelToAdd;
    
    ndeLabelWidth = YAHOO.util.Dom.get(MapLabelWidthID);
    ndeLabelWidth.innerHTML = labelText;

    elemRegion = YAHOO.util.Dom.getRegion(ndeLabelWidth);

    return elemRegion.width + 5;
}

function GetParsedAltTag(elemLink) {
    ndeLabel = YAHOO.util.Dom.getFirstChild(elemLink);
    altTagText = ndeLabel.alt;

    return altTagText.replace(' Homes', '');
}

function SetLinksOnMap(ndes) {
    for (i = 0; i < ndes.length; i++) {
        ndes[i].href = ndes[i].id;
    }
}


function PanelAnimationTimer() {
    PanelAnimation("")
    PanelTimer = setTimeout("PanelAnimationTimer()", PanelInterval);
}

function CarouselPlayPause(e) {

    if (YAHOO.util.Dom.hasClass(this, "PauseMouseOver")) {
        clearTimeout(PanelTimer);
        YAHOO.util.Dom.addClass(this, "Play");
        YAHOO.util.Dom.removeClass(this, "PauseMouseOver");
    } else {
        YAHOO.util.Dom.addClass(this, "Pause");
        YAHOO.util.Dom.removeClass(this, "PlayMouseOver");
        PanelTimer = setTimeout("PanelAnimationTimer()", PanelInterval);
    }

}

function CarouselPlayPauseMouseOver(e) {

    if (YAHOO.util.Dom.hasClass(this, "Pause")) {
        YAHOO.util.Dom.addClass(this, "PauseMouseOver");
        YAHOO.util.Dom.removeClass(this, "Pause");
    } else if (YAHOO.util.Dom.hasClass(this, "Play")) {
        YAHOO.util.Dom.addClass(this, "PlayMouseOver");
        YAHOO.util.Dom.removeClass(this, "Play");
    }

}

function CarouselPlayPauseMouseOut(e) {

    if (YAHOO.util.Dom.hasClass(this, "PauseMouseOver")) {
        YAHOO.util.Dom.removeClass(this, "PauseMouseOver");
        YAHOO.util.Dom.addClass(this, "Pause");
    } else if (YAHOO.util.Dom.hasClass(this, "PlayMouseOver")) {
        YAHOO.util.Dom.addClass(this, "Play");
        YAHOO.util.Dom.removeClass(this, "PlayMouseOver");
    }
}


function PanelAnimation(WhichWay) {
    
    //will be a ul
    var ndePanelContainer = YAHOO.util.Dom.get("PanelContainer");
    var ndePanelContainerRegion = YAHOO.util.Dom.getRegion(ndePanelContainer);
    var ndePanelContainerLeft = ndePanelContainerRegion.left;

    //lis in the ul (i.e. Panels)
    var ndeLstPanels = YAHOO.util.Dom.getChildren(ndePanelContainer);
    var cntPanels = ndeLstPanels.length - 1;
    var ndeFirstPanel = ndeLstPanels[0];
    var ndeLastPanel = ndeLstPanels[cntPanels];

    var lastPanelLeftPos = YAHOO.util.Dom.getRegion(ndeLastPanel).left

    //the div around the ul
    var ndeCarouselContainer = YAHOO.util.Dom.get("carousel");
    //should 399px
    var carouselWidth = +YAHOO.util.Dom.getStyle(ndeCarouselContainer, "width").replace("px", "");
    var carouselLeft = YAHOO.util.Dom.getRegion(ndeCarouselContainer).left;

    var carouselLeftWithBorder = carouselLeft + 1

    if (carouselLeftWithBorder == lastPanelLeftPos) {
        WhichWay = "Rewind";
    }

    if (WhichWay == "Prev") {
        endPos = ndePanelContainerLeft + carouselWidth
    } else if (WhichWay == "Rewind") {
        var carouselLeft = +YAHOO.util.Dom.getRegion("carousel").left;
        endPos = carouselLeft + 1;
    } else {
        endPos = ndePanelContainerLeft - carouselWidth
    }

    
    if (WhichWay == "Rewind") {
        var attributes = {
            opacity: {
                to:0
            }
        };
        
        //set the first li to 0, it will fade in after this animation happens
        YAHOO.util.Dom.setStyle(ndeFirstPanel, "opacity", "0");
        
        var myAnim = new YAHOO.util.Anim(ndeLastPanel, attributes, .8, YAHOO.util.Easing.easeIn);
        myAnim.animate();
        myAnim.onComplete.subscribe(FadeInFirstCarouselPanel);
       
    } else {
        var attributes = {
            points: {
                to: [endPos, ndePanelContainerRegion.top]
            }
        };
    
        var myAnim = new YAHOO.util.Motion(ndePanelContainer, attributes, .8, YAHOO.util.Easing.easeIn);
        myAnim.animate();
    }
    
}

function FadeInFirstCarouselPanel() {
    //put the ul back in the default position
    ndePanelContainer = YAHOO.util.Dom.get("PanelContainer");
    YAHOO.util.Dom.setStyle(ndePanelContainer, "left", "auto");
    
    //get the children li's (i.e. the panels)
    var ndeLstPanels = YAHOO.util.Dom.getChildren(ndePanelContainer);
    var cntPanels = ndeLstPanels.length - 1;
    var ndeFirstPanel = ndeLstPanels[0];
    var ndeLastPanel = ndeLstPanels[cntPanels];
        
    //set the opacity off the last child back to 100, since it was faded out above.
    YAHOO.util.Dom.setStyle(ndeLastPanel, "opacity", "100");
    
    var attributes = {
        opacity: {
            to: 100
        }
    };

    //now fade the first li back in
    var myAnim = new YAHOO.util.Anim(ndeFirstPanel, attributes, .8, YAHOO.util.Easing.easeIn);
    myAnim.animate();
    
}

function SearchLocationAutoComplete() {

    // Instantiate DataSources
    var cvDS = new YAHOO.util.LocalDataSource(BCHData.CityViews);
    cvDS.responseSchema = { fields: ["CityName", "ViewCityName"] };
    
    // Instantiate AutoCompletes
    var oConfigs = {
        prehighlightClassName: "yui-ac-prehighlight",
        useShadow: true,
        queryDelay: 0,
        minQueryLength: 0,
        animVert: .01,
        maxResultsDisplayed:30
    }
    var cvAC = new YAHOO.widget.AutoComplete("cvInput", "cvContainer", cvDS, oConfigs);

    // City combobox
    var bToggler = YAHOO.util.Dom.get("toggleCV");
    var oPushButtonB = new YAHOO.widget.Button({ container: bToggler });
    var toggleCV = function(e) {
        //YAHOO.util.Event.stopEvent(e);
        if (!YAHOO.util.Dom.hasClass(bToggler, "open")) {
            YAHOO.util.Dom.addClass(bToggler, "open")
        }

        // Is open
        if (cvAC.isContainerOpen()) {
            cvAC.collapseContainer();
        }
        // Is closed
        else {
            cvAC.getInputEl().focus(); // Needed to keep widget active
            setTimeout(function() { // For IE
                cvAC.sendQuery("");
            }, 0);
        }
    }

    // Define an event handler to populate a hidden form field
    // when an item gets selected
    var myHiddenField = YAHOO.util.Dom.get("ViewToGoTo");

    var myHandler = function(sType, aArgs) {
        myHiddenField.value = aArgs[2][1];
    };

    cvAC.itemSelectEvent.subscribe(myHandler);

    oPushButtonB.on("click", toggleCV);

    var SendUserToView = function(e) {
        var myHiddenField = YAHOO.util.Dom.get("ViewToGoTo");
        location.href = (myHiddenField.value);
    };

    cvAC.containerCollapseEvent.subscribe(function() { YAHOO.util.Dom.removeClass(bToggler, "open") });
    cvAC.containerCollapseEvent.subscribe(function() { SendUserToView() });

    return {
        cvDS: cvDS,
        cvAC: cvAC
    };

}
