Ext.onReady(function() {
	var introShown = Ext.util.Cookies.get('introShown');
	if(introShown == null || introShown == "")
	{
		introShown = false;
	}
	
	if(swfobject.hasFlashPlayerVersion("8.0") && !introShown)
	{
		var introDiv = document.createElement('div');
		introDiv.id = "aimpointIntro";
		introDiv.style.position = 'absolute';
		introDiv.style.width = '100%';
		introDiv.style.top = '110px';
		introDiv.style.left = '0';
		introDiv.style.zIndex = '100';
		introDiv.innerHTML = '<div id="flashIntro"></div>';
		document.body.appendChild(introDiv);
		
		var content = document.getElementById('col1');
		var divArray = content.getElementsByTagName('div');
		var hits = 0;
		
		for(var i=0;i<divArray.length;i++)
		{
			if(divArray[i].className == 'flex_2col') {
				divArray[i].style.visibility = "hidden";
				hits++;
				if(hits == 2) {
					break;
				}
			}
		}
		content = null;
		divArray = null;
		
		flashvars['intro'] = (introShown)?'false':'true';
		
		var params = {
			menu: "false",
			bgcolor: "#FFFFFF",
			scale: "noscale",
			wmode: "transparent"
		}
		
		var ch = document.body.clientHeight;
		
		swfobject.embedSWF("fileadmin/templates/Aimpoint/intro/swf/intro.swf", "flashIntro", "100%", (ch-110)+"px", "8.0.0", 0, flashvars, params);
		//setTimeout(resizeIntroDiv, 8000);
		Ext.util.Cookies.set('introShown',true);
	} else {
        var tpl = new Ext.Template(
        '<div class="csc-textpic csc-textpic-center csc-textpic-above">'
        +    '<div class="csc-textpic-imagewrap">'
        +        '<a href="{url}" onclick="Ext.util.Cookies.set(\'aimpoint_segment\', \'{segment}\')">'
        +            '<span style="background: url({image}) no-repeat;" class="intro_image">'
        +                '<span class="banner_text"><span class="text">{text}</span>'
        +                   '<span class="raphael_graphic" id="raphael_{count}"></span>'
        +                   '<span class="mouseover_viewport"><span class="raphael_mouseover_graphic" id="raphael_mouseover_{count}"></span></span>'
        +                '</span>'
        +                '<span class="hoverfix_cover"></span>'
        +            '</span>'
        +        '</a>'
        +    '</div>'
        +'</div>'
        +'<div class="csc-textpic-clear"></div>');
        var imageAreas = Ext.query('#tx_pxaintro .canvas');
       
        
        for (var i=0; i<imageAreas.length;i++)
        {
            tpl.append(imageAreas[i], {
                url: pxaIntroImages[i].url,
                image: pxaIntroImages[i].image,
                text: pxaIntroImages[i].text,
                segment: pxaIntroImages[i].segment,
                count: i
            });
            var r = Raphael("raphael_"+i,300,40);
            var r_mouseover = Raphael("raphael_mouseover_"+i,300,40);
            var colorH = pxaIntroImages[i].colorHighlight;

            if (i%2==0) {
                r.rect(0,0,300,40,5).attr({gradient: "0-"+pxaIntroImages[i].color+":0-"+pxaIntroImages[i].color+":80", opacity: .05, stroke:0});
                r_mouseover.rect(0,0,300,40,5).attr({gradient: "0-"+pxaIntroImages[i].colorHighlight+":0-"+pxaIntroImages[i].colorHighlight+":80", opacity: .01, stroke:0});
            } else {
                r.rect(0,0,300,40,5).attr({gradient: "180-"+pxaIntroImages[i].color+":0-"+pxaIntroImages[i].color+":80", opacity: .05, stroke:0});
                r_mouseover.rect(0,0,300,40,5).attr({gradient: "180-"+colorH+":0-"+colorH+":80", opacity: .01, stroke:0});
            }
            
        }
        
        //mouse over effects
        var mouseOverEls = Ext.query('#tx_pxaintro .col1 .hoverfix_cover');
        for (var i=0; i<mouseOverEls.length;i++)
        {
            Ext.get(mouseOverEls[i]).on('mouseover', function(e, el) {
                //if (Ext.get(e.getTarget()) == Ext.get(this)) {
                    var obj = Ext.get(this).parent().child('.raphael_mouseover_graphic');
                    obj.shift({left:0,duration: 0.3});
                //}
            });
            Ext.get(mouseOverEls[i]).on('mouseout', function(e, el) {
                //if (Ext.get(e.getTarget()) == this && !e.within(this.dom,true,true)) {
                    var obj = Ext.get(this).parent().child('.raphael_mouseover_graphic');
                    obj.shift({left:-300,duration: 0.3});
                //}
            });
        }
        
        var mouseOverEls = Ext.query('#tx_pxaintro .col2 .hoverfix_cover');
        for (var i=0; i<mouseOverEls.length;i++)
        {
            Ext.get(mouseOverEls[i]).on('mouseover', function(e, el) {
            //    if (e.within(this.dom,true,true)) {
                    var obj = Ext.get(this).parent().child('.raphael_mouseover_graphic');
                    obj.shift({right:0,duration: 0.3});
            //    }
            });
            Ext.get(mouseOverEls[i]).on('mouseout', function(e, el) {
            //    if (!e.within(this.dom,true,true)) {
                    var obj = Ext.get(this).parent().child('.raphael_mouseover_graphic');
                    obj.shift({right:-300,duration: 0.3});
            //    }
            });
        }
        
	}	
});

function resizeIntroDiv() {
	//Resize the div
	var introDiv = document.getElementById('aimpointIntro');
	introDiv.style.width = "725px";
	introDiv.style.marginLeft = "-481px";
	introDiv.style.left = "50%";
	
	introDiv.style.height = "415px";
	document.getElementById('flashIntro').style.height = '415px';
}