dojo.require("dojo.io.script");
var _RotatorInstance1;

dojo.NodeList.prototype.hover = function (over, out) {
    return this.onmouseenter(over).onmouseleave(out || over);
}

function init() {
    var targetNode = dojo.byId("twitterDiv");
    dojo.io.script.get(
    {
        url: "http://twitter.com/statuses/user_timeline/spatialdev.json?callback=twitterCallback2&count=3&callback=?",
        callbackParamName: "callback"
    });

    //Preload Image
    dojox.image.preload(['img/learn_more_hover.png', 'img/arrow_left_hover.png']);

    _RotatorInstance1 = new dojox.widget.AutoRotator({
        transition: "dojox.widget.rotator.pan",
        duration: 8000,
        pauseOnManualChange: false,
        suspendOnHover: true,
        transitionParams: "wrap:true,quick:false,continuous:false,easing:dojo.fx.easing.quadOut,duration: 1000",
        panes: [{
            className: "heroItem active one",
            innerHTML: '<div class="left" style="margin-top: 13px;"><img src="img/hero/nwmaps.png" alt="Projects" /></div><div class="right"><div class="title">USER-CENTRIC SOLUTIONS</div><div class="description">People want information about their community without having to research which jurisdiction or administrative unit produces that data. All the information they\'re looking for should be at their fingertips - from a single search. Here at SpatialDev, we can do that.</div><a class="heroButton" href="services.htm#ux"></a></div><div class="clear"></div>'
            },
            {
                className: "heroItem active two",
                innerHTML: '<div class="left"> <img src="img/hero/mobile.png" alt="Projects" /></div><div class="right"><div class="title">Mobile Apps</div><div class="description"> Need a simple SMS application to reach Africa\'s rural edge? Or how about a native iOS application for the streets of suburbia?<br/>We have you covered...<br/>&nbsp;</div><a class="heroButton" href="services.htm#mobile"></a> </div><div class="clear"></div>'
            },
            {
                className: "heroItem active three",
                innerHTML: '<div class="left" style="margin-top: 11px;"><img src="img/hero/mappr.png" alt="Projects" /></div><div class="right"><div class="title">GLOBAL DEVELOPMENT</div><div class="description">Decisions are made every second that influence the health, welfare and future of the world and its people. Often, these decisions are made without adequate context or a greater understanding of the \'bigger picture.\' SpatialDev is working to change that culture.</div><a class="heroButton" href="services.htm#strategy"></a> </div><div class="clear"></div>'
            }]

        },
        dojo.byId("heroRotator"));

        Cufon.refresh('.heroItem .title');

        //Connect to Rotator Events
        dojo.connect(_RotatorInstance1, "onUpdate", onRotate);

        //Connect Cufon Mouseover for subhero
        dojo.query(".subheroTitle").hover(function (e) {
            HiLiteTile("#" + e.currentTarget.id);
        }, function (e) {
            if (_RotatorInstance1.idx + 1 == e.currentTarget.id.replace("subHeroTitle", "")) {

            }
            else {
                UnHiLiteTile("#" + e.currentTarget.id);
            }
        });

        dojo.query("#subHeroArea .item .left").hover(function (e) {
            HiLiteTile("#" + e.currentTarget.id.replace("Img", "Title"));
        }, function (e) {
            if (_RotatorInstance1.idx + 1 == e.currentTarget.id.replace("subHeroImg", "")) {

            }
            else {
                UnHiLiteTile("#" + e.currentTarget.id.replace("Img", "Title"));
            }
        });


        
    }

    //Highlights image title when image is rolled over
    function HiLiteTile(elementName) {
        Cufon.replace(elementName, { color: '#1c6888' });
    }

    //Highlights image title when image is rolled over
    function UnHiLiteTile(elementName) {
        Cufon.replace(elementName, { color: '#2DAEE4' });
    }

    function onRotate(e) {
        var r = _RotatorInstance1; 
        switch (e) {
            case "play": 
            
            case "pause":
                //this._togglePlay(); 
                break;
            case "onAfterTransition":
                changeSubHero(_RotatorInstance1.idx + 1);
                break;
        }
    }

function changeSubHero(index) {
    dojo.query(".item.active").removeClass("active");
    dojo.addClass(dojo.byId("item" + index), "active");
    dojo.publish('heroRotator/rotator/control', ['go', index - 1]);
    Cufon.refresh('.subheroTitle');
}

dojo.addOnLoad(init);