// < Global vars >
var args1, args2, args3, args4, args5, args6, args7;
var selection;
var $scollLeft, $scollRight, $classic
var noOfProducts = 0;
var animationTime = 250;
var animationEasing = "swing";
var empty_img = "Images/0.png";
var isNullInSelection = false;
var i = 0;
var track_choices = false;

// < document load function >
function document_load(emptyImg) {

    if (navigator.userAgent.match(/iPad/i) != null)
        return;

    noOfProducts = $("#listwrapper ul").children().length;
    if (noOfProducts < 5) {
        $("#listwrapper ul").show();
        return;
    }

    empty_img = emptyImg
    initCachedObjects();

    initSlideArgs();
    if (initSelectionArray()) {
        $("#blocker_1").show();
        $("#blocker_2 ").show();
       // $("#mainwrapper").show();
        addItemsToScoll();
    }
}

// < add items in scroll >
function addItemsToScoll() {

    var itemHTML = '';
    for (var i = 0; i < selection.length; i++) {
        if (selection[i] == null) {
            itemHTML += '<div class=\"scroller_' + (i + 1).toString() + '\"><img src=\"' + empty_img + '\" style=\"border:none;\"/></div>';
            isNullInSelection = true;
        }
        else
            itemHTML += '<div class=\"scroller_' + (i + 1).toString() + '\">' + $classic.eq(selection[i]).html() + '</div>';
    }
    $("#scroll").prepend(itemHTML);

}

// < Init cached objects >
function initCachedObjects() {
  
    $scollLeft = $("#scroll_right");
    $scollRight = $("#scroll_left");
    $classic = $("#listwrapper ul li");  //$classic = $("#classic li");

    $scollLeft.click(doAnimationLeft);
    $scollRight.click(doAnimationRight);

    $("#listwrapper ul").hide();
    $("#listwrapper").css("height", "350px");
}   

// < Init slide arguments >
function initSlideArgs() {

    args1 = new Array("-560px", 0, "120px", "179px", "20px", (noOfProducts - 3), "179px");
    args2 = new Array("-430px", 0.5, "120px", "179px", "20px", (noOfProducts - 2), "209px");
    args3 = new Array("-290px", 0.8, "152px", "228px", "10px", (noOfProducts - 1), "268px");
    args4 = new Array("-100px", 1, "200px", "300px", "0px", 0, "340px");
    args5 = new Array("140px", 0.8, "152px", "228px", "10px", 1, "268px");
    args6 = new Array("310px", 0.5, "120px", "179px", "20px", 2, "209px");
    args7 = new Array("440px", 0, "120px", "179px", "20px", 3, "179px");
}

// < Init selection array >
function initSelectionArray() {
    switch (noOfProducts) {
        case 7:
            selection = new Array(4, 5, 6, 0, 1, 2, 3); break;
        case 6:
            selection = new Array(3, 4, 5, 0, 1, 2, 3); break;
        case 5:
            selection = new Array(2, 3, 4, 0, 1, 2, 3); break;
        case 4:
            selection = new Array(1, 2, 3, 0, 1, 2, 3); break;
        case 3:
            selection = new Array(null, null, 2, 0, 1, null, null); break;
        case 2:
            selection = new Array(null, null, null, 0, 1, null, null); break;
        case 1:
            selection = new Array(null, null, null, 0, null, null, null); break;
        case 0:
            return false;
        default:
            selection = new Array((noOfProducts - 3), (noOfProducts - 2), (noOfProducts - 1),
                0, 1, 2, 3); break;
    }
    return true;
}

