var TimeToFade = 1200;
var TimeToChange = 16000;
var maxNews = 4;
var curNews = 1;
var preNews = curNews;
var intervalID = -1;
var curFadeID = -1;

//-----News List-----------
var newsContentShown = new Array();
newsContentShown[0] = 1;
newsContentShown[1] = 0;
newsContentShown[2] = 1;
newsContentShown[3] = 1;

var newsTitles = new Array();
newsTitles[0] = "home/Home-with-Claytan.png";
newsTitles[1] = "home/Home-with-Claytan.png";
newsTitles[2] = "home/news/Claytan-Bathroom-Kitchen2.png"
newsTitles[3] = "home/news/Claytan-Homeware2.png";

var newsSummaries = new Array();
newsSummaries[0] = "Claytan Australia is the premium distributor of Luxury Bathroom and Kitchen products in Middle East, UK, India, Asia and Pacific Islands. Major brands include Claytan Sanitaryware, Claytan Tableware, Caroma, Dorf and Clark.";
newsSummaries[1] = "The Big 5 Exhibition";
newsSummaries[2] = "Bathroom, kitchen and laundry products need to be desirable, practical and functional. At Claytan, products are designed and manufactured to be realiable, for years to come.";
newsSummaries[3] = "To accommodate different lifestyles needs, Claytan has a wide range of homeware products with timeless design. Claytan homeware products are guaranteed to be 100% Lead and Cadmium safe, as well as safe for use in microwave ovens & dishwashers.";

var newsLinksDes = new Array();
newsLinksDes[0] = "Learn more...";
newsLinksDes[1] = "Learn more";
newsLinksDes[2] = "View Products.";
newsLinksDes[3] = "View Products.";

var newsLinks = new Array();
newsLinks[0] = "about";
newsLinks[1] = "news/big5";
newsLinks[2] = "bathroom_kitchen";
newsLinks[3] = "dinnerware";

var newsPicList = new Array();
newsPicList[0] = "home/Claytan-Home.png";
newsPicList[1] = "home/news/Claytan-At-Big5.png";
newsPicList[2] = "home/news/Claytan-Bathroom-Kitchen1.png";
newsPicList[3] = "home/news/Claytan-Homeware1.png";

//-----End of News List---------------

function initialise()
{
	intervalID = setInterval(function(){changeNews(curNews)},TimeToChange);
	resize();
}

//-----Window Resize
function resize() {
	if( typeof( window.innerWidth ) == 'number' ) 
	{
		//Non-IE
		windowWidth = window.innerWidth;
	} else if( document.documentElement && ( document.documentElement.clientWidth ) ) 
	{
		//IE 6+ in 'standards compliant mode'
		windowWidth = document.documentElement.clientWidth;
	} else if( document.body && ( document.body.clientWidth ) ) 
	{
		//IE 4 compatible
		windowWidth = document.body.clientWidth;
	} 
	var contentWidth = document.getElementById('content').offsetWidth;
	var tbg = document.getElementById('topBG');
	var bbg = document.getElementById('bottomBG');
	if(windowWidth < contentWidth) {
		tbg.style.width = "910px";
		bbg.style.width = "910px";
	} else {
		tbg.style.width = "100%";
		bbg.style.width = "100%";
	}
}

function mouseOverNewsMenu(eid)
{
	var hoverID = "newsMenuHover" + eid;
	var downID = "newsMenuDown" + eid;
	
	if(document.images[downID].style.visibility != "visible")
	{
		document.images[hoverID].style.visibility = "visible";
		document.images[hoverID].style.cursor='hand';
		
	}
}

function mouseOutNewsMenu(eid)
{
	var fullID = "newsMenuHover" + eid;
	document.images[fullID].style.visibility = 'hidden';
}

//------When user click on the news menu, switching the correspond news 
function selectNews(num)
{
	var fullID = "newsMenuHover" + (num+2);
	document.images[fullID].style.visibility = 'hidden';
	
	//-----If the content & pic are currently fading out, do not execute another fading command, but still change the content regardless.
	if(curFadeID != -1)
	{
		fade('news');
	}
	changeNews(num);
	
	//-----Reset timer.
	clearInterval(intervalID);
	intervalID = setInterval(function(){changeNews(curNews)},TimeToChange);
}

//-----When user click on the next news button, switching to the next news
function nextNews()
{
	selectNews(curNews);
}

//-----When user click on the previous news button, switching to the previous news
function previousNews()
{
	var previous = preNews-2;
	if(previous < 0)
	{
		previous = 3;
	}
	selectNews(previous);
}

