var reactTimeSlider=150;  //ms until slidy opens (if the cursor is moved out within this time it doesnt open - which is good for navigating the cursor)
var reactTimeThumbnail=150; //ms until enlarged image appears
var slideDownTimeSlider=250;    //ms of how long the sliding down (opening) process takes
var slideUpTimeSlider=200;  //ms of how long the sliding-up (closing) process takes
var fadeInTimeImage=400;    //ms - how long does the enlarged image take to appear
var fadeOutTimeImage=300;   //ms - how long does the enlarged image take to disappear

var slidyTimerIn=null;    //a helper, holding a timer

var $openTR=null;       //the currently open list item

//WW: slides in list item detials
function showDetails(slidy, details)
{
    $openTR=details;  
    details.slideDown(slideDownTimeSlider);
}

//WW: switches colors to the selection color (when mouse hovers over list item)
function doSelectStyle (slidy, details){
    slidy.addClass('rowSelected');
    slidy.css('cursor', 'pointer');
    
    if(details!=null) {
        details.addClass('rowSelected');
        details.css('cursor', 'pointer');
    }
    
   
    return true;
}

//WW: switches colors to the normal row color (when mouse hovers out of list item)
function doUnselectStyle(slidy, details) {
    slidy.removeClass('rowSelected');
    slidy.css('cursor', 'default');
    
    if(details!=null) {
        details.removeClass('rowSelected');
        details.css('cursor', 'default');
    }
    
    return true; 
}

//WW: Fades in an image (when mouse hovers over a thumbnail)
function thumbImageFadeIn(thumbNail, image)
{
    var offset=thumbNail.offset();

    var clipHeight=offset.top+280;
    var clipWidth=offset.left+400;


    //the following code is for making shure the large image is always on screen
    if(clipHeight>window.innerHeight || clipHeight>document.documentElement.clientHeight || clipHeight>document.body.clientHeight) {
        image.css('top', offset.top-280);
    } else {
        image.css('top', offset.top+60);
    }

    if(clipWidth>window.innerWidth || clipWidth>document.documentElement.clientWidth || clipWidth>document.body.clientWidth) {
        image.css('left', offset.left-250);
    } else {
        image.css('left', offset.left+75);
    }
    image.fadeIn(fadeInTimeImage);

}