function doAnimationRight(event) {
    event.preventDefault();
    $scollRight.unbind('click', doAnimationRight);

    if (selection[6] != null) {
        if (selection[6] == 0)
            selection[6] = (noOfProducts - 1);
        else
            selection[6] = selection[6] - 1;
    }
    else {
        if ($("#scroll div.scroller_3 img").attr("src").indexOf(empty_img) >= 0) {
            setTimeout("$scollRight.click(doAnimationRight)", animationTime);
            return false;
        }
    }
    	$('#scroll').children().filter('div').children().filter('a').each(function (){
			if(($(this).attr('href')) == '#'){
			
			$(this).hide();
			}
		//$(this).append('<div class="draghelper">drag and drop to my choices or click for more info</div>');
	});

    //$("#mainwrapper").hide();
    $("#scroll div.scroller_7").remove();
	//$('#scroll div.scroller_1').append('<div class="draghelper">drag and drop to my choices or click for more info</div>');

    $("#scroll div.scroller_1").animate({ marginLeft: args2[0], opacity: args2[1], width: args2[2], height: args2[6], marginTop: args2[4] }, animationTime, animationEasing, function toggled(x) { doToogleRight(this, "scroller_1", "scroller_2", false); });
    $("#scroll div.scroller_1 a img").animate({ width: args2[2], height: args2[3] }, animationTime);
    $("#scroll div.scroller_2").animate({ marginLeft: args3[0], opacity: args3[1], width: args3[2], height: args3[6], marginTop: args3[4] }, animationTime, animationEasing, function toggled(x) { doToogleRight(this, "scroller_2", "scroller_3", false); });
    $("#scroll div.scroller_2 a img").animate({ width: args3[2], height: args3[3] }, animationTime);
    $("#scroll div.scroller_3").animate({ marginLeft: args4[0], opacity: args4[1], width: args4[2], height: args4[6], marginTop: args4[4] }, animationTime, animationEasing, function toggled(x) { doToogleRight(this, "scroller_3", "scroller_4", false); });
    $("#scroll div.scroller_3 a img").animate({ width: args4[2], height: args4[3] }, animationTime);
    $("#scroll div.scroller_4").animate({ marginLeft: args5[0], opacity: args5[1], width: args5[2], height: args5[6], marginTop: args5[4] }, animationTime, animationEasing, function toggled(x) { doToogleRight(this, "scroller_4", "scroller_5", false); });
    $("#scroll div.scroller_4 a img").animate({ width: args5[2], height: args5[3] }, animationTime);
    $("#scroll div.scroller_5").animate({ marginLeft: args6[0], opacity: args6[1], width: args6[2], height: args6[6], marginTop: args6[4] }, animationTime, animationEasing, function toggled(x) { doToogleRight(this, "scroller_5", "scroller_6", false); });
    $("#scroll div.scroller_5 a img").animate({ width: args6[2], height: args6[3] }, animationTime);
    $("#scroll div.scroller_6").animate({ marginLeft: args7[0], opacity: args7[1], width: args7[2], height: args7[6], marginTop: args7[4] }, animationTime, animationEasing, function animated(x) { doToogleRight(this, "scroller_6", "scroller_7", true); });
    $("#scroll div.scroller_6 a img").animate({ width: args7[2], height: args7[3] }, animationTime);
	//$('.draghelper').animate({
	//	opacity: 0
		//}, 0);
   
}


function doToogleRight(elementDiv, class1, class2, isLast) {


    $(elementDiv).toggleClass(class1);
    $(elementDiv).toggleClass(class2);

    if (isLast) {

        if (selection[0] != null) {
            if (selection[0] == 0)
                selection[0] = (noOfProducts - 1);
            else
                selection[0] = selection[0] - 1;

            $("#scroll").prepend('<div class=\"scroller_1\">' + $classic.eq(selection[0]).html() + '</div>');
        }
        else {
            $("#scroll").prepend('<div class=\"scroller_1\"><img src=\"' + empty_img + '\" style=\"border:none;\"></div>');
        }

        //$("#mainwrapper").show();
        $scollRight.click(doAnimationRight);
        enableDraggable($("#scroll div")); 
    }
}

