// JavaScript Document
/**************************************************************************************************
**************************This document is created by Souvik Chatterjee****************************
***************************************************************************************************/

//Global Variable declaration starts here..
//Default Values..can be modified

var imageWidth = 183;		//CHANGED					//Image width in pixel
var imageHeight = 117;									//Image height in pixel
var imageBorder = 2;									//Image border in pixel
var imageClass = "";									//Image Class name, has to be defined somewhere else
var imageBorderColor = "333333";							//Image border color in any format. e.g "rgb(0, 23, 255)","#336699","ffee66","fb0","red","darkblue","cadet blue"
var imageBorderStyle = "solid";							//Image border style
var tableCols = 4;										//Number of columns
var tableRows = 3;										//Number of rows
var tableWidth = 360;		//CHANGED					//Table width in pixel
var buttonPanelWidth = 20;								//Button panel width in pixel
var skipAlternateCell = true;							//true to skip alternate cell, false to show images in all cells
var showImageInFirstCell = true;
var showImageInLastCell= true;//true to show image in the first cell, false to start from the 2nd
var showZigZagOrder = true;								//true to follow the zigzag pattern, false to show images in a straight line
var showMouseOverEffect = true;							//true to show mouseover effect on the images
var showOnClickEvent = true;							//true to show onclick effect on the images
var autoTransitionEnabled = true;						//true to change images automatically, false to change them manually
var showButonPanel  =false;								//true to show button panel for image changing, false to hide
var transitionTime = 40; 								//Where 100 means 1 sec, duaraion of the image transition 
var timeInterval = 400; 								//Where 100 means 1 sec, duration of each image display For better effect timeInterval should be > 6*transitionTime
var itemList = new Array(); 							//*****Mandatory**** Contains the list of images to be shown
var nonItemList = new Array();
var nonItList = new Array();
//*****Mandatory**** Contains the image to be shown in between changing images
var btnList = new Array(); 								//*****Mandatory if showButonPanel=true**** Contains the images to be shown as buttons

//Default Variables End here

//Following can not edited...

var counter = 0;
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
var transitionTimeFactor;
var imageCount;
var imageStyle = "";
var buttonPanelHeight;


//Global Variable declaration ends here..

if((browser == "Microsoft Internet Explorer") )
{
	if( (version>=4))
	{
		imageStyle = '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);';
	}
}
else
{
	imageStyle = "opacity: 0.0;";
}


/**
This is the main function. This will create the table structure.
*/
function init()
{
	var color = new RGBColor(imageBorderColor);
	if(color.ok)
	{
		imageBorderColor = color.toHex();
	}
	transitionTimeFactor = 100/transitionTime;
	counter = 0;
	if(skipAlternateCell)
	{
		imageCount = Math.ceil((tableCols*tableRows)/2);
	}
	else
	{
		imageCount = (tableCols*tableRows);
	}
	buttonPanelHeight = tableRows*(imageHeight + 2);
	if(showButonPanel)
	{
		document.write('<table cellspacing="0" cellpadding="0" border="0">');
		document.write('<tr>');
		document.write('<td id="prevBtnTd" width="' + buttonPanelWidth + 'px" height="' + buttonPanelHeight + 'px" align="center" valign="middile">');
		createButtonPanel(0);
		document.write('</td><td>')
	}
	document.write("<table width='"+ tableWidth +"px' cellspacing='0' cellpadding='0' style='border-color: "+imageBorderColor+"; border-width: 0px 0px "+imageBorder+"px "+imageBorder+"px; border-style: "+imageBorderStyle+";'>");
	
	for(i = 0; i < tableRows; i++)
	{
		document.write("<tr>");
		for(j = 0; j < tableCols-1; j++)
		{
			var tableId;
				
			if(skipAlternateCell)
			{
				tableId = Math.floor((imageCount/tableRows)*i+(j/2));	
			}
			else
			{
				tableId = Math.floor((imageCount/tableRows)*i+(j));	
			}
			
			document.write('<td ');
			if(showImageInFirstCell)
			{
				document.write('id="imageTd' + tableId+ '" ');
			}
			document.write('width="'+ tableWidth/tableCols + ' px" align="left" valign="top" style="border-color: '+imageBorderColor+'; border-width:'+imageBorder+'px '+imageBorder+'px 0px 0px; border-style: '+imageBorderStyle+';">');
			if(!showImageInFirstCell)
			{	
				document.write("<img src='" + nonItemList[0].url + "' width='"+ imageWidth +"px' height='"+ imageHeight +"px' class = '"+imageClass+"'>");
			}
						
			document.write("</td>");
			if(skipAlternateCell)
			{
				showImageInFirstCell = !showImageInFirstCell;
			}
			
			
		}
		document.write("</tr>");
		if(showZigZagOrder && skipAlternateCell)
		{
			showImageInFirstCell = showImageInFirstCell;
		}
	}
	document.write("</table>");
	
	if(showButonPanel)
	{
		document.write('</td>');
		document.write('<td id="nxtBtnTd" width="' + buttonPanelWidth + 'px" height="' + buttonPanelHeight + 'px" align="center" valign="middile">');
		createButtonPanel(1);
		document.write('</td><tr></table>')
	}
	createImageElement();
	if(autoTransitionEnabled)
	{
		InitializeTimer(true);
	}
	else
	{
		InitializeTimer(false);
	}
}