$(document).ready(function() {
    //---------------------- by Blonde (relates to the navigation images) ------------------------
    var navElements = $("#topnav li a");
    navElements.each(function(i){
        $(navElements[i]).hover(
            function() {
                curr = $(this).find("img").attr("src");
                if(curr.indexOf("_on.gif")!=-1 || curr.indexOf("_over.gif")!=-1 || curr.indexOf("logout")!=-1) return;
                
                $(this).find("img").attr("curr",curr);	
                overlen = curr.length;
                over = curr.substr(0, overlen-4);
                over = over+'_over.gif';
                $(this).find("img").attr({ src: over});
            },
            
            function() {
                $(this).find("img").attr({ src: $(this).find("img").attr("curr")});
            }
        );
        
        
        $(navElements[i]).find("img").each(function(i) {
            temp = this.src;
            prelen = temp.length;
            pre = temp.substr(0, prelen-4);
            pre = pre+'_over.gif';
            preload_image_object = document.createElement("img");
            preload_image_object.src = pre;
        });
    });
    // ----------------- end Blonde Navigation stuff-----------------------


    //------------- WW: Silders ----------------- 
    //item_details referes to the upper part of a list row (the one alwyas displayed)
    //details referes to the part that is displayed and hidden again...

    var item_details = $('.slider');  //get all sliders of the page
    item_details.each(function(i){ //assign each the following
        var findId = "#animationElement_"+item_details[i].id;   //find the animation element to the current row
        var $details =  $(findId);
        
        $(item_details[i]).mouseover(function(){     //on mouseover 
	    stillInList=true
            doSelectStyle($(item_details[i]), $details);   //..apply the selection style 
            if($details!=null) {	//should always be true, if not there is an error in the jsp code
                slidyTimerIn=setTimeout(function() {       //set a timer, so that it does not react to quickly
                    if($openTR!=$details) {                 //if we are not talking about the one currently open
                        $('.countdownSpan_'+i).css('display', 'block');	   //display (activate) the countdown js
                        if($openTR!=null) {		//if one is open
                            $openTR.slideUp(slideUpTimeSlider);     //close the currently open slider
                        }
                        showDetails($(item_details[i]), $details); //open the new slider (also sets openTR to the currently open slidy)
                    }
                }, reactTimeSlider);        
            }
            return true;            //js items below should still react
        });
        
        
        $(item_details[i]).mouseout(function(){   //when the mouse moves out of a list row
	    stillInList=false;                    //assuming that the mouse left the list area (would be set to true again by the other thread further up, in case cursor is still in list)
            clearTimeout(slidyTimerIn);          //clear the slider timer ( if the slidy is already open nothing happens, and if not its also not supposed to open because too little time has passed (mouse moved over, but quickly out again)
	    slidyTimerOut=setTimeout(function() { //after "reactTimeSlider" milliseconds
	    	if(stillInList==false) {        //if the cursor still has not come back to the list
			$details.slideUp(slideUpTimeSlider); //close the slider
			$openTR=null;
	    	}
    	    }, reactTimeSlider);

            doUnselectStyle($(item_details[i]), $details); //clear the selection style
            return true;
        });
        
        
        $details.mouseover(function() {         //the selection behaviour also has to apply to the details (sliding) tr
	    stillInList=true;
            doSelectStyle($(item_details[i]), $details);
            return true;
        });
        
        $details.mouseout(function() {   //the deselection behaviour also has to apply to the details (sliding) tr
	    stillInList=false;
	    slidyTimerOut=setTimeout(function() { //after "reactTimeSlider" milliseconds
	    	if(stillInList==false) {        //if the cursor still has not come back to the list
			$details.slideUp(slideUpTimeSlider); //close the slider
			$openTR=null;
	    	}
    	    }, reactTimeSlider);

            doUnselectStyle($(item_details[i]), $details);
            return true;
        });
        
        $(item_details[i]).click(function() {   // a click on the tablerow (anywhere on it) should go to the auction
            document.location.href=$(item_details[i]).attr('url');
            return true;
        });
        
        $details.click(function() {     // a click on the details tablerow should also go to the auction
            document.location.href=$(item_details[i]).attr('url');
            return true;
        });

    });
    //this is necessary, so when clicking a checkbox it does not go to the auction page
     var checkBoxs = $(".checkbox");  //get all checkboxes of the page
     checkBoxs.each(function(i) { 
        $(checkBoxs[i]).click(function(e) {
            e.stopPropagation(); 
            return true;
        });
     });

     //same applies to the bidding_input boxes in "my bidwatch"
     var inputs = $(".bid_inputs");  //get all bi_inputs of the page
     inputs.each(function(i) { 
        $(inputs[i]).click(function(e) {
            e.stopPropagation(); 
            return true;
        });
     });

    
    
    //--------- sliders end ----------------------------
   
    
    //----------- image preview ------------------------------
    var thumbs = $('.thumbnail');   //for all thumbnails..
    var thumbTimer=null;
    var actualImages = $('.actualImage');
    var thumbNails=$('.actualThumbNail');
    thumbs.each(function(i) {   //..assign the following functions
        var image=$("#image_"+thumbs[i].id);  //find the according large image
        $(thumbs[i]).mouseover(function() {     //set the mouseover
	    stillInList=true;
            $(thumbs[i]).css('cursor', 'pointer');  //which changes the cursor
            $(actualImages[i]).attr('src', $(thumbNails[i]).attr('src').replace("th_", ""));
            
            thumbTimer=setTimeout(function() {  //and after a certain times 
                thumbImageFadeIn($(thumbs[i]), $(image))    //fadeds in the image
            }, reactTimeThumbnail);
            return false;   //items below should not react, otherwise might be confusing
        });

        $(thumbs[i]).mouseout(function() {  //...when mouse moves out
	    stillInList=false;
            $(thumbs[i]).css('cursor', 'default');  //set the cursor to normal
            clearTimeout(thumbTimer);           //clear the timeout, which in case not enough time has passed prevents the current image from fading in
            if($(image).css('display')!='none') {   //if the image is currently displayed
                $(image).fadeOut(fadeOutTimeImage); //fade it out
            }
            return true;
        });
    });
    //---------- image preview end ------------------------
});





/* original file
$(document).ready(function() {

var navElements = $("#topnav li a");
navElements.each(function(i){
$(navElements[i]).hover(
function() {
curr = $(this).find("img").attr("src");
if(curr.indexOf("_on.gif")!=-1 || curr.indexOf("_over.gif")!=-1 || curr.indexOf("logout")!=-1) return;

$(this).find("img").attr("curr",curr);	
overlen = curr.length;
over = curr.substr(0, overlen-4);
over = over+'_over.gif';
$(this).find("img").attr({ src: over});
},

function() {
$(this).find("img").attr({ src: $(this).find("img").attr("curr")});
}
);


$(navElements[i]).find("img").each(function(i) {
temp = this.src;
prelen = temp.length;
pre = temp.substr(0, prelen-4);
pre = pre+'_over.gif';
preload_image_object = document.createElement("img");
preload_image_object.src = pre;
});
});//end each

// do the slidey in n out thingy
var item_details = $('.listTable .list-item');

item_details.each(function(i){

var details = $('.list-item-details', item_details[i]);

$('a.slider', item_details[i]).click(function(){        

if (details.css('display') == 'none') {
details.css('display', 'block');
details.attr('height', $(details.parent()).outerHeight({margin:true}));

$(details).animate({height: details.attr('height')+'px'},1000, function(){
//  console.log('OPENING DONE');
});

} else {

$(details).animate({height: '0px'},1000, function(){
//console.log('CLOSING DONE');
details.css('display', 'none');
});
//details.css('display', 'none');
}
return false;
});

details.css('display', 'none');

});//end each


});*/