function doAnimationLeft(event) {
    event.preventDefault();
    $scollLeft.unbind('click', doAnimationLeft);

    if (selection[0] != null) {
        if (selection[0] == (noOfProducts - 1))
            selection[0] = 0;
        else
            selection[0] = selection[0] + 1;
    }
    else {
        if ($("#scroll div.scroller_5 img").attr("src").indexOf(empty_img) >= 0) {
            setTimeout("$scollLeft.click(doAnimationLeft)", animationTime);
            return false;
        }
    }
    	$('#scroll').children().filter('div').children().filter('a').each(function (){
			if(($(this).attr('href')) == '#'){
			
			$(this).hide();
			}
		//$(this).append('<div class="draghelper">drag and drop to my choices or click for more info</div>');
	});
    $("#scroll div.scroller_1").remove();
    //$("#mainwrapper").hide();
    
    $("#scroll div.scroller_2").animate({ marginLeft: args1[0], opacity: args1[1], width: args1[2], height: args1[6], marginTop: args1[4] }, animationTime, animationEasing, function toggled(x) { doToogleLeft(this, "scroller_2", "scroller_1", false); });
    $("#scroll div.scroller_2 a img").animate({ width: args1[2], height: args1[3] }, animationTime);
    $("#scroll div.scroller_3").animate({ marginLeft: args2[0], opacity: args2[1], width: args2[2], height: args2[6], marginTop: args2[4] }, animationTime, animationEasing, function toggled(x) { doToogleLeft(this, "scroller_3", "scroller_2", false); });
    $("#scroll div.scroller_3 a img").animate({ width: args2[2], height: args2[3] }, animationTime);
    $("#scroll div.scroller_4").animate({ marginLeft: args3[0], opacity: args3[1], width: args3[2], height: args3[6], marginTop: args3[4] }, animationTime, animationEasing, function toggled(x) { doToogleLeft(this, "scroller_4", "scroller_3", false); });
    $("#scroll div.scroller_4 a img").animate({ width: args3[2], height: args3[3] }, animationTime);
    $("#scroll div.scroller_5").animate({ marginLeft: args4[0], opacity: args4[1], width: args4[2], height: args4[6], marginTop: args4[4] }, animationTime, animationEasing, function toggled(x) { doToogleLeft(this, "scroller_5", "scroller_4", false); });
    $("#scroll div.scroller_5 a img").animate({ width: args4[2], height: args4[3] }, animationTime);
    $("#scroll div.scroller_6").animate({ marginLeft: args5[0], opacity: args5[1], width: args5[2], height: args5[6], marginTop: args5[4] }, animationTime, animationEasing, function toggled(x) { doToogleLeft(this, "scroller_6", "scroller_5", false); });
    $("#scroll div.scroller_6 a img").animate({ width: args5[2], height: args5[3] }, animationTime);
    $("#scroll div.scroller_7").animate({ marginLeft: args6[0], opacity: args6[1], width: args6[2], height: args6[6], marginTop: args6[4] }, animationTime, animationEasing, function animated(x) { doToogleLeft(this, "scroller_7", "scroller_6", true); });
    $("#scroll div.scroller_7 a img").animate({ width: args6[2], height: args6[3] }, animationTime);

}

function doToogleLeft(elementDiv, class1, class2, isLast) {

    $(elementDiv).toggleClass(class1);
    $(elementDiv).toggleClass(class2);

    if (isLast) {

        if (selection[6] != null) {
            if (selection[6] == (noOfProducts - 1))
                selection[6] = 0;
            else
                selection[6] = selection[6] + 1;

            $("#scroll").prepend("<div class=\"scroller_7\">" + $classic.eq(selection[6]).html() + "</div>");
        }
        else {
            $("#scroll").prepend('<div class=\"scroller_7\"><img src=\"' + empty_img + '\" style=\"border:none;\"></div>');
        }

        //$("#mainwrapper").show();
        $scollLeft.click(doAnimationLeft);
        enableDraggable($("#scroll div"));
    }
}

function enableDraggable($itemIn) {
    // there's the gallery and the trash
    
    var $gallery = $itemIn, $trash = $('#mychoiceslist');

    initChoiceList();

    $(document).ready(function () {

        if ($('ul li', $trash).length == 1) {
            $('#mychoiceslist ul li span').show();
        }

        $gallery.draggable({
            cancel: 'a.ui-icon', // clicking an icon won't initiate dragging
            revert: 'invalid', // when not dropped, the item will revert back to its initial position
            containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
            helper: 'clone',
            cursor: 'move'
        });

        $trash.droppable({
            tolerance: 'touch',
            drop: function (ev, ui) {
                deleteImage(ui.draggable.clone());
            }
        });

        function deleteImage($item) {

            $item.fadeOut(function () {
                var maxItems = 10;
                var $list = $('ul', $trash);
                var theHTML = $item.find('a').eq(0).html().toString();
                var product_link = $item.children().eq(0).attr("href");
                var indexID = theHTML.indexOf("id=");
                var index = theHTML.indexOf("src");

                var indexStyle = theHTML.indexOf("style");
                var srcAttr = "";
                var idAttr = "";

                idAttr = $item.find('a').eq(0).find('img').attr('id');
                srcAttr = $item.find('a').eq(0).find('img').attr('src');

                if ($('#mychoiceslist ul li span').length)
                    $('#mychoiceslist ul li span').remove();

                if ($('#mychoiceslist ul li').length <= maxItems && !($("#_" + idAttr).length)) {
                    var $choicesmall = ("<li style='width:70px'><a href='" + product_link + "' class='prod_view'><img id='_" + idAttr + "' src='" + srcAttr + "'></a>" +
                        "<a href='#' class='prod_delete'></a></li>");
                    $list.append($choicesmall);
                    $('#_' + idAttr).hide().delay(200);
                    $('#_' + idAttr).fadeIn('slow');
                    initChoiceListLast();
                    sendRequest(m_path_choice + "?add_id=" + escape(idAttr) + "&add_img=" + srcAttr, loadChoiceMeny);
                }
            });
        }

    });

    function initChoiceList() {

        $('#mychoiceslist ul li a.prod_view').mouseenter(showProductInfo);
        $('#mychoiceslist ul li a.prod_delete').click(deleteProductFromChoices);

    }

    function initChoiceListLast() {

        $('#mychoiceslist ul li:last-child a.prod_view').mouseenter(showProductInfo);
         $('#mychoiceslist ul li:last-child a.prod_delete').click(deleteProductFromChoices);

    }

    function showProductInfo(event) {
        event.preventDefault();

        $(this).parent().bind('mouseleave', (hideProductInfo));
       
        var popup_left = $(this).position().left - 50;
        var popup_top = $(this).position().top - 250;
 
        $('#mychoiceinfo').css("left", popup_left.toString() + "px");
        $('#mychoiceinfo').css("top", popup_top.toString() + "px");
        $('#mychoiceinfo p').empty();
        $('#mychoiceinfo').fadeIn();
        
        sendRequest(m_path_choice + "?get_id=" + $(this).children().eq(0).attr("id"), insertProductData);
    }

    function deleteProductFromChoices(event) {
        event.preventDefault();
        $('#mychoiceinfo').hide();
        $(this).parent().remove();
        sendRequest(m_path_choice + "?del_id=" + $("a.prod_view img", $(this).parent()).attr("id"), loadChoiceMenyDelete);
    }

    function end_this(req) {

    }

    function hideProductInfo(event) {

        //$(this).unbind('mouseleave');
        $('#mychoiceinfo').hide();
       // $("a.prod_goto", $(this)).hide();
        //$("a.prod_delete", $(this)).hide();

        //$('#mychoiceslist ul li a.prod_view').click(showProductInfo);
    }


    function insertProductData(req) {
        var container = document.createElement('div');
        container.innerHTML = req.responseText;
        var test = req.responseText;
        $('#mychoiceinfo p').html(container.innerHTML.toString());
        
    }

}

