var _blend_count = 0;
// http://www.brainerror.net/scripts_js_blendtrans.php
function blendimage(divid, imageid, imagefile, millisec) { //alert(_blend_count);
	if(_blend_count == 0 || _blend_count >= 100) { 
	    var speed = Math.round(millisec / 100);
	    var timer = 0;

	    //set the current image as background
	    document.getElementById(divid).style.backgroundImage = document.getElementById(imageid).style.backgroundImage;
	    //make image transparent
	    changeOpac(0, imageid);

	    //make new image
	    document.getElementById(imageid).style.backgroundImage = 'url('+imagefile+')';
	    //alert(imagefile);
	    //fade in image
	    //BannerSwap.incBlendCount( );
	    for(var i = 0;i <= 100;i++) { //alert(i);
	        setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
	        timer++;
	    } 
    
	    changeOpac(100, imageid); 
	} else { 
	    document.getElementById(imageid).style.backgroundImage = 'url('+imagefile+')';
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id) { _blend_count = opacity;
     var object = document.getElementById(id).style;
     object.opacity = (opacity / 101);
     object.MozOpacity = (opacity / 101);
     object.KhtmlOpacity = (opacity / 100);
     object.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + opacity + ")";
}

var kROTATE_TIME_IN_MS = 80000;//7000;
var kBLEND_TIME_IN_MS = 1000;

var bannerImages = new Array;
var forward = true;
var begin = true;

bannerImages[0] = new Image(386,174); 
bannerImages[1]	= new Image(386, 174);
bannerImages[2] = new Image(386, 174);
bannerImages[3] = new Image(386, 174);
bannerImages[4] = new Image(386, 174);

bannerImages[4].src = 'resource/image/geographic_reporting.jpg';
bannerImages[1].src = 'resource/image/text_dmo.jpg';
bannerImages[3].src = 'resource/image/marketing_cost_overlay.jpg';
bannerImages[2].src = 'resource/image/media_calendar.jpg';
bannerImages[0].src = 'resource/image/multitrend_reporting.jpg';

var Banner = new Class( {
    is_first:		true
    , is_blending:  false
    , has_started:  true
    , has_finished: true
    , _next:        null
    , _previous:    null
    , getNext:      function( ) { return this._next; }
    , setNext:      function( i ) { this._next = this._next + 1; }
    , getPrevious:  function( ) { return this._previous; }
    , setPrevious:  function( i ) { this._previous = this._previous + 1; }
    , getBlendCount: function( ) { return _blend_count; }
    , stopBlending: function( which ) {
	document.getElementById('tags').style.backgroundImage = 'url('+bannerImages[which].src+')'; 
    }
    , jumpTo:       function( which ) {

	//this.incBlendCount();
        updateHeroImage( which );
    }

    , startAutoFade:       function( ) {
        //THIS WILL BE USED IN SUCH A MANNER THAT
    }

    , stopAutoFade:      function( ) {

    }

} );

var BannerSwap = new Banner( );

function updateHeroImage( uvThread ) { 
//	_blend_count = bannerImages[ uvThread ].src; 
        blendimage(
					 'tags1' 
					,'tags' 
					, bannerImages[ uvThread ].src
					, kBLEND_TIME_IN_MS
				);
}


            window.addEvent('domready', function(){
    var el = $('gateway_link_1'),
        g1 = $('gateway_link_1'),
        g2 = $('gateway_link_2'),
        g3 = $('gateway_link_3'),
        g4 = $('gateway_link_4'),
        g5 = $('gateway_link_5'),
        color = el.getStyle('backgroundColor');
        color = '#FFFFFF';
	//var myVerticalSlide = new Fx.Slide('sidebar');
	
	//$('sidebar').parentNode.setStyle("width","195px");
	//$('sidebar').parentNode.setStyle('float', 'left');

	//var defaultCopy = $('sidebar').innerHTML;

    g1.set('opacity', 1).addEvents({
                mouseenter: function(){
                        // This morphes the opacity and backgroundColor
                        g2.morph({opacity: 0.5, backgroundColor: color});
                        g3.morph({
                                opacity: 0.5,
                                backgroundColor: color
                        });
                        g4.morph({opacity: 0.5, backgroundColor: color});
                        g5.morph({opacity: 0.5, backgroundColor: color});
			BannerSwap.jumpTo(0);
			/*myVerticalSlide.slideOut().chain(function(){
                		$('sidebar').set('html', '<h2>Multi Trend Reporting</h2><p>All of your most important metrics, viewable in one convenient location.</p>');
                		myVerticalSlide.slideIn();
            		});;*/
                },
                mouseleave: function(){
                        // Morphes back to the original style
                        g2.morph({opacity: 1, backgroundColor: color});
                        g3.morph({
                                opacity: 1,
                                backgroundColor: color
                        });
                        g4.morph({opacity: 1, backgroundColor: color});
                        g5.morph({opacity: 1, backgroundColor: color});
			/*myVerticalSlide.slideOut().chain(function(){
				$('sidebar').set('html', defaultCopy);
                		myVerticalSlide.slideIn();
            		});;*/
                }
                });

    g2.set('opacity', 1).addEvents({
        mouseenter: function(){
            // This morphes the opacity and backgroundColor
            g1.morph({opacity: 0.5, backgroundColor: color});
            g3.morph({
                opacity: 0.5,
                backgroundColor: color
            });
            g4.morph({opacity: 0.5, backgroundColor: color});
            g5.morph({opacity: 0.5, backgroundColor: color});
		BannerSwap.jumpTo(1);
        },
        mouseleave: function(){
            // Morphes back to the original style
            g1.morph({opacity: 1, backgroundColor: color});
            g3.morph({
                opacity: 1,
                backgroundColor: color
            });
            g4.morph({opacity: 1, backgroundColor: color});
            g5.morph({opacity: 1, backgroundColor: color});
        }
        }); 

    g3.set('opacity', 1).addEvents({
                mouseenter: function(){
                        // This morphes the opacity and backgroundColor
                        g1.morph({opacity: 0.5, backgroundColor: color});
                        g2.morph({
                                opacity: 0.5,
                                backgroundColor: color
                        });
                        g4.morph({opacity: 0.5, backgroundColor: color});
                        g5.morph({opacity: 0.5, backgroundColor: color});
			BannerSwap.jumpTo(2);

                },
                mouseleave: function(){
                        // Morphes back to the original style
                        g1.morph({opacity: 1, backgroundColor: color});
                        g2.morph({
                                opacity: 1,
                                backgroundColor: color
                        });
                        g4.morph({opacity: 1, backgroundColor: color});
                        g5.morph({opacity: 1, backgroundColor: color});
			/*myVerticalSlide.slideOut().chain(function(){                                
				$('sidebar').set('html', defaultCopy);
                		myVerticalSlide.slideIn();
            		});;*/
                }
                });

    g4.set('opacity', 1).addEvents({
                mouseenter: function(){
                        // This morphes the opacity and backgroundColor
                        g1.morph({opacity: 0.5, backgroundColor: color});
                        g2.morph({
                                opacity: 0.5,
                                backgroundColor: color
                        });
                        g3.morph({opacity: 0.5, backgroundColor: color});
                        g5.morph({opacity: 0.5, backgroundColor: color});
			BannerSwap.jumpTo(3);
			/*myVerticalSlide.slideOut().chain(function(){
				$('sidebar').set('html', '<h2>Marketing Cost Overlay</h2><p>See costs directly alongside response to view immediate ROI for your marketing efforts.</p>');
				myVerticalSlide.slideIn();
                        });;*/

                },
                mouseleave: function(){
                        // Morphes back to the original style
                        g1.morph({opacity: 1, backgroundColor: color});
                        g2.morph({
                                opacity: 1,
                                backgroundColor: color
                        });
                        g3.morph({opacity: 1, backgroundColor: color});
                        g5.morph({opacity: 1, backgroundColor: color});
			/*myVerticalSlide.slideOut().chain(function(){                                
				$('sidebar').set('html', defaultCopy);
                		myVerticalSlide.slideIn();
            		});;*/
                }
                });

    g5.set('opacity', 1).addEvents({
                mouseenter: function(e){
                        // This morphes the opacity and backgroundColor
                        g1.morph({opacity: 0.5, backgroundColor: color});
                        g2.morph({
                                opacity: 0.5,
                                backgroundColor: color
                        });
                        g3.morph({opacity: 0.5, backgroundColor: color});
                        g4.morph({opacity: 0.5, backgroundColor: color});
			BannerSwap.jumpTo(4);
			/*myVerticalSlide.slideOut().chain(function(e){
				$('sidebar').set('html', '<h2>Geographic Reporting</h2><p>Visual representation of important demographics, State-by-State or Country-by-Country.</p>');
				myVerticalSlide.slideIn();
                        });;*/
                },
                mouseleave: function(){
                        // Morphes back to the original style
                        g1.morph({opacity: 1, backgroundColor: color});
                        g2.morph({
                                opacity: 1,
                                backgroundColor: color
                        });
                        g3.morph({opacity: 1, backgroundColor: color});
                        g4.morph({opacity: 1, backgroundColor: color});
			/*myVerticalSlide.slideOut().chain(function(){
				$('sidebar').set('html', defaultCopy);
                		myVerticalSlide.slideIn();
            		});;*/
                }
                });
        });