function createImageElement()
{	
	if(itemList.length >= imageCount)
	{
		for(k = 0; k < imageCount; k++)
		{
			var imageTdId = "imageTd" + k;
			var imageTd = document.getElementById(imageTdId);
			if(imageTd != null)
			{
				showImages(imageTd);
			}
		}
		if(counter == (Math.floor(itemList.length/imageCount) - 1))
		{
			counter = 0;
		}
		else
		{
			counter = counter + 1;
		}
	}
	else
	{
		return false;
	}
}

function showImages(imageTd)
{
	var newImageId = ((counter*imageCount) + parseInt(imageTd.id.replace(/imageTd/, "")));	
	//alert(newImageId);
	var actionUrl = itemList[newImageId].action;
	var oImg = document.createElement('img');
	oImg.setAttribute('src', itemList[newImageId].url);
	oImg.id = "image"+newImageId;
	oImg.setAttribute('title', itemList[newImageId].title);
	oImg.setAttribute('height', imageHeight);
	oImg.setAttribute('width', imageWidth);
	oImg.setAttribute('class', imageClass);
	//if(autoTransitionEnabled)
	//{
		oImg.setAttribute('style', imageStyle);
	//}
	/*if(showOnClickEvent)
	{
		oImg.style.cursor = "pointer";
		oImg.onclick = function(){
			if (window.showModalDialog) 
			{
				window.showModalDialog(actionUrl,"name","dialogWidth:570px;dialogHeight:400px");
			} else {
				window.open(actionUrl,'name','height=400,width=570,toolbar=no,directories=no,status=no,continued from previous linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
			};
		}; 
	}*/
	if(showMouseOverEffect)
	{
		oImg.onmouseover = function(){
			oImg.width = imageWidth - 2;
			oImg.height = imageHeight - 2;
			oImg.style.border =  "" + imageBorderColor + " 1px solid";
			//alert(oImg.style.border);
		};
		oImg.onmouseout = function(){
			oImg.style.border = "" + imageBorderColor + " 0px solid";
			oImg.width = imageWidth;
			oImg.height = imageHeight;
			//alert(oImg.style.border);
		};
	}
	imageTd.appendChild(oImg);
}

function changeImages(imageTd,secs)
{
	if(secs <= 1)
	{	
		try{
			while (imageTd.childNodes[0]) {
				imageTd.removeChild(imageTd.childNodes[0]);
			}
		}
		catch(err){
			//Do nothing....
		}
	}
	else
	{
		var newImageStyle = "";
		if(browser=="Microsoft Internet Explorer")
		{
			if( (version>=4))
			{
				var imgOpacity = secs*transitionTimeFactor;
				newImageStyle = '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + imgOpacity + ')"; filter: alpha(opacity=' + imgOpacity + ');';
				imageTd.childNodes[0].style.filter = newImageStyle;
			}
		}	
		else
		{
			var imgOpacity = (secs*transitionTimeFactor)/100;
			imageTd.childNodes[0].style.opacity = imgOpacity;
		}
	}
}

function changeOpacity(imageTd,secs)
{
	var newImageStyle = "";
	if(browser=="Microsoft Internet Explorer")
	{
		if( (version>=4))
		{
			var imgOpacity = (secs*transitionTimeFactor);
			newImageStyle = '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + imgOpacity + ')"; filter: alpha(opacity=' + imgOpacity + ');';
			imageTd.childNodes[0].style.filter = newImageStyle;
		}
	}	
	else
	{
		var imgOpacity = (secs*transitionTimeFactor)/100;
		imageTd.childNodes[0].style.opacity = imgOpacity;
	}
}