//-----Switching into the next news and change news menu selection.
function changeNews(num)
{
	fade('news');
	
	var pre = "newsMenuDown" + (preNews+1);
	var preDown = document.getElementById(pre);
	preDown.style.visibility = "hidden";
	
	var next = "newsMenuDown" + (num+2);
	var nextDown = document.getElementById(next);
	nextDown.style.visibility = "visible";
	
	if(curFadeID != null && curFadeID != -1)
	{
		clearTimeout(curFadeID);
	}
	curFadeID = setTimeout(function(){updateNews(num)},TimeToFade);
	curNews = num + 1;
	preNews = curNews;
	if(curNews >= maxNews)
	{
		curNews = 0;
	}
}

//-----Update the news pic, content and url. Upon complete, reset the curFadeId to prevent fading interuption.
function updateNews(num)
{
	document.getElementById('newsPic').src = newsPicList[num];
	document.getElementById('newsPicBuffer').src = newsPicList[num+1];
	
	document.getElementById('picLink').setAttribute('href', newsLinks[num]);
	
	var newsContent = document.getElementById('newsContent');
	
	if(newsContentShown[num] == 1) {
		newsContent.style.visibility = 'visible';
		
		var newsLink = document.getElementById('newsLink');
		newsLink.setAttribute('href', newsLinks[num]);
		newsLink.innerHTML = newsLinksDes[num];
		
		document.getElementById('newsTitle').src = newsTitles[num];
		
		document.getElementById('newsSummary').innerHTML = newsSummaries[num];
	} else {
		newsContent.style.visibility = 'hidden';
	}
	
	fade('news');
	curFadeID = -1;
}

//-----Fading element in/out depending on the FadeState: 1 = Fading in, -1 = Fading out; 2 = Completed Fade in, -2 = Completed Fade out
function fade(eid)
{
  	var element = document.getElementById(eid);
  	if(element == null)
    	return;
   
  	if(element.FadeState == null)
  	{
	    if(element.style.opacity == null 
    	    || element.style.opacity == '' 
        	|| element.style.opacity == '1')
    	{
      		element.FadeState = 2;
   	 	}
    	else
    	{
      		element.FadeState = -2;
    	}
  	}
    
  	if(element.FadeState == 1 || element.FadeState == -1)
  	{
    	element.FadeState = element.FadeState == 1 ? -1 : 1;
    	element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  	}
  	else
  	{
    	element.FadeState = element.FadeState == 2 ? -1 : 1;
    	element.FadeTimeLeft = TimeToFade;
    	setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
  	}  
}

//-----Fading animation
function animateFade(lastTick, eid)
{  
  	var curTick = new Date().getTime();
  	var elapsedTicks = curTick - lastTick;
  
  	var element = document.getElementById(eid);
 
  	if(element.FadeTimeLeft <= elapsedTicks)
  	{
    	element.style.opacity = element.FadeState == 1 ? '1' : '0';
    	element.style.filter = 'alpha(opacity = ' 
        	+ (element.FadeState == 1 ? '100' : '0') + ')';
    	element.FadeState = element.FadeState == 1 ? 2 : -2;
    	return;
  	}
 
  	element.FadeTimeLeft -= elapsedTicks;
  	var newOpVal = element.FadeTimeLeft/TimeToFade;
  	if(element.FadeState == 1)
    	newOpVal = 1 - newOpVal;

	element.style.opacity = newOpVal;
  	element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
  
  	setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

function showTooltip(v,obj) {
	var pos = findPosition(obj);
	tooltip.show(v, pos[0] + obj.offsetWidth, pos[1]);
}

function findPosition(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
	}
	return [curleft,curtop];
}

//------show tooltip
var tooltip=function(){
	var id = 'tt';
	var top = 3;
	var left = 3;
	var maxw = 300;
	var speed = 10;
	var timer = 20;
	var endalpha = 95;
	var alpha = 0;
	var tt,t,c,b,h;
	var ie = document.all ? true : false;
	return{
		show:function(v,x,y){
			if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				t = document.createElement('div');
				t.setAttribute('id',id + 'top');
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				b = document.createElement('div');
				b.setAttribute('id',id + 'bot');
				tt.appendChild(t);
				tt.appendChild(c);
				tt.appendChild(b);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
			}
			tt.style.display = 'block';
			c.innerHTML = v;
			tt.style.width = 'auto';
			if(ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top;
			tt.style.top = (y - h) + 'px';
			tt.style.left = (x + left) + 'px';
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(1)},timer);
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){
					i = endalpha - a;
				}else if(alpha < speed && d == -1){
					i = a;
				}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .02;
				tt.style.filter = 'alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
		}
	 };
}();