/**
 * PShelper.com
 * Base Store Version javascript
 *
 * Notes:
 *
 * When creating text box inputs, always apply both
 * a value and default attribute (the same value)
 *
 * For rollovers use attribute 'hoversrc' to define the
 * rollover image source
 *
 **/
$(document).ready(function(){
/**
 * MiniCart
 */
 $viewCartBaseCSS = {'display':'block','border':'0','backgroundColor':'transparent','padding':'0 4px'};
 $viewCartHoverCSS = {'backgroundColor':'#FFF','border':'1px solid #000','borderBottom':'0','zIndex':'1011','padding':'0 3px 1px 3px'};
 $miniCartBaseCSS = {'position':'absolute','top':'205px','right':'300px','border':'1px solid #000','background-color':'#fff','width':'250px','z-index':'1010','text-align':'left','padding':'4px'};
 $miniCartHoverCSS = {'position':'absolute','top':'205px','right':'300px','border':'1px solid #000','background-color':'#fff','width':'250px','z-index':'1010','text-align':'left','padding':'4px'};
 mcHovered = false;
 $('.mc').mouseenter(
	function()
	{
		$('#miniCart').css($miniCartHoverCSS).fadeIn();
		mcHovered = true;
	}).mouseleave(
	function()
	{
		mcHovered = false;
		setTimeout(function(){
			if(mcHovered==false)
			{
				$('#miniCart').css($miniCartBaseCSS).fadeOut();
			}
		},100); //delay to see if still hovering
	});
 
/**
 * PSHELPER.COM SLIDESHOW
 */
    //initiate the timer to move to the next one
    slideshowTimer = window.setInterval("swapSlide()",8000);
    i = 1; //iterator for assigning ids to the slides
    controlButtons = new String();

    swapSlide = function(slideId) {
		$currentSlide = $('.slideWrapper[rel="active"]');
		$currentSlide.removeAttr('rel');
		$currentSlide.appendTo('#slidesContainer');
		$('.controlButton[rel="'+$currentSlide.attr('id')+'"]').removeClass('activeButton');
		$nextSlide = (slideId) ? $('#'+slideId) : $('.slideWrapper:first');
		$nextSlide.attr({'rel':'active'});
		$currentSlide.fadeOut(150,function(){$nextSlide.fadeIn(150);});

        $('.controlButton[rel="'+$nextSlide.attr('id')+'"]').addClass('activeButton');
    }
    $('.slideWrapper')
        .each(function(){$(this).attr({'id':'slide'+i});i++;}) //apply a unique id to each slide
        .filter(':first').attr({'rel':'active'}) //select the first slide and apply the active denoter
        .parent().children().hover( //when a slide is moused over it must pause, and restart when moused out
            //mouse over slide, pause
            function(){
				window.clearInterval(slideshowTimer);
            },
            //mouse out of slide, resume
            function(){
                slideshowTimer = window.setInterval("swapSlide()",5000);
            }
        )
        .parent().append('<div id="slideControls"></div>');//apply a control div to #slidesContainers
	var names = new Array();
	names[1] = "SVAT";
	names[2] = "PowerMax";
	names[3] = "Logitech";
	names[4] = "DVR";
	names[5] = "CCTV";
    for(var j=1;j<i;j++)
    {
        controlButtons += '<a href="#" class="controlButton" rel="slide'+j+'">'+names[j]+'</a>';
    }
    $('#slideControls')
        .css({'position':'absolute','left':'0px','bottom':'0px'})
        .append(controlButtons)
        .children(':first')
        .addClass('activeButton');
    $('.controlButton').click(function(){
       swapSlide($(this).attr('rel')) ;
    });
	
/**
 * Tab Handling
 */
$('div.featuredTab:first').addClass('activeTab');
$('div.featuredSection').hide().filter(':first').show();
$('div.featuredTab').click(function(){
    clickedTab = $(this).attr('id');
    //hide all the panels and show the one clicked
    $('div.featuredSection').hide().filter('[rel="'+clickedTab+'"]').show();
    $('div.featuredTab').removeClass('activeTab');
    $(this).addClass('activeTab');
});


/**
 * INPUT TYPE=TEXT HANDLING
 */

	//input textbox handling
	$('input[type="text"]').focus(function(){
        if($(this).val()==$(this).attr('alt'))
        {
            $(this).val('');
        }
    }).blur(function(){
        if($(this).val()=='')
        {
            $(this).val($(this).attr('alt'));
        }
    });

/**
 * BASE TEMPLATE TOP NAVIGATION HANDLING
 */
    //top nav menu handling
	//$('#topNavMenu').insertAfter('#mainWrapper'); //<=IE6 fix, #topNavMenu must be absolute to the body
    $('ul.parent li').hover(
        //mouse over
        function(){
           $(this).addClass('catOn').find('ul.sub').css({'zIndex':9999}).show();
        },
        //mouse out
        function(){
           $(this).removeClass('catOn').find('ul.sub').hide();
        }).each(function(){
            $(this).find('ul.sub').hide();
        });
/**
 * ROLLOVER IMAGE HANDLING
 */
     //rollover image handling
     $preload = new Array();
     $iterator = 0;
     xOffset = 10;
	 yOffset = 20;

     $('img').each(function(){
        //preloader
        if($(this).attr('hoversrc'))
        {
            $preload[$iterator] = $('<img src="'+$(this).attr('hoversrc')+'"/>');
            $iterator++;

            $(this).hover(
            //mouse over
            function(){
                $(this).attr({'default':$(this).attr('src'),'src':$(this).attr('hoversrc')});
            },
            //mouse out
            function(){
                $(this).attr({'src':$(this).attr('default')});
                $(this).removeAttr('default');
            });
        }

        //preloader
        if($(this).attr('popsrc'))
        {
            $preload[$iterator] = $('<img src="'+$(this).attr('popsrc')+'"/>');
            $iterator++;

            $(this).hover(
            //mouse over
            function(e){
                $("body").append("<div id='imagepop'><img src='"+$(this).attr('popsrc')+"'/></div>");
                $("#imagepop")
                    .css({"top":(e.pageY - xOffset) + "px","left":(e.pageX + yOffset) + "px",'border':'2px solid #000000','position':'absolute'})
                    .show();
            },
            //mouse out
            function(){
                $("#imagepop").remove();
            })

            $(this).mousemove(function(e){
                $("#imagepop").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");
            });
        }
     });
});