function enableChoices() {

    $('#mychoiceslist ul li a.prod_view').mouseenter(showProductInfo);
    $('#mychoiceslist ul li a.prod_delete').click(deleteProductFromChoices);

    function showProductInfo(event) {
        event.preventDefault();

        $(this).parent().bind('mouseleave', (hideProductInfo));

        var popup_left = $(this).position().left - 50;
        var popup_top = $(this).position().top -250;
        $('#mychoiceinfo').css("left", popup_left.toString() + "px");
        $('#mychoiceinfo').css("top", popup_top.toString() + "px");
        $('#mychoiceinfo p').empty();
        $('#mychoiceinfo').fadeIn();

        //$("a.prod_goto", $(this).parent()).show();
       // $("a.prod_delete", $(this).parent()).show();
        
        sendRequest(m_path_choice + "?get_id=" + $(this).children().eq(0).attr("id"), insertProductData);
    }

    function insertProductData(req) {
        $('#mychoiceinfo p').append(req.responseText)
    }    
    
    function deleteProductFromChoices(event) {
        event.preventDefault();
        $('#mychoiceinfo').hide();
        $(this).parent().remove();
        sendRequest(m_path_choice + "?del_id=" + $("a.prod_view img", $(this).parent()).attr("id"), loadChoiceMenyDelete);
    }
    
    function hideProductInfo(event) {

        //alert($(this).html());
        //$(this).unbind('mouseleave');
        $('#mychoiceinfo').hide();
       // $("a.prod_goto", $(this)).hide();
      //  $("a.prod_delete", $(this)).hide();

        //$('#mychoiceslist ul li a.prod_view').click(showProductInfo);
    }
   
    function end_this(req) {

    }
}

function loadChoiceMeny() {

    var isVisible = ($('#choices').css('display') != 'none');
    
    if(isVisible) {
        var isItems = ($('#mychoiceslist ul li a.prod_view').length > 0)
        if (isItems) {
            track_choices = true;
            sendRequest(m_path_choice + "?get_menu=1", handleChoiceMenyRequest);
        }
    }

}

function loadChoiceMenyDelete() {

    var isVisible = ($('#choices').css('display') != 'none');
    if (isVisible) {
            sendRequest(m_path_choice + "?get_menu=1", handleChoiceMenyRequest);
    }

}

function handleChoiceMenyRequest(req) {

    $('#mychoices_menu').html(req.responseText);

	$('#mychoices_menu a:first-child').animate({ backgroundColor: '#FBF8F0' }, 1000 ,function() {
	    $('#mychoices_menu a:first-child').animate({ backgroundColor: '#d4d6cd' }, 1000);  
        });

}

$(document).ready(function () {
    if (track_choices) {
        if (typeof (pageTracker) != 'undefined') {
            pageTracker._setVar('mychoices');
        }
    }
})