anything(Slider) width not increasing inside Javascript pop window

[aashishbhargav]

I am using Anything slider to scroll through tables inside a JavaScipt pop up window which opens within a page. The javaScript of Anything Slider is unable to determine the width of the first table (first slide). It shows the tabs above the popUp Window. When I click on any tab or the Right or left navigation arrow all the tables and slides work as expected.

Here is the code for Anything Slider js file:
[Code]
$(window).load(function(){
/* just one variable to set-up */

speed = 600;
tabColor = '#069';
tabCurrent = '#09c';

/* setting the initial state of the slideshow and first image */
var picVar = $('.iStu12 li.images div.slide div.slidePanel');
totPic = picVar.length;
curPicWidth = picVar.eq(0).width();
curPicHeight = picVar.eq(0).height();
totWidth = 0;


/* calculate the total width of the images and set the div.slide to match */
$.each((picVar), function() {
caption=$(this).attr('caption');
$('.iStu12 li.caption').append('<b>'+caption+'</b>');
totWidth = totWidth+$(this).width();
});
$('ul.iStu12 li.images div.slide').width(totWidth);

current=0;
var captionVar = $('.iStu12 li.caption b');
tabSet ()

/* resize the containing elements, left/right arrow positions and add the first image caption */
resize(curPicWidth,curPicHeight)


/* monitor 'next' clicks */
$('.iStu12 li.next').click (function() {
picVar = $('.iStu12 li.images div.slide div.slidePanel');

/* animate the line of images left one photo - then remove the first image from set, make it the last image then finally move the set to absolute position left:0 */
curPicWidth = picVar.eq(0).width();
curPicHeight = picVar.eq(0).height();
$('ul.iStu12 li.images div.slide').animate({left:-curPicWidth}, speed,
function() {
$('ul.iStu12 li.images div.slide').find('div.slidePanel:first').remove().appendTo('ul.iStu12 li.images div.slide');
$('ul.iStu12 li.images div.slide').css('left','0px');
});


Here is how I create pop up:
var popupAboutStatus = 0;

function loadPopupAbout(){
if(popupAboutStatus==0){
$("#popupAbout").fadeIn("slow");
popupAboutStatus = 1;
}
}

function disablePopupAbout(){
if(popupAboutStatus==1){
$("#popupAbout").fadeOut("slow");
popupAboutStatus = 0;
}
}

function centerPopupAbout(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupAboutHeight = $("#popupAbout").height();
var popupAboutWidth = $("#popupAbout").width();
$("#popupAbout").css({
"position": "absolute",
"top": windowHeight/2-popupAboutHeight/2,
"left": windowWidth/2-popupAboutWidth/2
});
}

[Code]


As you can see the AnythingSlider javascript over writes any width set in the css. The live issue can be seen at http://gkainc.somee.com/ and choosing project tab from slideout Menu

Thanks in advance. Aashish