/**
 *	MDB ADDONS
 *	Author: PETER FRANZÈN | EMBRYO.SE
 *
 *	PLUGIN FOR PRODUCT VIEW
 *	
 *	
 */
// jqpanles examples
$(document).ready(function() {
    var COOKIE_NAME = 'gender';
                    var ADDITIONAL_COOKIE_NAME = 'additional';
                    var options = { path: '/', expires: 10 };
    if($.cookie(ADDITIONAL_COOKIE_NAME) == 'MEN')
          {
              genderMen();
          }
    if($.cookie(ADDITIONAL_COOKIE_NAME) == 'WOMEN')
          {
              genderWomen();
          }
    if($.cookie(ADDITIONAL_COOKIE_NAME) == 'ALL')
          {
              genderALL();
          }
    if($.cookie(ADDITIONAL_COOKIE_NAME) == '')
          {
              genderALL();
          }
    $("li.all").bind('click',function(){
        genderALL();
    });

    $("li.women").bind('click',function(){
        genderWomen();
    });

    $("li.men").bind('click',function(){
        genderMen();
    });

    $("div.sorting_wrap").children("li").each(function (n)  {
        $(this).bind('click',function(){
            triggerSorting($(this).attr('id'));
            $(this).addClass("active");
        })
    });

/*
 * Load and assign lightbox
 */
$(".lightbox").lightbox({
    fitToScreen: true,
    imageClickClose: true
});

/*
 * Load large image
 */

$('.largeimg').ajaxContent({
    loaderType:'text',
    loadingMsg:'<div style="text-align: center;padding-top: 200px;"><img src="fileadmin/loading.gif"></div>',
    target:'#singleproduct > .image',
    extend:'true',
    beforeSend:function(obj,target){
        $('#singleproduct > .image').css({'background':'none'});
     },
    success:function(obj,target,msg){
        $('#singeproduct').show();
        //$('#lgimage').show();
        //$('#singeproduct').hide();
    },
    filter:'#open',
    ex_target:'#lgimage > .image',
    ex_loadingMsg:'<div style="text-align: center;padding-top: 200px;"><img src="fileadmin/loading.gif"></div>',
    ex_beforeSend:function(obj,target){
        //alert('ex_beforeSend option callback');
    },
    ex_success:function(obj,target,msg){
        //alert('ex_success option callback. The target background will now become red');
        $('#lgimage').show();
        $('#singleproduct').hide();
        //$(target).hide();
        //$('#singeproduct').show();
    }
});

/*
 * Load preloading image
 */
$('.openfirst').ajaxContent({

     event:'click',
     target:'#lgimage > .image',
     loaderType:'text',
     loadingMsg:'<div style="text-align: center;padding-top: 200px;"><img src="fileadmin/loading.gif"></div>',
     beforeSend:function(obj,target){
            $('#lgimage').show();
            $('#singleproduct').hide();
     },
     success: function(obj,target,msg){
         //alert($("img").width());
                $('#lgimage > .image img').draggable({
                    ghosting:	false,
                    revert:		false,
                    insideParent: true
                });

     }
});

 function triggerSorting(ids)    {

    //Hide:a alla
    $("div.sorting_wrap").children("li").each(function (n)  {
        $(this).removeClass("active");
        if (ids.replace('sorting_','') == 'All')    {
            $("div."+$(this).attr('id').replace('sorting_','')).show();
        } else  {
            $("div."+$(this).attr('id').replace('sorting_','')).hide();
        }
    })
    $("div."+ids.replace('sorting_','')).show();
}


jQuery.fn.fadeToggle = function(speed, easing, callback) {
   return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
/**
 * This plugin can be used in 4 ways, this is only 1. Make sure to check
 * the other 3 links as well to see all the Modes.
 */

jQuery(function( $ ){
	$('#summary').fadeIn('slow');

	
	 
	$.preload( '#singleproduct .image img', {//the first argument is a selector to the images
		
        onRequest:request,
		onComplete:complete,
		onFinish:finish,
		placeholder:'typo3conf/ext/mdb/res/img/placeholder.jpg',//this is the really important option
		notFound:'typo3conf/ext/mdb/res/img/notfound.jpg',//optional image if an image wasn't found
		threshold: 6 //'2' is the default, how many at a time, to load.
	});
  /**
	 * All the functions below, are used to update the summary div
	 * That is not the objective of the plugin, the really important part
	 * is the one right below. The option placeholder, and threshold.
    //When there is no image in the product listning
    $.preload( '#prodlist .prod .image img', {//the first argument is a selector to the images

        onRequest:request,
		onComplete:complete,
		onFinish:finish,
		placeholder:'typo3conf/ext/mdb/res/img/placeholder_small.jpg',//this is the really important option
		notFound:'typo3conf/ext/mdb/res/img/notfound_small.jpg',//optional image if an image wasn't found
		threshold: 6 //'2' is the default, how many at a time, to load.
	});
    */
	function update( data ){
		$('#done').html( ''+data.done );
		$('#total').html( ''+data.total );
		$('#loaded').html( ''+data.loaded );
		$('#failed').html( ''+data.failed );
    
	}
	function complete( data ){
		update( data );
		$('#image-next').html( 'none' );//reset the "loading: xxxx"
		$('#image-loaded').html( data.image );
	}
	function request( data ){
		update( data );
		$('#image-next').html( data.image );//set the "loading: xxxx"
	}
	function finish(){//hide the summary
		//$('#summary').fadeOut('slow');
        $('#parent').fadeIn('slow');
	}
});


$("#topselect li",this).bind('mouseover', function(){
    $("#bottomselect > li").removeClass("closed");
    $(this).addClass("open");
    $(".opend").hide();
    $("#def").hide();
    $("#bottomselect > li").removeClass("openfirst");
    $("#bottomselect > #"+this.id).fadeToggle();
    $("#bottomselect > #"+this.id).addClass("opend");
});
 $("#topselect li").bind('mouseout', function(){
    $(".opend").hide();
    $("#def").show();
});


var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth();
//$('.wrap').css({'overflow' : 'hidden', 'background-color' : 'yellow', 'float' : 'left'});     
$('.slider', container).slider({
    min: 0,
    max: itemsWidth,
    handle: '.handle',
    stop: function (event, ui) {
        ul.animate({'left' : ui.value * -1}, 500);
    },
    slide: function (event, ui) {
        ul.css('left', ui.value * -1);
    }
});

    

    //GENDER SELECT FUNCTION
 function genderALL(){
    $.cookie(ADDITIONAL_COOKIE_NAME, 'ALL', { expires: 10 });
    
    $('li.all').addClass("active");
    $('li.men').removeClass("active");
    $('li.women').removeClass("active");
     /*
    $("td.Women").show();
    $("td.Men").show();
    */
    $('div.all').addClass("active");
    $('div.men').removeClass("active");
    $('div.women').removeClass("active");
    $("div.Women").show();
    $("div.Men").show();
}
function genderMen(){
    $.cookie(ADDITIONAL_COOKIE_NAME, 'MEN', { expires: 10 });
    
    $('li.men').addClass("active");
    $('li.all').removeClass("active");
    $('li.women').removeClass("active");
    /*
    $("td.Women").hide();
    $("td.Men").show();
    */
    $('div.men').addClass("active");
    $('div.all').removeClass("active");
    $('div.women').removeClass("active");
    $("div.Women").hide();
    $("div.Men").show();
}
function genderWomen(){
    $.cookie(ADDITIONAL_COOKIE_NAME, 'WOMEN', { expires: 10 });
    
    $('li.women').addClass("active");
    $('li.all').removeClass("active");
    $('li.men').removeClass("active");
    /*
    $("td.Men").hide();
    $("td.Women").show();
     */
    $('div.women').addClass("active");
    $('div.all').removeClass("active");
    $('div.men').removeClass("active");
    $("div.Men").hide();
    $("div.Women").show();
}



});


/*
Simple JQuery menu.
HTML structure to use:

Notes:

1: each menu MUST have an ID set. It doesn't matter what this ID is as long as it's there.
2: each menu MUST have a class 'menu' set. If the menu doesn't have this, the JS won't make it dynamic

Optional extra classnames:

noaccordion : no accordion functionality
collapsible : menu works like an accordion but can be fully collapsed
expandfirst : first menu item expanded at page load

<ul id="menu1" class="menu [optional class] [optional class]">
<li><a href="#">Sub menu heading</a>
<ul>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
...
...
</ul>
<li><a href="#">Sub menu heading</a>
<ul>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
...
...
</ul>
...
...
</ul>
*/

function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){        
        $('#' + this.id + ' .a_active').next().show();
	});

	//$('ul.menu li a').click(function() {
	$('ul.menu li a').bind('click',function() {
			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').slideUp('normal');
				checkElement.slideDown('normal');
				return false;
			}
		}
	)
}
$(document).ready(function() {initMenus();});