function createButtonPanel(btn)
{ 
	var btnTd;
	if(btn == 0)
	{
		btnTd = document.getElementById('prevBtnTd');
	}
	else
	{
		btnTd = document.getElementById('nxtBtnTd');
	}
	var oImg = document.createElement('img');
	oImg.setAttribute('src', btnList[btn].url);
	oImg.id = "btnImage"+btn;
	if(browser == "Netscape")
	{
		oImg.setAttribute('style', "cursor:pointer;");
	}
	else
	{
		oImg.setAttribute('style', "cursor:pointer;padding-top:" + (buttonPanelHeight-oImg.width)/2 + "px;");
	}
	oImg.onclick = function(){
		updateCounter(btn);
		};
	btnTd.appendChild(oImg);
}

function updateCounter(btn)
{
	
	if(btn == 0)
	{
		if((counter) == 1)
		{
			counter = (Math.floor(itemList.length/imageCount) - 1);
		}
		else if((counter) == 0)
		{
			counter = (Math.floor(itemList.length/imageCount) - 2);
		}
		else
		{
			counter = counter - 2;
		}
	}
	changeImageOnClick();	
}

var clickTansitionTime = 2*transitionTime;
var onClickTimerRunning = false;
var onClickTimerID;
var onClickDelay = 1;
function changeImageOnClick()
{
	if (clickTansitionTime <= 0)
	{
		if(onClickTimerRunning)
        	clearTimeout(onClickTimerID);
    	onClickTimerRunning = false;
		clickTansitionTime = 2*transitionTime;
	}
	else if(clickTansitionTime > transitionTime)
	{
		for(a = 0; a < imageCount; a++)
		{
			var imageTdId = "imageTd" + a;
			var imageTd = document.getElementById(imageTdId);
			if(imageTd != null)
			{
				changeImages(imageTd,(clickTansitionTime - transitionTime));
			}
		}
		clickTansitionTime = clickTansitionTime - 1;
        onClickTimerRunning = true;
		onClickTimerID = self.setTimeout("changeImageOnClick()", onClickDelay);
	}
	else if(clickTansitionTime == transitionTime)
	{
		createImageElement();
		clickTansitionTime = clickTansitionTime - 1;
        onClickTimerRunning = true;
		onClickTimerID = self.setTimeout("changeImageOnClick()", onClickDelay);
	}
	else if((clickTansitionTime < transitionTime))
	{
		for(b = 0; b < imageCount; b++)
		{
			var imageTdId = "imageTd" + b;
			var imageTd = document.getElementById(imageTdId);
			if(imageTd != null)
			{
				changeOpacity(imageTd,(transitionTime - clickTansitionTime));
			}
		}
		clickTansitionTime = clickTansitionTime - 1;
        onClickTimerRunning = true;
		onClickTimerID = self.setTimeout("changeImageOnClick()", onClickDelay);
	}
	
}

var sec;
var timerID = null;
var timerRunning = false;
var delay = 1;

function InitializeTimer(isRecurring)
{
    // Set the length of the timer, in seconds
	secs = timeInterval;
    StopTheClock();
    StartTheTimer(isRecurring);
}

function StopTheClock()
{
    if(timerRunning)
        clearTimeout(timerID);
    timerRunning = false;
}

