var eventCenter = new EventCenter();
//var itemHeight = 63;

function eedcHeader(data, scrollMask,scrollArea, scrollLeft, scrollRight,featureImg,featureCopy,featureLink, slideTime){
    this.data = data;
    this.scrollMask = document.getElementById(scrollMask);
    this.featureArea;
    this.listing;
    this.scroller;
    this.timer;
    this.slideTime = slideTime * 1000;
    this.currentIndex;
    
    this.itemsPerScreen = 4 ;
    
    this.init = function(){
        if(!isIE){
            document.getElementById(featureImg).style.opacity = 0;
            document.getElementById(featureCopy).style.opacity = 0;
            document.getElementById(featureLink).style.opacity = 0;
        }else{
            document.getElementById(featureImg).style.filter = "alpha(opacity=0)";
            document.getElementById(featureCopy).style.filter = "alpha(opacity=0)";
            document.getElementById(featureLink).style.filter = "alpha(opacity=0)";
        }
    
        var sa = document.getElementById(scrollArea);
        sa.innerHTML = "";
        
        this.currentIndex = 0;
        this.featureArea = new FeatureArea(featureImg, featureCopy, featureLink, this.data[this.currentIndex]);
        
        this.listing = new Listing(this.data, scrollArea, this.currentIndex, this);
        eventCenter.addEventListener("select", this.listing, this, "onSelectItem");
        
        this.setSlide();
    
        var width = (this.data.length) * 224;
        sa.style.width = String(width+"px");
        
        document.getElementById(scrollLeft).style.visibility = "hidden";
        if(this.data.length > this.itemsPerScreen){
            this.scroller = new Scroller(scrollLeft, scrollRight, scrollArea, 896, 224);
            new Tween(document.getElementById(scrollRight), 500, {opacity:1}, {delay:0});
        }else{
            document.getElementById(scrollRight).style.visibility = "hidden";
        }
        
        this.startShow();
        
    }
    
    this.onSelectItem = function(evtObj){
        if(evtObj.clicked)this.stopShow();
        this.currentIndex = evtObj.index;
        this.featureArea.setSlide(evtObj.data);
    }
    
    this.onListingLoaded = function(evtObj){
        //console.log("LOADED!");
    }
    
    this.startShow = function(){
        if(this.data.length > 1){
            var thisObj = this;
            this.timer = setInterval(function() { thisObj.slideAction(); },this.slideTime);
        }
    }
    
    this.slideAction = function(){
        this.currentIndex ++;
        if(this.currentIndex >= this.data.length) this.currentIndex = 0;
        
        //determine screen of listing!
        //extra functionality is client wishes to include it
        /*
        var screen = Math.ceil((this.currentIndex + 1)/this.itemsPerScreen);
        this.scroller.setScreen(screen);
        */
        this.setSlide();
    }
    
    this.setSlide = function(){
        if(this.listing != null){
            this.listing.onRollItem(document.getElementById(this.data[this.currentIndex].id));
            this.listing.selectItem(document.getElementById(this.data[this.currentIndex].id), false);
        }
    }
    
    this.stopShow = function(){ clearInterval(this.timer); }
    
    this.init();
}
function FeatureArea(img, text, link, initSlide){
    this.featureImg = document.getElementById(img);
    this.featureCopy = document.getElementById(text);
    this.featureLink = document.getElementById(link);
    
    this.currentSlideData = initSlide;
    
    this.init = function(){
        if(this.currentSlideData) this.showCurrentSlide();
    }
    
    this.setSlide = function(slideObj){
        if(this.currentSlideData != slideObj){
            this.currentSlideData = slideObj;
            this.hideCurrentSlide();
            //this.showCurrentSlide();
        }
    }
    
    this.hideCurrentSlide = function(){
        new Tween(this.featureCopy, 500, {opacity:0}, {delay:0});
        
        if(this.featureLink.style.visibility == "visible") new Tween(this.featureLink, 500, {opacity:0}, {delay:0});
        new Tween(this.featureImg, 500, {opacity:0}, {delay:50,scope:this, completeListener:"showCurrentSlide"});
    }
    
    this.showCurrentSlide = function(){
        
        this.featureImg.src = this.currentSlideData.image;
        this.featureImg.style.filter = "alpha(opacity=0)";
        
        this.featureCopy.innerHTML = "<h1>"+this.currentSlideData.title+"</h1><p>"+this.currentSlideData.copy+"</p><a id='learnMore' alt='learn more' href='"+this.currentSlideData.storyURL+"' style='filter:alpha(opacity=0);'><img src='/images/eedc-master/ui/btnLearnMore.png' /></a>";
        
        //this.featureCopy.innerHTML = "<h1>"+this.currentSlideData.title+"</h1><p>"+this.currentSlideData.copy+"</p><img src='/images/eedc-master/ui/btnLearnMore.png' />";
        
        
        this.featureLink = document.getElementById(link);
        
        if(this.currentSlideData.storyURL != null && this.currentSlideData.storyURL != ""){
            this.featureLink.style.visibility = "visible";
            this.featureLink.href = this.currentSlideData.storyURL;
            
            new Tween(this.featureLink, 500, {opacity:1}, {delay:250});
        }else{
            this.featureLink.style.visibility = "hidden";
        }
        
        new Tween(this.featureCopy, 500, {opacity:1}, {delay:250});
        new Tween(this.featureImg, 500, {opacity:1}, {delay:0});
        
    }
    
    this.init();
}
function Listing(data,holder, initIndex, parent){
    this.data = data;
    this.holder = document.getElementById(holder);
    this.imageLoader;
    
    this.currentLoadIndex;
    this.numLoaded = 0;
    
    this.initIndex = initIndex;
    this.selected;
    this.parent = parent;
    
    this.init = function(){
        
        this.numLoaded = 0;
        this.currentLoadIndex = 0;
        this.holder.innerHTML = "";
        this.selected = null;
        
        this.imageLoader = new ImageLoader();
        this.imageLoader.setImage(this.data[this.currentLoadIndex].thumb, {scope:this, func:"onImageLoadComplete"});
    }
    
    this.onImageLoadComplete = function(target){
        var current = this.data[this.currentLoadIndex];
        current.id  = "featureListItem"+this.currentLoadIndex;
        //current.coverId = "featureListItemCover"+this.currentLoadIndex;
        
        if(!isIE){
            var g = getGrayScale(target);
            current.grey = g;   
            //this.holder.innerHTML += "<img id='"+current.id+"' src='"+current.grey+"' />";
            this.holder.innerHTML += "<div class='imgHolder' id='"+current.id+"'><div class='imgCover' id='"+current.id+"Cover'></div><img id='"+current.id+"Image' alt='"+current.alt+"' src='"+current.grey+"' /></div>";
        }else{
            //this.holder.innerHTML += "<img id='"+current.id+"' src='"+current.thumb+"' style='filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)' />";
            this.holder.innerHTML += "<div class='imgHolder' id='"+current.id+"'><div class='imgCover' id='"+current.id+"Cover'></div><img id='"+current.id+"Image' alt='"+current.alt+"' src='"+current.thumb+"' style='filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)' /></div>";
            
            //style='filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)' 
        }
        
        this.currentLoadIndex++;
        if(this.currentLoadIndex < this.data.length){
            this.imageLoader.setImage(this.data[this.currentLoadIndex].thumb, {scope:this, func:"onImageLoadComplete"});
        }else{
            this.activateItems();
            this.parent.setSlide(this.data[0]);
        }
        
    }
    
    this.activateItems = function(){
        var l = this.data.length;
        var thisObj = this;
        for(var i=0;i<l;i++){
            var current = document.getElementById("featureListItem"+i);
            current.onclick=function(){ thisObj.selectItem(this, true); }
            current.onmouseover=function(){thisObj.onRollItem(this); }
            current.onmouseout=function(){thisObj.onRollOutItem(this); }
        }
    }
    
    this.selectItem = function(target, clicked){
        if(target != this.selected){
            var index = getFromArray(this.data, "id", target.id);
            if(index != null){
                var current = this.data[index];
                var old = this.selected;
                this.selected = target;
                if(old) this.onRollOutItem(old);
                
                eventCenter.dispatchEvent("select",this, {item:target, data:current, clicked:clicked, index:index});
            }
        }
    }
    
    this.onRollItem = function(target){
        if(target != this.selected){
            var index = getFromArray(this.data, "id", target.id);
            var current = this.data[index];
            var img = document.getElementById(target.id+"Image");
            document.getElementById(target.id+"Cover").style.visibility = "hidden";
            if(!isIE){
                img.src = current.thumb;
            }else{
                img.filters.item("DXImageTransform.Microsoft.BasicImage").enabled=false; 
            }
        }
    }
    
    this.onRollOutItem = function(target){
        if(target != this.selected){
            var index = getFromArray(this.data, "id", target.id);
            var current = this.data[index];
            var img = document.getElementById(target.id+"Image");
            document.getElementById(target.id+"Cover").style.visibility = "visible";
            if(!isIE){
                img.src = current.grey;
            }else{
                img.filters.item("DXImageTransform.Microsoft.BasicImage").enabled=true; 
            }
        }
        
    }
    
    this.getIndex = function(array, item){
        var l = array.length;
        for(var i=0;i<l;i++){
            if(array[i] == item) return i;
        }
        return null;
    }
    
    this.init();
}
function Scroller(left,right,target, maskWidth, scrollWidth){
    this.scrollLeft = document.getElementById(left);
    this.scrollRight = document.getElementById(right);
    this.scrollTarget = document.getElementById(target);
    this.maskWidth = maskWidth;
    this.scrollWidth = scrollWidth;
    this.maxScroll;
    this.inScroll = false;
    
    this.init = function(){
        var thisObj = this;
        this.scrollLeft.onclick = function(){ thisObj.doScroll(1); }
        this.scrollRight.onclick = function(){ thisObj.doScroll(-1); }
        
        this.scrollTarget.style.left = "0px";
        this.scrollTarget.style.position = "relative";
        
        this.maxScroll = parseInt(this.scrollTarget.style.width) - 1;
        //if(isIE)this.maxScroll++; 
    }
    
    this.doScroll = function(dir){
        //determine scroll!
        if(this.inScroll == false){
            this.inScroll = true;
            var currentScroll = parseInt(this.scrollTarget.style.left);
            var futureScroll = currentScroll + (dir * this.scrollWidth);
            
            if(futureScroll <= 0 && Math.abs(futureScroll) <= this.maxScroll){
                new Tween(this.scrollTarget, 500, {left:futureScroll}, {delay:0, ease:"regularEaseOut", scope:this, completeListener:"onScrollComplete"});
            }
            this.setArrowStates(futureScroll);
        }
    }
    
    this.setScreen = function(screenNum){
        var newTop = -(screenNum - 1) * this.maskHeight;
        if(this.scrollTarget.style.top != newTop){
            new Tween(this.scrollTarget, 500, {top:newTop}, {delay:0, ease:"regularEaseOut"});
            this.setArrowStates(newTop);
        }
    }
    
    this.setArrowStates = function(futureScroll){
        if(futureScroll >= 0){
            new Tween(this.scrollLeft, 500, {opacity:0}, {delay:0, scope:this, completeListener:"onUpFadeOutComplete"});
        }else if(this.scrollLeft.style.visibility=="hidden"){
            this.scrollLeft.style.visibility="visible";
            new Tween(this.scrollLeft, 500, {opacity:1}, {delay:0});
        }
        
        if(Math.abs(futureScroll) > (this.maxScroll - this.maskWidth)){
            new Tween(this.scrollRight, 500, {opacity:0}, {delay:0, scope:this, completeListener:"onDownFadeOutComplete"});
        }else if(this.scrollRight.style.visibility == "hidden"){
            this.scrollRight.style.visibility = "visible";
            new Tween(this.scrollRight, 500, {opacity:1}, {delay:0});
        }
        
        //this.scrollDown.filters.alpha.opacity = 100;
    }
    
    this.onUpFadeOutComplete = function(){
        this.scrollLeft.style.visibility="hidden";
    }
    
    this.onDownFadeOutComplete = function(){
        this.scrollRight.style.visibility = "hidden";
    }
    
    this.onScrollComplete = function(){
        this.inScroll = false;
    }
    
    this.init();
    
}
function EventCenter(){
    this.listeners = [];
    this.addEventListener = function(type,source, target, method){
        this.listeners.push({type:type,source:source, target:target, method:method});
    }
    
    this.dispatchEvent= function(type,target,data){
        var l = this.listeners.length;
        for(var i=0;i<l;i++){
            var c = this.listeners[i];
            if(c.source == target && c.type == type) c.target[c.method](data);
        }
    }
}
function getFromArray(array, prop, value){
    var l = array.length;
    for(var i=0;i<l;i++){
        if(array[i][prop]==value){
            return i;
        }
    }
    return null;
}
function getGrayScale(imgObj){
    try {
        var canvas = document.createElement('canvas');
    
        var canvasContext = canvas.getContext('2d');
        
        var imgW = imgObj.width;
    
        var imgH = imgObj.height;
    
        canvas.width = imgW;
        canvas.height = imgH;
        
        canvasContext.drawImage(imgObj, 0, 0, imgW, imgH);
        
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
        
        for(var y = 0; y < imgPixels.height; y++){
             for(var x = 0; x < imgPixels.width; x++){
                  var i = (y * 4) * imgPixels.width + x * 4;
                  var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                  imgPixels.data[i] = avg;
                  imgPixels.data[i + 1] = avg;
                  imgPixels.data[i + 2] = avg;
             }
        }
        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }catch(err) {
    }
}