/**
 * Toggle the state
 */
function toggleIt(id) {
	var state = document.getElementById(id).style.display;
	if (state == 'block') {
		document.getElementById(id).style.display = 'none';
	} else {
		document.getElementById(id).style.display = 'block';
	}
}

/**
 * JS for image gallery starts
 */
tb_pathToImage = "img/loading-thickbox.gif";
var mycarousel_itemList = [
    {url: "img/gallery/small/aksharDhaam.gif", title: "Akshardhaam"},
    {url: "img/gallery/small/indiaGate.gif", title: "India Gate"},
    {url: "img/gallery/small/jantarMantar.gif", title: "Jantar Mantar"},
    {url: "img/gallery/small/lalQila.gif", title: "Lal Quila"},
    {url: "img/gallery/small/lotusTemple.gif", title: "Lotus Temple"},
    {url: "img/gallery/small/humaanyuTomb.gif", title: "Humayun Tomb"},
    {url: "img/gallery/small/qutubMinar.gif", title: "Qutub Minar"},
    {url: "img/gallery/small/jamaMasjid.gif", title: "Jama Masjid"}
];

function mycarousel_itemLoadCallback(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }

        if (i > mycarousel_itemList.length) {
            break;
        }

        // Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0);

        // Apply thickbox
        tb_init(item);

        carousel.add(i, item);
    }
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    var url_m = item.url.replace(/small/g, 'large');
    return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
    });
});
/**
 * JS for image gallery ends
 */