function StartTheTimer(isRecurring)
{
	if(isRecurring)
    {
		if (secs <= 0)
		{
			StopTheClock();
			// Here's where you put something useful that's
			// supposed to happen after the allotted time.
			createImageElement();
			if(isRecurring)
			{
				InitializeTimer(isRecurring);
			}
		}
		else if(secs < transitionTime)
		{
			for(m = 0; m < imageCount; m++)
			{
				var imageTdId = "imageTd" + m;
				var imageTd = document.getElementById(imageTdId);
				if(imageTd != null)
				{
					changeImages(imageTd,secs);
				}
			}
			secs = secs - 1;
			timerRunning = true;
			if(isRecurring)
			{
				timerID = self.setTimeout("StartTheTimer(true)", delay);
			}
			else
			{
				timerID = self.setTimeout("StartTheTimer(false)", delay);
			}
		}
		else if(secs > (timeInterval - transitionTime))
		{
			for(n = 0; n < imageCount; n++)
			{
				var imageTdId = "imageTd" + n;
				var imageTd = document.getElementById(imageTdId);
				if(imageTd != null)
				{
					changeOpacity(imageTd,(timeInterval - secs));
				}
			}
			secs = secs - 1;
			timerRunning = true;
			if(isRecurring)
			{
				timerID = self.setTimeout("StartTheTimer(true)", delay);
			}
			else
			{
				timerID = self.setTimeout("StartTheTimer(false)", delay);
			}
		}
		else
		{
			secs = secs - 1;
			timerRunning = true;
			if(isRecurring)
			{
				timerID = self.setTimeout("StartTheTimer(true)", delay);
			}
			else
			{
				timerID = self.setTimeout("StartTheTimer(false)", delay);
			}
		}
	}
	else
	{
		if(secs > (timeInterval - transitionTime))
		{
			for(n = 0; n < imageCount; n++)
			{
				var imageTdId = "imageTd" + n;
				var imageTd = document.getElementById(imageTdId);
				if(imageTd != null)
				{
					changeOpacity(imageTd,(timeInterval - secs));
				}
			}
			secs = secs - 1;
			timerRunning = true;
			timerID = self.setTimeout("StartTheTimer(false)", delay);
		}
		else
		{
			StopTheClock();
		}
	}
}



