var issue_xPos=0;
var issue_total_width=0;
$(document).ready(function(){
    //initSearch();
    //$("#tabs_highlights_noscript").addClass("x-hide-display");
    //$("#tabs_highlights").removeClass("x-hide-display");
    //initMenu();    
    $("#highlights_content").removeClass("x-hide-display");
    $("#highlights").removeClass("x-hide-display");
    $("#highlights_slider_panel").removeClass("x-hide-display");

    if($("#issues_scroller").length>0){
		$("#issues_scroller").hover(
		function(){
			$("#issue_scroller_left").css("visibility","visible");
			$("#issue_scroller_right").css("visibility","visible");
			//show the left and right arrow
		},
		function(){
			$("#issue_scroller_left").css("visibility","hidden")
			$("#issue_scroller_right").css("visibility","hidden")
			//hide the left and right arrow
		}
		
		);
		var li=$("div#issues_scroller_content ol li").get(0);
		issue_total_width=$(li).width() * $("div#issues_scroller ol li").length -(3);
	
		$("#issues_scroller_content ol").width(issue_total_width);//setting the total width
		
		bindScrollEvent("issue_scroller_left","left",$(li).width());
		bindScrollEvent("issue_scroller_right","right",$(li).width());
	}
	
    //  Tabs Initializations
    /*var tabs_highlights = new Ext.TabPanel({
        renderTo: 'tabs_highlights',
        activeTab: 0,
        plain:true,
        frame:false,
        border:false,
        hideBorders: true,
        defaults:{autoHeight: false},
        tabPosition:'bottom',
        height:287,
        tabWidth:123,
        minTabWidth:120,
        resizeTabs: true,
        listeners:  {
                        beforetabchange:    emailAlertsClicked
                    },
        items:[
            {id: 'highlights_tab', contentEl:'highlights', title: 'Highlights'},
            {id: 'issues_tab', contentEl:'issues', title: 'Issues'},
            {id: 'archives_tab', contentEl:'archives', title: 'C&EN Archives'},
            {id: 'email_alerts',title: '<img src="/etc/designs/cen/images/email_alerts.png" /> Email Alerts', tabCls: 'email_alerts'}
        ]
    });*/
    function emailAlertsClicked(tabPanel, newTab, currentTab){
        var newTabId = newTab.getId();
        //alert(newTabId);
        if(newTabId == 'email_alerts'){
            window.location = 'about/email_alerts.html';
            return false;
        }
    }
    /*var tabs_news = new Ext.TabPanel({
        renderTo: 'tabs_news',
        activeTab: 0,
        plain:true,
        frame:false,
        border:false,
        hideBorders: true,
        defaults:{autoHeight: false},
        height:255,
        tabWidth:239,
        minTabWidth:239,
        resizeTabs: true,
        items:[
            {contentEl:'latest_news_outer', title: '<h2>Latest News</h2>'},
            {contentEl:'news_feeds_outer', title: 'News Feeds'}
        ]
    });*/
    /*var tabs_central_science = new Ext.TabPanel({
        renderTo: 'tabs_central_science',
        activeTab: 0,
        plain:true,
        frame:false,
        border:false,
        hideBorders: true,
        defaults:{autoHeight: false},
        height:280,
        tabWidth:   242,
        minTabWidth:    242,
        resizeTabs: true,
        items:[
            {contentEl:'central_science', title: '<img src="/etc/designs/cen/images/icon_central_science_blog.png" width="30" height="26" /> <h2>CENtral Science</h2>'},
            {contentEl:'blog_authors', title: 'About the Blogs'}
        ]
    });*/
    /*var tabs_most_popular = new Ext.TabPanel({
        renderTo: 'tabs_most_popular',
        activeTab: 0,
        plain:true,
        frame:false,
        border:false,
        hideBorders: true,
        defaults:{autoHeight: false,autoWidth: true},
        height:285,
        minTabWidth:60,
        resizeTabs:true,
        items:[
            {contentEl:'popular_viewed', title: 'Viewed', layout: 'hbox'},
            {contentEl:'popular_commented', title: 'Commented', layout: 'hbox'},
            {contentEl:'popular_shared', title: 'Shared', layout: 'hbox'}
        ]
    });*/
		
       // new Ext.ux.Carousel('highlights_slider_container');

});

/*
	This will bind the scroll event to the clicker
	@param: ele - the element to bind
	@param: type - either scroll left or right
	@param: scrollAmt - the amount to scroll
*/
function bindScrollEvent(ele,type,scrollAmt){
	scrollAmt+=12;
	if(ele ==null)return;
	if(type == "right"){
		//binding the scroll right event
		$("#"+ele).click(function(){
			//binding the scroll event
			var tmpVar=$("#issues_scroller_content").scrollLeft();
			issue_xPos+=scrollAmt;
			safeLog("scroll at "+scrollAmt);
			$("#issues_scroller_content").animate({scrollLeft:issue_xPos},600,function(){
				if(tmpVar == $("#issues_scroller_content").scrollLeft()){
					// this mean it is at the end. now we should do a wrap around again
					$("#issues_scroller_content").animate({scrollLeft:0},300);
					issue_xPos=0;
					return;
				}
			});
		});
	}else{
		//binding the scroll left event
		$("#"+ele).click(function(){
			if(issue_xPos == 0){
				$("#issues_scroller_content").animate({scrollLeft:issue_total_width},600,function(){
					issue_xPos=$("#issues_scroller_content").scrollLeft();
					return;
				});
				return;
			}
			issue_xPos-=scrollAmt;
			safeLog("scroll at "+scrollAmt);
			$("#issues_scroller_content").animate({scrollLeft:issue_xPos},600);
		});
	}
}

function safeLog(msg) {
		if (typeof console === 'object' && typeof console.log === 'function')
		{
			console.log(msg);
		}
	}