function RGBColor(color_string)
{
    this.ok = false;

    // strip any leading #
    if (color_string.charAt(0) == '#') { // remove # if any
        color_string = color_string.substr(1,6);
    }

    color_string = color_string.replace(/ /g,'');
    color_string = color_string.toLowerCase();

    // before getting into regexps, try simple matches
    // and overwrite the input
    var simple_colors = {
        aliceblue: 'f0f8ff',
        antiquewhite: 'faebd7',
        aqua: '00ffff',
        aquamarine: '7fffd4',
        azure: 'f0ffff',
        beige: 'f5f5dc',
        bisque: 'ffe4c4',
        black: '000000',
        blanchedalmond: 'ffebcd',
        blue: '0000ff',
        blueviolet: '8a2be2',
        brown: 'a52a2a',
        burlywood: 'deb887',
        cadetblue: '5f9ea0',
        chartreuse: '7fff00',
        chocolate: 'd2691e',
        coral: 'ff7f50',
        cornflowerblue: '6495ed',
        cornsilk: 'fff8dc',
        crimson: 'dc143c',
        cyan: '00ffff',
        darkblue: '00008b',
        darkcyan: '008b8b',
        darkgoldenrod: 'b8860b',
        darkgray: 'a9a9a9',
        darkgreen: '006400',
        darkkhaki: 'bdb76b',
        darkmagenta: '8b008b',
        darkolivegreen: '556b2f',
        darkorange: 'ff8c00',
        darkorchid: '9932cc',
        darkred: '8b0000',
        darksalmon: 'e9967a',
        darkseagreen: '8fbc8f',
        darkslateblue: '483d8b',
        darkslategray: '2f4f4f',
        darkturquoise: '00ced1',
        darkviolet: '9400d3',
        deeppink: 'ff1493',
        deepskyblue: '00bfff',
        dimgray: '696969',
        dodgerblue: '1e90ff',
        feldspar: 'd19275',
        firebrick: 'b22222',
        floralwhite: 'fffaf0',
        forestgreen: '228b22',
        fuchsia: 'ff00ff',
        gainsboro: 'dcdcdc',
        ghostwhite: 'f8f8ff',
        gold: 'ffd700',
        goldenrod: 'daa520',
        gray: '808080',
        green: '008000',
        greenyellow: 'adff2f',
        honeydew: 'f0fff0',
        hotpink: 'ff69b4',
        indianred : 'cd5c5c',
        indigo : '4b0082',
        ivory: 'fffff0',
        khaki: 'f0e68c',
        lavender: 'e6e6fa',
        lavenderblush: 'fff0f5',
        lawngreen: '7cfc00',
        lemonchiffon: 'fffacd',
        lightblue: 'add8e6',
        lightcoral: 'f08080',
        lightcyan: 'e0ffff',
        lightgoldenrodyellow: 'fafad2',
        lightgrey: 'd3d3d3',
        lightgreen: '90ee90',
        lightpink: 'ffb6c1',
        lightsalmon: 'ffa07a',
        lightseagreen: '20b2aa',
        lightskyblue: '87cefa',
        lightslateblue: '8470ff',
        lightslategray: '778899',
        lightsteelblue: 'b0c4de',
        lightyellow: 'ffffe0',
        lime: '00ff00',
        limegreen: '32cd32',
        linen: 'faf0e6',
        magenta: 'ff00ff',
        maroon: '800000',
        mediumaquamarine: '66cdaa',
        mediumblue: '0000cd',
        mediumorchid: 'ba55d3',
        mediumpurple: '9370d8',
        mediumseagreen: '3cb371',
        mediumslateblue: '7b68ee',
        mediumspringgreen: '00fa9a',
        mediumturquoise: '48d1cc',
        mediumvioletred: 'c71585',
        midnightblue: '191970',
        mintcream: 'f5fffa',
        mistyrose: 'ffe4e1',
        moccasin: 'ffe4b5',
        navajowhite: 'ffdead',
        navy: '000080',
        oldlace: 'fdf5e6',
        olive: '808000',
        olivedrab: '6b8e23',
        orange: 'ffa500',
        orangered: 'ff4500',
        orchid: 'da70d6',
        palegoldenrod: 'eee8aa',
        palegreen: '98fb98',
        paleturquoise: 'afeeee',
        palevioletred: 'd87093',
        papayawhip: 'ffefd5',
        peachpuff: 'ffdab9',
        peru: 'cd853f',
        pink: 'ffc0cb',
        plum: 'dda0dd',
        powderblue: 'b0e0e6',
        purple: '800080',
        red: 'ff0000',
        rosybrown: 'bc8f8f',
        royalblue: '4169e1',
        saddlebrown: '8b4513',
        salmon: 'fa8072',
        sandybrown: 'f4a460',
        seagreen: '2e8b57',
        seashell: 'fff5ee',
        sienna: 'a0522d',
        silver: 'c0c0c0',
        skyblue: '87ceeb',
        slateblue: '6a5acd',
        slategray: '708090',
        snow: 'fffafa',
        springgreen: '00ff7f',
        steelblue: '4682b4',
        tan: 'd2b48c',
        teal: '008080',
        thistle: 'd8bfd8',
        tomato: 'ff6347',
        turquoise: '40e0d0',
        violet: 'ee82ee',
        violetred: 'd02090',
        wheat: 'f5deb3',
        white: 'ffffff',
        whitesmoke: 'f5f5f5',
        yellow: 'ffff00',
        yellowgreen: '9acd32'
    };
    for (var key in simple_colors) {
        if (color_string == key) {
            color_string = simple_colors[key];
        }
    }
    // emd of simple type-in colors

    // array of color definition objects
    var color_defs = [
        {
            re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
            example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
            process: function (bits){
                return [
                    parseInt(bits[1]),
                    parseInt(bits[2]),
                    parseInt(bits[3])
                ];
            }
        },
        {
            re: /^(\w{2})(\w{2})(\w{2})$/,
            example: ['#00ff00', '336699'],
            process: function (bits){
                return [
                    parseInt(bits[1], 16),
                    parseInt(bits[2], 16),
                    parseInt(bits[3], 16)
                ];
            }
        },
        {
            re: /^(\w{1})(\w{1})(\w{1})$/,
            example: ['#fb0', 'f0f'],
            process: function (bits){
                return [
                    parseInt(bits[1] + bits[1], 16),
                    parseInt(bits[2] + bits[2], 16),
                    parseInt(bits[3] + bits[3], 16)
                ];
            }
        }
    ];

    // search through the definitions to find a match
    for (var i = 0; i < color_defs.length; i++) {
        var re = color_defs[i].re;
        var processor = color_defs[i].process;
        var bits = re.exec(color_string);
        if (bits) {
            channels = processor(bits);
            this.r = channels[0];
            this.g = channels[1];
            this.b = channels[2];
            this.ok = true;
        }

    }

    // validate/cleanup values
    this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
    this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
    this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b);

    // some getters
    this.toRGB = function () {
        return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
    }
    this.toHex = function () {
        var r = this.r.toString(16);
        var g = this.g.toString(16);
        var b = this.b.toString(16);
        if (r.length == 1) r = '0' + r;
        if (g.length == 1) g = '0' + g;
        if (b.length == 1) b = '0' + b;
        return '#' + r + g + b;
    }

}