/*
 * Variable $ is decalare and initilized as
 * YAHOO.util.Dom.get to replace the
 * document.getElementById("elementname");
 *
 */
var $ = YAHOO.util.Dom.get;
var $D = YAHOO.util.Dom;
var scrollCount = 0;
var fromShipping = false;
var showProductCount = 0;

// Below three are used by function autoScroll and initilized by
// initWork function under smallImages work
var scrollObj = '';
var scrollImages = 0;
var currentView = 0;

//How may review will display when page is render
var maxReviewShow = 5;

//Color Box String show at product detail page
var colorBoxString = '<div class="colorDiv lftFloat completeBorder" '+
                     'title="--TITLE--" style="background-color:--COLOR--"></div>';

//Oder Detail Table String show at users dashboard when No order found
var orderDetailTable = '<table id="--TABLE-ID--" cellspacing="0" cellpadding="0" '+
                       'border="0"><thead>--TABLE-HEADER--</thead><tbody>'+
                       'You have no orders as --INFO--</tbody></table>';

//Order Detail Table String with data
var tableString = '<div class="hideData detailView"><div class="top"></div>'+
                  '<div class="mid"><table><thead><tr><th>Image</th><th>'+
                  'Product</th><th>Quantity</th><th>Price (Rs.)</th>'+
                  '</tr></thead><tbody>--TABLE-DATA--</tbody></table></div>'+
                  '<div class="bottom"></div></div>';

/*
 * This is used to trim the string
 */
var trim = function(str){
    while (str.substring(0,1) == ' '){
        length = str.length;
        str = str.substring(1, length);
    }
    while (str.substring(str.length-1, str.length) == ' '){
        length = str.length-1;
        str = str.substring(0,length);
    }
    return str;
};

/*
 * This is used to set the event when it is ready
 * to use by user and also do some initial work
 * when page elements are loaded completely.
 *
 * @param void
 * @return void
 *
 */
function initWork(){
    var length = 0;

    YAHOO.util.Event.addListener($("popupLink"), "click", function(){showPopup($("popup"));});
    YAHOO.util.Event.addListener($("basketImgContainer"), "click", function(){showPopup($("popup"));});
    YAHOO.util.Event.addListener($("searchPopupLink"),"click",function(){showPopup($("searchPopup"));});
    YAHOO.util.Event.addListener($("popupCloser"), "click", function(){hidePopup($("popup"));});
    YAHOO.util.Event.addListener($("searchPopupCloser"), "click", function(){hidePopup($("searchPopup"));});

//Sets Click Event on Tabs
    YAHOO.util.Event.onContentReady("descriptionView",function(){
        var tab = $D.getElementsByClassName("tabs");
        length = tab.length;
        for(var i=0; i<length; i++){
            anchorElement = tab[i].getElementsByTagName("a")[0];
            YAHOO.util.Event.addListener(anchorElement,"click",function(){
                tabSelect(this);
            });
        }
    });

//Initial view data for that tab which has div with class name bottomHide other tab data is hide by class hideData
    YAHOO.util.Event.onContentReady("tabsData",function(){
        var activeTab = $("tabActive");
        var tabTitle = activeTab.title;
        //var tabData = $("tabsData");
        var dataTab = this.getElementsByTagName("div"); //tabData.getElementsByTagName("div");
        length = dataTab.length;
        for(var j=0; j<length; j++){
            //if(dataTab[j].id!=tabTitle && dataTab[j].parentNode==tabData){
            if(dataTab[j].id!=tabTitle && dataTab[j].parentNode==this){
                dataTab[j].className="hideData";
            }
            else if(dataTab[j].parentNode==this){ //else if(dataTab[j].parentNode==tabData){
                dataTab[j].className="";
            }
        }
        activeTab.className = "highlightText";
    });

//Animation setting for Comment Form
    YAHOO.util.Event.onContentReady("commentForm",function(){
        var attributes = {height:{from: 1, to: 510}};
        var anim = new YAHOO.util.Anim(this.id, attributes);
        YAHOO.util.Event.addListener($("postCommentLink"), "click", function(){
            showCommentForm(anim);
            this.style.color="#c0012a";
            $('descriptionPanel').style.height = "auto";
        });
    });

//Initial settings for home page main Carousel's scrolling images
    YAHOO.util.Event.onContentReady("smallImages",function(){
        var imageWidth = 183;
        var newPosition = 0;
        var scrollingImg = this.getElementsByTagName("li"); //$("smallImages").getElementsByTagName("li");
        scrollObj = scrollingImg;
        scrollImages = scrollingImg.length;
        for(var i=0; i<scrollImages; i++){
            newPosition = (imageWidth * i);
            scrollingImg[i].style.top = "0px";
            scrollingImg[i].style.left=newPosition+"px";
            YAHOO.util.Event.addListener(scrollingImg[i],"click",function(){viewSelectionImage(this);});
        }
        var bigImgContainer = $("bigImageView");
        var opacityDull = new YAHOO.util.Anim(bigImgContainer,{opacity: {to:0.3}}, 0.2);
        opacityDull.animate();
        opacityDull.onComplete.subscribe(function(){
            viewSelectionImage(scrollingImg[0]);
            setTimeout('autoScroll()', 3000);
        });
    });

//To make highlighted or dull search text box
    YAHOO.util.Event.onContentReady("search", function(){
        //YAHOO.util.Event.addListener($("search"),"focus",function(){
        YAHOO.util.Event.addListener(this,"focus",function(){
            this.style.color = "#000";
            this.style.borderColor = "#000";
            this.style.textAlign = "left";
            if(this.value=="Search entire store")
            {
            	this.value = "";
            }
        });
        //YAHOO.util.Event.addListener($("search"),"blur",function(){
        YAHOO.util.Event.addListener(this,"blur",function(){
            var inputValue = this.value;
            if(trim(inputValue)=="" || inputValue=="Search entire store")
            {
                this.style.borderColor = "#eee";
                this.style.color = "#bbb";
                this.value = "Search entire store";
                this.style.textAlign = "center";
            }
            else
            {
                var advanceName = $('advanceName');
                advanceName.value = this.value;
            }
        });
    });

//Initial settings for home page left Carousel's scrolling images
    YAHOO.util.Event.onContentReady("lftCarousel",function(){
        initCarousel(this);
    });

//Initial settings for home page right Carousel's scrolling images
    YAHOO.util.Event.onContentReady("rgtCarousel",function(){
        initCarousel(this);
    });

    YAHOO.util.Event.onContentReady("gridView", function(){
        //to identify on which column currently user is work on category_grid_view.htm
        var divs = $D.getElementsByClassName("viewDivisions");
        var sortoptions = $D.getElementsByClassName("sortOptions");
        var length = sortoptions.length;
        var anchorTag = '';

        YAHOO.util.Event.addListener(divs, "mouseover", function(){
            this.id = "activeLi";
        });
        YAHOO.util.Event.addListener(divs, "mouseout", function(){
            this.id = "";
        });

      //enable javascript on category page
        updateCategoryPage();

        for(var i=0; i<length; i++){
            anchorTag = sortoptions[i].getElementsByTagName("a");
            YAHOO.util.Event.addListener(anchorTag,"click",function(){
                if(this.className=="downArrow")
                    this.className = "upArrow";
                else if(this.className=="upArrow")
                    this.className = "downArrow";
            });
        }
    });

    //set event on select boxes and tabs at my_account page to call JSON Function.
    //setEventOnMyAccount();

    YAHOO.util.Event.onContentReady("newUserBlock",function(){
        //YAHOO.util.Event.addListener("newUserBlock","click",function(){
        YAHOO.util.Event.addListener(this,"click",function(){
            var parent = this.parentNode;
            var gParent = parent.parentNode;
            var sibling = gParent.getElementsByTagName("div")[1];

            parent.className='hideData';
            gParent.style.marginTop='0px';
            sibling.className='';
        });
    });

    YAHOO.util.Event.onContentReady("shopping-cart-table", function(){
        var qtySelectObj = $D.getElementsByClassName("qtySelect");
        YAHOO.util.Event.addListener(qtySelectObj,"change",function(){
            if(this.value=="more..")
            {
                var listElements = this.getElementsByTagName("option");
                var length = listElements.length;
                var newlength = length + 10;
                var options = '';
                var optElement = '';
                this.length = 0;

                for(var i=1; i<newlength; i++)
                {
                    optElement = document.createElement('option');
                    if(i==(newlength-1))
                    {
                        optElement.setAttribute('selected', 'selected');
                    }

                    optElement.setAttribute('value', i);
                    optElement.innerHTML = i;
                    this.appendChild(optElement);
                }
                optElement = document.createElement('option');
                optElement.setAttribute('value', 'more..');
                optElement.innerHTML = 'more..';
                this.appendChild(optElement);
            }
        });
    });

    YAHOO.util.Event.onContentReady($D.getElementsByClassName("colorSelect"), function(){
        if(this)
        {
            var selectElement = this.getElementsByTagName('select')[0];
            if (selectElement!=null)
            {
                var optionElements = selectElement.getElementsByTagName('option');
                var len = optionElements.length;
                var replaceStr = '';

                for(var i=0; i<len; i++)
                {
                    if(trim(optionElements[i].innerHTML).toLowerCase()!='-- please select --')
                    {
                        replaceStr += colorBoxString.replace(/--TITLE--/g, trim(optionElements[i].innerHTML));
                        replaceStr  = replaceStr.replace(/--COLOR--/g, trim(optionElements[i].innerHTML).toLowerCase());
                    }
                }

                selectElement.style.display = 'none';
                selectElement.parentNode.innerHTML = replaceStr;
            }
        }
        YAHOO.util.Event.addListener($D.getElementsByClassName('colorDiv'), 'click', function(){
            var imgElementId = imgElementId = 'colorImg'+(this.title).toLowerCase();
            var images = '';
            var imgElement = $(imgElementId);
            if(imgElement!=null)
            {
                $('zoom_image').src = imgElement.src;
            }

            var divs = $D.getElementsByClassName('colorDiv')
            var len = divs.length;
            for(var i=0; i<len; i++)
            {
                divs[i].style.borderColor = '#DDDDDD';
            }

            this.style.borderColor = 'black';
        });
    });

//set event to send ajax request when user click on Top Sales Tab at product detail page.
    YAHOO.util.Event.onContentReady($D.getElementsByClassName("recommendSale"), function(){
        YAHOO.util.Event.addListener($D.getElementsByClassName('tabs'), 'click', function(){
            if(this.getElementsByTagName('a')[0].title=='topSales')
            {
                getSales();
            }
        });
    });

//set event on more button on product discription page to view its hide comments
    YAHOO.util.Event.onContentReady('moreReviews', function(){
        YAHOO.util.Event.addListener(this, 'click', function(){
            var commentBox = $D.getElementsByClassName('commentBox');
            var count = commentBox.length;
            var j = 0;

            if(count > maxReviewShow)
            {
                for(var i=0; i<count; i++)
                {
                    if(commentBox[i].className=="commentBox clearFloat hideData")
                    {
                        if(j < maxReviewShow)
                        {
                            commentBox[i].style.display = "block";
                            commentBox[i].className = "commentBox clearFloat";
                        }
                        j++;
                    }
                }
            }

            if(j == 0)
            {
                this.style.display = 'none';
            }
        });
    });
}

/*
 * This will enables the auto scrolling functionality on
 * category carousel at home page.
 *
 * This function is based on time add callback itself to
 * perform the similar task.
 *
 */
function autoScroll()
{
    if((currentView+1) >= scrollImages)
    {
        currentView = -1;

        var thumb   = $D.getElementsByClassName('scrollImages')[0];
        var thumbLi = thumb.getElementsByTagName('li');
        var thumbLength = thumbLi.length;

        for(i=0; i<thumbLength; i++)
        {
            if(thumbLi[i].className=='scroll')
            {
                thumbLi[i].className = '';
                thumbLi[i].style.display = 'block';
            }
        }
        thumb.style.left  = '0px';
    }

    if((currentView+1)!=0 && ((currentView+1)%5)==0)
    {
        moveLeft(183, 'smallImages', 5, false, 'topCarousel');
    }

    currentView++;
    viewSelectionImage(scrollObj[currentView]);
    setTimeout('autoScroll()', 3000);
}

/*
 * This function change the product inside the li
 * If direction value is '+' then Next Product
 * If direction value is '-' then Previous Product
 *
 * @param interger     productId
 * @param String       direction
 * @return void
 */
function showProduct(productId, direction)
{
    var valueDivId = 'product'+productId;
    var valueDiv = $(valueDivId);
    var zoomImage = $('zoom_image');
    var elementObj = '';
    var elementImg = '';
    var parentElement = '';
    var descElement = $D.getElementsByClassName('singleProductDescription')[0];
    var formElement = $('product_addtocart_form');
    var elementImgObj = '';
    var bredcrumObj = $('sortOrBreadcrum').getElementsByClassName('highlightText')[0];

    if(direction=='+')
    {
        if(showProductCount == 0 && $('product-1')==null)
        {
            var mainDiv = document.createElement('div');
            mainDiv.setAttribute('id', 'product-1');
            mainDiv.className = "hideData";

            var zoomDiv = document.createElement('div');
            zoomDiv.className = "hideData productZoom";
            zoomDiv.appendChild(zoomImage.cloneNode(true));

            var productDetail = document.createElement('div');
            productDetail.className = "hideData productDetail";
            productDetail.appendChild(descElement.cloneNode(true));

            var formUrl = document.createElement('div');
            formUrl.className = "hideData formUrl";
            formUrl.innerHTML = formElement.action;

            var productMedia = document.createElement('div');
            productMedia.className = "hideData productMedia";
            productMedia.appendChild(zoomImage.parentNode.cloneNode(true));

            var nextDiv = document.createElement('div');
            nextDiv.className = "hideData nextProduct";
            nextDiv.innerHTML = productId;

            var previousDiv = document.createElement('div');
            previousDiv.className = "hideData previousProduct";
            previousDiv.innerHTML = '0';

            mainDiv.appendChild(zoomDiv);
            mainDiv.appendChild(productDetail);
            mainDiv.appendChild(formUrl);
            mainDiv.appendChild(productMedia);
            mainDiv.appendChild(nextDiv);
            mainDiv.appendChild(previousDiv);

            $('responseResult').appendChild(mainDiv);
        }

        YAHOO.util.Event.removeListener($('nextButton'), 'click');
        YAHOO.util.Event.removeListener($('previousButton'), 'click');
        elementObj = valueDiv.getElementsByClassName('nextProduct')[0];
        if(elementObj.innerHTML!='0')
        {
            YAHOO.util.Event.addListener($('nextButton'), 'click', function(){
                elementObj = valueDiv.getElementsByClassName('nextProduct')[0];
                showProduct(elementObj.innerHTML, '+');
            });
        }

        YAHOO.util.Event.addListener($('previousButton'), 'click', function(){
            elementObj = valueDiv.getElementsByClassName('previousProduct')[0];
            if(elementObj.innerHTML==0)
            {
                showProduct('-1', '-');
            }
            else
            {
                showProduct(elementObj.innerHTML, '-');
            }
        });

        showProductCount++;
    }
    else if(direction=='-')
    {
        YAHOO.util.Event.removeListener($('previousButton'), 'click');
        YAHOO.util.Event.removeListener($('nextButton'), 'click');
        elementObj = valueDiv.getElementsByClassName('previousProduct')[0];
        if(elementObj.innerHTML!='0')
        {
            YAHOO.util.Event.addListener($('previousButton'), 'click', function(){
                elementObj = valueDiv.getElementsByClassName('previousProduct')[0];
                showProduct(elementObj.innerHTML, '-');
            });
        }
        else if(elementObj.innerHTML=='0' && $('product-1')!=null)
        {
            YAHOO.util.Event.addListener($('previousButton'), 'click', function(){
                showProduct('-1', '-');
            });
        }

        YAHOO.util.Event.addListener($('nextButton'), 'click', function(){
            elementObj = valueDiv.getElementsByClassName('nextProduct')[0];
            showProduct(elementObj.innerHTML, '+');
        });


        showProductCount--;
    }

    elementObj = valueDiv.getElementsByClassName('productZoom')[0];
    elementObj = elementObj.getElementsByTagName('img')[0];
    zoomImage.src = elementObj.src;

    elementObj = valueDiv.getElementsByClassName('productMedia')[0];

    parentElement = zoomImage.parentNode;
    elementImg = parentElement.getElementsByTagName('img');
    var count = elementImg.length;
    for(var i=(count-1); i>=1; i--)
    {
        parentElement.removeChild(elementImg[i]);
    }
    elementImg = elementObj.getElementsByTagName('img');
    count = elementImg.length;
    for(var i=0; i<count; i++)
    {
        if(elementImg[i].id!='zoom_image')
        {
            elementImgObj = elementImg[i].cloneNode(true);
            parentElement.appendChild(elementImgObj);
        }
    }

    elementObj = valueDiv.getElementsByClassName('singleProductDescription')[0];
    descElement.innerHTML = elementObj.innerHTML;

    elementObj = valueDiv.getElementsByClassName('formUrl')[0];
    formElement.action = elementObj.innerHTML;

    elementObj = valueDiv.getElementsByClassName('productName')[0];
    bredcrumObj.innerHTML = (elementObj.innerHTML).toUpperCase();

    resetColorSelection($('productDisplay'));
    resetQtySelect($('productDisplay'));
}

/* show comment form on product_view page
 *
 * @param YAHOO.util.Anim element
 * @return void
*/
function showCommentForm(element){
    element.animate();
    $("commentForm").className = "completeBorder";
}

/*
 * show popups for My Cart and Advance Search Option
 * at all pages
 *
 * @param HTMLDivObject element
 * @return void
 */
function showPopup(element){
    var closePopup = 'searchPopup';
    element.style.display='block';
    element.style.position="absolute";
    if(element.id=="searchPopup")
    {
        var link = $('searchPopupLink');
        var img = link.getElementsByTagName('img')[0];
        var imgSrc = img.src;
        imgSrc = imgSrc.replace('searchview.png', 'searchview2.png');
        img.src = imgSrc;

        var inputField = $('search');
        closePopup = 'popup';
        element.title = 'Click to hide advanced search option';
        YAHOO.util.Event.removeListener($('searchPopupLink'), 'click');
        YAHOO.util.Event.addListener($('searchPopupLink'), 'click', function(){hidePopup(element);});
        if(inputField.value=='' || inputField.value=='Search entire store')
        {
            document.advancedSearchForm.reset();
            $('category-title').style.display = "none";
            var subCategory = $D.getElementsByClassName('searchCategory');
            var len = subCategory.length;
            for(var i=0; i<len; i++)
            {
                subCategory[i].style.display = "none";
            }
        }
    }
    hidePopup($(closePopup));
}

/*
 * hide the popups for My Cart and Advance Search Option
 * at all pages
 *
 * @param HTMLDivObject element
 * @return Void
 *
 */
function hidePopup(element){
    element.style.display='none';
    element.style.position="";
    if(element.id=="searchPopup")
    {
        var link = $('searchPopupLink');
        var img = link.getElementsByTagName('img')[0];
        var imgSrc = img.src;
        imgSrc = imgSrc.replace('searchview2.png', 'searchview.png');
        img.src = imgSrc;
        element.title = 'Click to view advanced search options';
        YAHOO.util.Event.removeListener(link, 'click');
        YAHOO.util.Event.addListener(link, 'click', function(){showPopup(element);});
    }
}

/*
 * This function will work on product_view.html page
 * Main work of this function is the show the content
 * related to the clicked tab and hide the bottom line
 * of tab, to show that which tab is currently selected
 *
 * @param HTMLDivObject element
 * @return void
 *
 */
function tabSelect(element){
    var preEditElement = $("tabActive");
    var tabDataId = element.title;

    if(preEditElement!=null){
        preEditElement.id="";
        preEditElement.parentNode.className = element.parentNode.className;
        preEditElement.className = "";
    }

    element.id = "tabActive";
    element.className = "highlightText";
    element.parentNode.className = element.parentNode.className + " activeTab";
    var tabData = $("tabsData");
    var dataTab = tabData.getElementsByTagName("div");
    var length = dataTab.length;
    for(var j=0; j<length; j++){
        if(dataTab[j].id!=tabDataId && dataTab[j].parentNode==tabData){
            dataTab[j].className="hideData";
            dataTab[j].style.display="none";        // fix for IE
        }
        else if(dataTab[j].parentNode==tabData){
            dataTab[j].removeAttribute("class");
            dataTab[j].style.display="block";       // fix for IE
        }
    }
}

/*
 * Before Show selected image preview
 * dull the image container
 *
 * @param elementId HTMLDivContainer
 * @return void
 *
 */
function initBigImgContainer(elementId){
    var bigImgContainer = $(elementId);
    var bigImgContainerOpacityDull = new YAHOO.util.Anim(bigImgContainer,{opacity: {to:0}}, 0.2);
    bigImgContainerOpacityDull.animate();
}

/*
 * To initilize the new arrival and popular
 * image carousel
 *
 * @param elementId HTMLDivContainer
 * @return void
 */
function initCarousel(elementId){
    var imageWidth = 143, imageGap = 0;
    var actualWidth = 137, increaseBy = 3;
    var actualHeight = 140;
    var newPosition = 0;
    var scrollingImg = $(elementId).getElementsByTagName("li");
    var length = scrollingImg.length;
    for(var i=0; i<length; i++){
        newPosition = ((imageWidth+imageGap) * i) + imageGap/2;
        scrollingImg[i].style.top = "0px";
        scrollingImg[i].style.left=newPosition+"px";
        YAHOO.util.Event.addListener(scrollingImg[i],"mouseover",function(){
            this.getElementsByTagName("img")[0].style.width = (actualWidth+increaseBy)+"px";
            this.getElementsByTagName("img")[0].style.height = (actualHeight+increaseBy)+"px";
        });
        YAHOO.util.Event.addListener(scrollingImg[i],"mouseout",function(){
            this.getElementsByTagName("img")[0].style.width = actualWidth+"px";
            this.getElementsByTagName("img")[0].style.height = actualHeight+"px";
        });
    }
}

/*
 * This function is used for animation at home page
 * related to carousel. this function is called when
 * carousel right button is clicked
 *
 *
 * @param   imageWidth   To know the width of the image/li
 * @param   elementId    HTMLDivElement which contain the OL/UL
 * @param   moveElements Number of elements that will be scroll left/right
 * @param   showPreview  Boolean variable to know either show of selected image or not
 * @param   parentId     Id of the element which contain the left/right navigation buttons
 *
 * @return void
 *
 */
function moveLeft(imageWidth, elementId, moveElements, showPreview, parentId){
    var mainContainer = $(elementId);
    var olObj = mainContainer.getElementsByTagName("ol");
    var listObj = mainContainer.getElementsByTagName("li");
    var listObjLen = listObj.length, startIndex=0;
    var childsToMove = 0, newPosition = 0, actualMoveElements = moveElements;

    for(var i=0; i<listObjLen; i++){
        if(listObj[i].className==""){
            startIndex = i;
            i = listObjLen;
        }
    }

    childsToMove = listObjLen - startIndex - moveElements;

    if(childsToMove<=moveElements){
        moveElements = childsToMove;
    }

    newPosition = (imageWidth *(startIndex+moveElements));

    if(startIndex==0)
        newPosition = newPosition;

    var attributes = {left: {to: -newPosition}};
    var moveObj = new YAHOO.util.Anim(olObj[0],attributes,0.2);
    var opacityBright = new YAHOO.util.Anim(olObj,{opacity: {to:1}},0.2);
    var opacityDull = new YAHOO.util.Anim(olObj,{opacity: {to:0.6}},0.2);

    if(showPreview==true)
    {
        initBigImgContainer("bigImageView");
    }

    opacityDull.animate();
    opacityDull.onComplete.subscribe(function(){
        moveObj.animate();
    });

    moveObj.onComplete.subscribe(function(){
        for(var i=startIndex; i<(startIndex+moveElements); i++){
            listObj[i].className="scroll";
        }
        opacityBright.animate();
        if(showPreview==true)
            viewSelectionImage(listObj[(startIndex+moveElements)]);
    });

    var parentObj = $(parentId);
    if((childsToMove-moveElements)==0)
    {
        var clickElement = parentObj.getElementsByClassName('rightNavButton')[0];
        YAHOO.util.Event.removeListener(clickElement, 'click');
    }

    var enableElement = parentObj.getElementsByClassName('leftNavButton')[0];
    YAHOO.util.Event.removeListener(enableElement, 'click');
    YAHOO.util.Event.addListener(enableElement, 'click', function(){moveRight(imageWidth, elementId, actualMoveElements, showPreview, parentId);});
}

/*
 * This function is used for animation at home page
 * related to carousel. This function is called when
 * carousel left button is clicked
 *
 *
 * @param int imageWidth
 * @param int imageGap
 *
 * @return void
 *
 */
function moveRight(imageWidth, elementId, moveElements, showPreview, parentId){
    var mainContainer = $(elementId);
    var olObj = mainContainer.getElementsByTagName("ol");
    var listObj = mainContainer.getElementsByTagName("li");
    var listObjLen = listObj.length, startIndex=0;
    var childsToMove = 0, newPosition = 0, actualMoveElements = moveElements;

    for(var i=(listObjLen-moveElements); i>=0; i--){
        if(listObj[i].className!=""){
            startIndex = i;
            i = -1;
        }
    }

    if(startIndex==-1)
        return;
    else if((startIndex+1)%moveElements!=0)
        childsToMove = (startIndex+1)%moveElements;

    if(childsToMove<moveElements && childsToMove!=0)
        moveElements = childsToMove;

    for(var i=startIndex; i>(startIndex-moveElements); i--){
        listObj[i].removeAttribute("class");
        listObj[i].style.dispaly = "block";         //Fix for IE
        listObj[i].className = "";                  //Fix for IE
        newPosition = i;
    }

    newPosition = (imageWidth * newPosition);

    var attributes = {left: {to: -newPosition}};
    var moveObj = new YAHOO.util.Anim(olObj[0],attributes,0.2);
    var opacityBright = new YAHOO.util.Anim(olObj,{opacity: {to:1}},0.2);
    var opacityDull = new YAHOO.util.Anim(olObj,{opacity: {to:0.6}},0.2);

    if(showPreview==true)
        initBigImgContainer("bigImageView");

    opacityDull.animate();
    opacityDull.onComplete.subscribe(function(){
        moveObj.animate();
    });

    moveObj.onComplete.subscribe(function(){
        opacityBright.animate();
        if(showPreview==true)
            viewSelectionImage(listObj[(startIndex-moveElements+1)]);
    });

    var parentObj = $(parentId);
    if((startIndex - moveElements)<=0)
    {
        var clickElement = parentObj.getElementsByClassName('leftNavButton')[0];
        YAHOO.util.Event.removeListener(clickElement, 'click');
    }
    var enableElement = parentObj.getElementsByClassName('rightNavButton')[0];
    YAHOO.util.Event.removeListener(enableElement, 'click');
    YAHOO.util.Event.addListener(enableElement, 'click', function(){moveLeft(imageWidth, elementId, actualMoveElements, showPreview, parentId);});
}

/*
 * This function is used to show the large image from
 * from carousel scrolling image list when any image
 * from list is clicked or show the first image
 * from carousel scrolling image list when user click
 * on left/right carousel button.
 *
 * @param HTMLListObject liObject
 * @return void
 */
function viewSelectionImage(liObject){
    var imgObj   = $(liObject).getElementsByTagName("img")[0];
    //var inputObj  = $(liObject).getElementsByTagName("input")[0];
    var paraObj = $(liObject).getElementsByTagName("p")[0];
    var imgSrc   = '';
    //var imgAlt   = imgObj.alt;
    //var imgTitle = imgObj.title;
    var bigImgContainer = $("bigImageView");

    var opacityBright = new YAHOO.util.Anim(bigImgContainer,{opacity: {from:0.3, to:1}},0.2);

    initBigImgContainer("bigImageView");

    //bigImgContainer.innerHTML = "<a href='"+imgAlt+"' title='"+imgTitle+"'><img src='"+inputObj.value+"' alt='"+imgSrc+"' width='980px' height='342px' /></a>";
    bigImgContainer.innerHTML = paraObj.innerHTML;
    opacityBright.animate();
}
/*
 * This line is used to set the YAHOO DOM model and when
 * DOM is ready then events are set on HTML Elements
 * and also some initial work are preformed on page
 *
 */
YAHOO.util.Event.onDOMReady(initWork);

/*
 * To render YUI MENU (at all pages) From Markup and YUI Slider
 * (category_view.htm & category_grid_view.htm) on page load
 */
YAHOO.util.Event.onContentReady("productMenu",function(){
    //var objMenu = new YAHOO.widget.MenuBar("productMenu", {autosubmenudisplay: true, hidedelay: 750, lazyload: true});
    var objMenu = new YAHOO.widget.MenuBar(this, {autosubmenudisplay: true, hidedelay: 750, lazyload: true});
    objMenu.render();
    var menuChildElements = $D.getElementsByClassName("yui-overlay-hidden");
    var count = menuChildElements.length;
    var zindexNumber = 105;

    for(var chindex=0; chindex<count; chindex++)
    {
        menuChildElements[chindex].style.zIndex = zindexNumber + chindex;
    }
});

/*
 * The function updateAmount is used in shopping cart page
 * to update the amount if user change the buy quantity
 * and click the recalculate button
 *
 * @return void
 */
function updateAmount(){
    var selectTag = document.getElementsByTagName("select");
    var length = selectTag.length;
    var itemId, price, amount, productObj, amountObj;
    var finalAmount = 0, finalAmountObj = $("eTotal");

    for(var i=0; i<length; i++){
        itemId = selectTag[i].name;
        productObj = "product_"+itemId;
        amountObj = "amount_"+itemId;
        productObj = $(productObj);
        amountObj = $(amountObj);
        price = Number(productObj.value);
        amountObj.innerHTML = price * selectTag[i].value;
        finalAmount += Number(amountObj.innerHTML);
    }
    finalAmountObj.innerHTML = finalAmount;
}

/*
 * The function deleteCartRow is used in shopping cart page
 * to delete the product from cart. This function call the
 * updateAmount function after deleting the row from shopping
 * cart.
 *
 * @param HTMLImageElement user click on this to call function
 * @return void
 *
 */
function deleteCartRow(element){
    var elementParent = element.parentNode;
    var elementGParent = elementParent.parentNode;
    elementGParent.parentNode.removeChild(elementGParent);
    updateAmount();
}

/*
 * This function update the category page colorDiv and
 * paging links and call by categoryView function
 *
 * @return void
 */
function updateCategoryPage(){
    var pageElement = $D.getElementsByClassName("pageing");
    var length = pageElement.length;
    var textElement = $("currentPage");

    for(var i=0; i<length; i++){
        var anchorTag = pageElement[i].getElementsByTagName("a");
        YAHOO.util.Event.addListener(anchorTag,"click", function(){
            textElement.value = this.innerHTML;
            //categoryView();
        });
    }

    var divs = $D.getElementsByClassName("viewDivisions");
    YAHOO.util.Event.addListener(divs, "mouseover", function(){
        this.id = "activeLi";
    });
    YAHOO.util.Event.addListener(divs, "mouseout", function(){
        this.id = "";
    });

}

/*
 * show popup when user click on detail link for any order
 */

function updateOrderStatusPage(){
    YAHOO.util.Event.onContentReady($D.getElementsByClassName("detailView"),function(){
        var popupParent = this.parentNode;
        var clickElement, clickLength;
        var closeObject = popupParent.getElementsByClassName("closeOrderDetail");
        clickElement = popupParent.getElementsByTagName("a");
        clickLength = clickElement.length;
        for(var j=0; j<clickLength; j++){
            if(clickElement[j].innerHTML=="Detail"){
                var popupElement = $(popupParent).getElementsByClassName("detailView")[0];
                YAHOO.util.Event.addListener(clickElement[j],"click",function(){
                    var elements = $D.getElementsByClassName("detailView")
                    var len = elements.length;
                    for(var i=0; i<len; i++)
                    {
                        hidePopup(elements[i]);
                    }
                    showPopup(popupElement);
                });
                YAHOO.util.Event.addListener(closeObject,"click",function(){
                    hidePopup(popupElement);
                });
            }
        }

    });
}

/*
 * This function is used at checkout steps from shipping info
 * till final step to save and pay for order.
 *
 * This function validates all the checkout step form and if
 * validation is successfull then save data.
 *
 * @param formId     As string to know which step form is to varified
 * @param addressUrl As string to define and recalculate the page url.
 * @param requestUrl As string. Used to pass the value to another
 *                   functions getData and postData
 * @param clickObj   As string to know which bredcrum link is clicked.
 *
 */
function checkFormFields(formId, addressUrl, requestUrl, clickObj)
{
    var form = $(formId);
    var checkFields = form.getElementsByClassName('required');
    var counts = checkFields.length;
    var checkFail = 0;
    var messageBox = $('required-message-box');
    var addressField = '';
    var fieldSuffix = '';

    for(var i=0; i<counts; i++)
    {
        if((checkFields[i].value==null || checkFields[i].value=='') && checkFields[i].name!=null)
        {
            checkFields[i].style.borderColor = '#C0012A';
            checkFail++;
        }
        else if(checkFields[i].value!=null || checkFields[i].value!='')
        {
            checkFields[i].style.borderColor = '#AAA9A9';
        }

        if(checkFields[i].id=='billing:telephone' || checkFields[i].id=='billing:postcode' ||
           checkFields[i].id=='billing:fax' || checkFields[i].id=='shipping:telephone' ||
           checkFields[i].id=='shipping:postcode' || checkFields[i].id=='shipping:fax')
        {
            if(isNaN(checkFields[i].value))
            {
                checkFields[i].style.borderColor = '#C0012A';
                checkFail++;
            }
        }
    }

    if(formId=='co-billing-form')
        addressField = $('billing-address-select');
    else if(formId=='co-shipping-form')
        addressField = $('shipping-address-select');

    if(checkFail>0 && addressField==null)
    {
        messageBox.className = "highlightText";
        clickObj.disabled = false;
        return;
    }

    messageBox.className = "highlightText hideData";

    if(formId=='co-billing-form')
    {
        fieldSuffix = 'billing';
        addressField = $('billing-address-select');
        $('billing-please-wait').style.display = "inline";
    }
    else if(formId=='co-shipping-form')
    {
        fieldSuffix = 'shipping';
        addressField = $('shipping-address-select');
        $('shipping-please-wait').style.display = "inline";
    }
    else if(formId=='co-shipping-method-form')
    {
        $('shipping-method-please-wait').style.display = "inline";
    }
    else if(formId=='co-payment-form')
    {
        $('payment-please-wait').style.display = "inline";
    }
    else if(formId=='checkout-review-submit')
    {
        $('review-please-wait').style.display = "inline";
        postData('', addressUrl, clickObj);
        return;
    }

    if(addressField!=null && addressField!='')
    {
        addressUrl = addressUrl + addressField.value;
        getAddress(addressUrl, formId, fieldSuffix, requestUrl, clickObj);
    }
    else
    {
        var queryString = getQueryString(formId);
        postData(queryString, requestUrl, clickObj);
    }
}

function ajaxSave(formId, addressUrl, requestUrl, clickObj)
{
    clickObj.disabled = true;
    checkFormFields(formId, addressUrl, requestUrl, clickObj);
}

function getAddress(requestUrl, formId, fieldSuffix, successUrl, clickObj)
{
    var jsonCall = {

        success : function(obj){
            var result = [];
            var length = 0;
            var queryString = '';

            try{
                jsonText = '[ ' + obj.responseText + ' ]';
                result = YAHOO.lang.JSON.parse(jsonText);
                length = result.length;
            }
            catch(ex){
                return;
            }

            for(var i=0; i<length; ++i)
            {
                var res = result[i];
                $(fieldSuffix + ":firstname").value = res.firstname;
                $(fieldSuffix + ":lastname").value = res.lastname;
                $(fieldSuffix + ":company").value = res.company;
                $(fieldSuffix + ":street1").value = res.street1;
                $(fieldSuffix + ":street2").value = res.street2;
                $(fieldSuffix + ":city").value = res.city;
                $(fieldSuffix + ":region").value = res.region;
                $(fieldSuffix + ":telephone").value = res.telephone;
                $(fieldSuffix + ":fax").value = res.fax;
                $(fieldSuffix + ":country_id").value = res.country_id;
                $(fieldSuffix + ":postcode").value = res.postcode;
            }

            queryString = getQueryString(formId);
            postData(queryString, successUrl, clickObj);
        },

        failure : function(obj){
            if(!YAHOO.util.Connect.isCallInProgress(obj))
                alert("Fail to get Data");
        }

    };

    YAHOO.util.Connect.asyncRequest('GET', requestUrl, jsonCall);
}

function getQueryString(formId){

    var queryStr = "";
    var form = $(formId);
    var elementObj = form.getElementsByTagName('input');
    var count = elementObj.length;

    for(var i=0; i<count; i++){

        if(elementObj[i].type=="radio" && elementObj[i].checked==true){
            queryStr += elementObj[i].name + "=" + elementObj[i].value;
        }
        else if(elementObj[i].type!="radio"){
            queryStr += elementObj[i].name + "=" + elementObj[i].value;
        }

        if(i!=(count-1) && elementObj[i].type!="radio")
            queryStr += "&";
        else if(elementObj[i].type=="radio" && elementObj[i].checked==true)
            queryStr += "&";
    }

    var elementObj = form.getElementsByTagName('select');
    if(elementObj!=null)
    {
        var count = elementObj.length;
        for(var i=0; i<count; i++)
        {
            if(queryStr!='')
                queryStr += '&';

            queryStr += elementObj[i].name + "=" + elementObj[i].value;
        }
    }

    return queryStr;
}

function postData(queryString, requestUrl, clickObj)
{
    var jsonCall = {
            success : function(obj){
                var result = [];
                var responseText = '';

                try{
                       if(obj.responseText=='[]')
                           scrollCount = 1;

                       responseText = '[ '+obj.responseText+' ]';
                       result = YAHOO.lang.JSON.parse(responseText);
                }
                catch(ex){
                    return;
                }

                var length = result.length;
                var olObj = $('csteps');
                var leftScroll = -980;

                clickObj.disabled=false;
                $('billing-please-wait').style.display = "none";
                $('shipping-please-wait').style.display = "none";
                $('shipping-method-please-wait').style.display = "none";
                $('payment-please-wait').style.display = "none";
                $('review-please-wait').style.display = "none";

                    for(var i=0; i<length; ++i)
                    {
                        var res = result[i];
                        var error = res.error;
                        var gotoStep = res.goto_section;

                        if(res.redirect)
                        {
                            window.location.href = res.redirect;
                            return;
                        }

                        if(error!=null && error!=false)
                        {
                            var message = res.message;
                            if(message!=null)
                                alert(message);
                            else if(message==null)
                                alert(error);
                            return;
                        }

                        if(gotoStep!=null && gotoStep=='shipping')
                        {
                            fromShipping = true;
                            scrollCount++;
                            //leftScroll = -980;
                        }
                        else if(gotoStep!=null && gotoStep=='shipping_method')
                        {
                            var updateSection = res.update_section;
                            var updateElement = $(updateSection.name);
                            updateElement.style.display="block";
                            updateElement.innerHTML = updateSection.html;

                            if(fromShipping==false)
                                scrollCount+=2;
                            else
                                scrollCount++;

                            //leftScroll = -1960;
                        }
                        else if(gotoStep!=null && gotoStep=='payment')
                        {
                            var updateSection = res.update_section;
                            var changeDivId = 'checkout-' + updateSection.name + '-load';
                            var updateElement = $(changeDivId);
                            updateElement.style.display="block";
                            updateElement.innerHTML = updateSection.html;
                            scrollCount++;
                            //leftScroll = -2940;
                        }
                        else if(gotoStep!=null && gotoStep=='review')
                        {
                            var updateSection = res.update_section;
                            var changeDivId = 'checkout-' + updateSection.name + '-load';
                            var updateElement = $(changeDivId);
                            updateElement.style.display="block";
                            updateElement.style.width = "980px";
                            updateElement.style.padding = "0px";
                            updateElement.innerHTML = updateSection.html;
                            scrollCount++;
                        }
                        else if(result[i].success==true && result[i].error==false)
                        {
                            window.location = successUrl;
                            successUrl = '';
                        }
                        else
                        {
                            if(gotoStep!=null)
                                return;
                        }
                    }

                    leftScroll = leftScroll*scrollCount;
                    var attributes = {left: {to: leftScroll}};
                    var moveObj = new YAHOO.util.Anim(olObj, attributes, 0.2);
                    moveObj.animate();

                    if(gotoStep==null)
                        deactiveStep('billing', '');
                    else
                        deactiveStep(gotoStep, '');

                },

                failure : function(obj){
                    if(!YAHOO.util.Connect.isCallInProgress(obj))
                        alert("Fail to get Data");
                }

            };

        YAHOO.util.Connect.asyncRequest('POST', requestUrl, jsonCall, queryString);
}

function showBilling(requestUrl, clickObj)
{
    var guest = $('login:guest');
    var register = $('login:register');
    var queryString = 'method=';

    if(guest.checked==true)
        queryString += guest.value;
    else if(register.checked==true)
        queryString += register.value;

    postData(queryString, requestUrl, clickObj);
}

function activateStep(stepId)
{
    var step = $(stepId);
    var stepSpan = step.getElementsByTagName("span");
    var image = step.getElementsByTagName("img");
    var imageSrc = image[0].src;
    var num = $(stepSpan[0]).innerHTML;
    $(stepSpan[0]).replace('<span class="activeNum">'+num+'</span>');
    stepSpan[1].className = "highlightText";
    imageSrc = imageSrc.replace(/arrow_black.jpg$/, "arrow_red.jpg");
    image[0].src = imageSrc;
}

function setupSteps(length)
{
    var divs = $D.getElementsByClassName('numberDivs');

    if(length==5)
    {
        for(var i=0; i<length; i++)
        {
            divs[i].style.marginRight = "45px";
        }
    }
}

function deactiveStep(stepId, oldStepId)
{
    var divs = $D.getElementsByClassName('numberDivs');
    var liObj = $("checkout-step-"+stepId);
    var liParent = liObj.parentNode;
    var liAll = liParent.getElementsByTagName('li');
    var liCount = liAll.length;
    var length = divs.length;
    var aObj;
    var currentObj = $(stepId);
    if(oldStepId!='')
        currentObj = $(oldStepId);

    liObj.style.visibility = "visible";

    for(var i=0; i<length; i++)
    {
        aObj = divs[i].getElementsByTagName("a")[0];
        YAHOO.util.Event.removeListener(aObj, 'click', scrollToStep);

        if(aObj.rel <= currentObj.rel)
        {
            YAHOO.util.Event.addListener(aObj, 'click', scrollToStep);
        }

        var stepSpan = divs[i].getElementsByTagName("span");
        var image = divs[i].getElementsByTagName("img");
        var imageSrc = image[0].src;

        var num = $(stepSpan[0]).innerHTML;
        $(stepSpan[0]).replace('<span class="deactiveNum">'+num+'</span>');

        stepSpan[1].className = "";
        imageSrc = imageSrc.replace(/arrow_red.jpg$/, "arrow_black.jpg");
        image[0].src = imageSrc;
    }

    for(var i=0; i<liCount; i++)
    {
        if(liAll[i].id!=liObj.id)
        {
            liAll[i].style.visibility = "hidden";
        }
    }

    var paymentFormUl = $(liObj).getElementsByClassName('form-list');
    if(paymentFormUl!=null)
    {
        var ulCount = paymentFormUl.length;
        for(i=0; i<ulCount; i++)
        {
            var paymentli = paymentFormUl[i].getElementsByTagName('li');
            liCount = paymentli.length;

            for(var j=0; j<liCount; j++)
            {
                paymentli[j].style.visibility = "visible";
            }
        }
    }

    activateStep(stepId);
}

function scrollToStep()
{
    var obj = this;
    var oldActive = $D.getElementsByClassName('activeNum');
    oldActive = oldActive[0].parentNode;
    var olObj = $('csteps');
    var newPosition = -980 * ((obj.rel)-1);
    var attributes = {left: {to: newPosition}};
    var anim = new YAHOO.util.Anim(olObj, attributes, 0.2);
    anim.animate();
    deactiveStep(obj.id, oldActive.id);
    scrollCount = (obj.rel-1);
    if(obj.rel==1)
    {
        fromShipping = false;
    }
    else if(obj.rel==2)
    {
        fromShipping = true;
    }
}

function backScrollToStep(backStepId)
{
    var obj = $(backStepId);
    var oldActive = $D.getElementsByClassName('activeNum');
    oldActive = oldActive[0].parentNode;
    var olObj = $('csteps');
    var newPosition = -980 * ((obj.rel)-1);
    var attributes = {left: {to: newPosition}};
    var anim = new YAHOO.util.Anim(olObj, attributes, 0.2);
    anim.animate();
    deactiveStep(obj.id, oldActive.id);
    scrollCount = (obj.rel);
    if(obj.rel==1)
    {
        fromShipping = false;
    }
    else if(obj.rel==2)
    {
        fromShipping = true;
    }
}

function advanceSearchOptClick(clickObj)
{
    var objId = clickObj.id;
    var showObjId = 'child-' + objId;
    var showObj = $(showObjId);
    var allShowObj = $D.getElementsByClassName('searchCategory');
    var length = allShowObj.length;
    var catNameObj = $('categoryName');
    catNameObj.value = clickObj.value;

    for(var i=0; i<length; i++)
    {
        allShowObj[i].style.display = 'none';
    }

    showObj.style.display = 'block';
}

function advanceSearchChildOptClick(clickObj, childOf)
{
    var catNameObj = $('categoryName');
    var catValue = catNameObj.value
    var matchStr = $('cat-'+childOf).value;
    var newCatValue = catValue.replace(matchStr,'');
    catNameObj.value = newCatValue;
    catValue = newCatValue;

    if(clickObj.checked==true)
    {
        if(catValue!=null && catValue!='')
        {
            catNameObj.value += ',' + clickObj.value;
        }
        else
        {
            catNameObj.value = clickObj.value;
        }
    }
    else if(clickObj.checked==false)
    {
        catValue = catNameObj.value;
        matchStr = clickObj.value + ',';
        var oldValue = catNameObj.value;
        newCatValue = catValue.replace(matchStr,'');

        if(newCatValue==catNameObj.value && oldValue==newCatValue)
        {
            matchStr = clickObj.value;
            newCatValue = catValue.replace(matchStr,'');
        }
        catNameObj.value = newCatValue;
        if(catNameObj.value=='')
        {
            catNameObj.value = $('cat-'+childOf).value;
        }
    }
}

function getOrders(requests)
{
    var len = requests.length;
    for(var i=0; i<len; i++)
    {
        getResult(requests[i]);
    }
}

function getResult(requestUrl)
{
    var jsonCall = {

            success : function(obj){
                var result = [];

                try{
                    result = YAHOO.lang.JSON.parse(obj.responseText);
                }
                catch(ex){
                    alert("Can't read response");
                    return;
                }

                var length = result.length;

                var activeElement = $("tabActive");
                var activeTitle = activeElement.title;
                var updateElement = $(activeTitle);
                var showCancel = false;

                for(var i=0; i<length; ++i){
                    var res = result[i];
                    var viewPage = res.page;
                    var pageLimit = res.limit;
                    var viewFor = res.view_for;

                    if(viewPage==false)
                        viewPage = 1;
                    if(pageLimit==false)
                        pageLimit = 10;

                    if(res.result=='pending')
                    {
                        updateElement = $('pendingOrders').getElementsByTagName('tbody')[0];
                        showCancel = true;
                    }
                    else if(res.result=='close')
                    {
                        updateElement = $('completedOrders').getElementsByTagName('tbody')[0];
                    }
                    else if(res.result=='cancel')
                    {
                        updateElement = $('cancelledOrders').getElementsByTagName('tbody')[0];
                    }

                    setDataRows(res.data, updateElement, requestUrl, viewPage, pageLimit, showCancel, viewFor);

                }

                updateOrderStatusPage();
                var pageNumber = $("pageNumber");
                pageNumber.value = 1;
            },

            failure : function(obj){
                if(!YAHOO.util.Connect.isCallInProgress(obj))
                    alert("Fail to get Data");
            }

        };

        YAHOO.util.Connect.asyncRequest('GET', requestUrl, jsonCall);
}

/*
 * Used to show the order detail table on user dashboard.
 *
 * This function show data from dataset, this dataset is
 * returned as a respnse of ajax request.
 *
 */
function setDataRows(dataObj, elementObj, requestUrl, viewPage, pageLimit, showCancel, viewFor)
{
    var result = '';
    var resultPerPage = $('rpp');
    dataObj = YAHOO.lang.JSON.parse('['+dataObj+']');
    var len = dataObj.length;
    var table = elementObj.parentNode;
    var tableHead = table.getElementsByTagName('thead')[0];
    var headData = tableHead.innerHTML;
    var parent = table.parentNode;
    var pageingDivId = 'jspaging-'+parent.id;
    var viewFrom = 0, viewUpto = 0;
    var pageStr = '', amtText='';
    var tableString = '';

    if(len==0)
    {
        tableString = orderDetailTable.replace(/--TABLE-ID--/, table.id);
        tableString = tableString.replace(/--TABLE-HEADER--/, headData);
        tableString = tableString.replace(/--INFO--/, parent.id.replace('Orders',''));

        parent.innerHTML = tableString;

        return;
    }

    if(resultPerPage.value<len)
    {
        pageStr = getPageing(len, resultPerPage.value, requestUrl, viewFor);
        len = Number(resultPerPage.value);
    }

    if(viewPage!=1)
    {
        viewFrom = ((viewPage-1) * len);
        viewUpto = viewFrom + len;
    }
    else if(viewPage==1)
    {
        viewFrom = 0;
        viewUpto = len;
    }

    if(viewUpto>dataObj.length)
    {
        viewUpto = dataObj.length;
    }

    for(var i=viewFrom; i<viewUpto; i++)
    {
        if(i%2==0)
        {
            result += '<tr class="lightGray">';
        }
        else
        {
            result += '<tr>';
        }

        amtText = new String(Number(dataObj[i].amount));
        if(amtText.indexOf('.')==-1)
        {
            amtText = amtText + '.00';
        }

        result += '<td class="leftBorder bottomBorder">'+dataObj[i].id+'</td>';
        result += '<td class="leftBorder bottomBorder">'+dataObj[i].date.replace(/"/g, '')+'</td>';
        result += '<td class="leftBorder bottomBorder" width="150">';
        result += '<span class="amountText" style="padding-right:10px; vertical-align:middle;">'+amtText+'</span></td>';
        result += '<td class="leftBorder bottomBorder rightBorder">';
        result += '<a href="javascript:" title="View Order Detail">Detail</a>';
        if(showCancel == true)
        {
            result += ' | <a href="javascript:" onclick="javascript: cancelOrder('+"'"+dataObj[i].cancel_id+"'"+')">Cancel</a>';
        }
        result += '<div class="hideData detailView"><div class="top"></div><div class="mid"><a class="closeOrderDetail rgtFloat" href="javascript:"><img alt="Close" src="'+closeButtonImage+'"/></a>';
        result += '<table><thead><tr><th>Image</th><th>Product</th><th>Quantity</th><th>Price (Rs.)</th>';
        result += '</tr></thead><tbody>'+dataObj[i].order_detail+'<tr><td colspan="4" style="text-align:right;padding-right:10px;">';
        result += '<a href="'+viewUrl+'order_id/'+dataObj[i].cancel_id+'/" style="color:#fff;">More Details</a></td></tr></tbody></table></div><div class="bottom">';
        result += '</div></div></td>';

        result += '</tr>';
    }

    parent.innerHTML = '<table id="'+table.id+'" cellspacing="0" cellpadding="0" border="0"><thead>'+headData+'</thead><tbody>'+result+'</tbody></table>';
    parent.innerHTML = '<div id="'+pageingDivId+'" style="text-align:right; padding:0px;">'+pageStr+'</div>'+parent.innerHTML;
}

function setOrderDetail(dataString)
{
    /*var tableString = '<div class="hideData detailView"><div class="top"></div><div class="mid">';
    tableString += '<table><thead><tr><th>Image</th><th>Product</th><th>Quantity</th><th>Price (Rs.)</th>';
    tableString += '</tr></thead><tbody>'+dataString+'</tbody></table></div><div class="bottom"></div></div>';*/

    return tableString.replace(/--TABLE-DATA--/, dataString);
}

function getPageing(length, resultPerPage, requestUrl, viewFor)
{
    var canNewPage = length%resultPerPage;
    var pages = length/resultPerPage;
    var result = '';
    var isQueryString = requestUrl.indexOf('?');

    if(isQueryString!=-1)
    {
        requestUrl = requestUrl.replace(requestUrl.substr(isQueryString, (requestUrl.length-1)), '');
    }

    if(canNewPage>0)
    {
        pages++;
    }

    for(var i=1; i<=pages; i++)
    {
        result += '<a href="javascript:" onclick="javascript:getResult('+"'"+requestUrl+'?p='+i+"&limit="+resultPerPage+"&order_from="+viewFor+"'"+')">'+i+'</a>&nbsp;';
    }

    return result;
}

function cancelOrder(orderId)
{
    var jsonCall = {

            success : function(obj){
                var result = [];

                try{
                    result = YAHOO.lang.JSON.parse(obj.responseText);
                }
                catch(ex){
                    return;
                }

                for(var i=0; i<length; ++i){
                    var res = result[i];
                    var msg = res.success;
                    var error = res.error;

                    if(error=='' && msg!='')
                        alert(msg);
                    else
                        alert(error);
                }

                window.location.reload();

            },

            failure : function(obj){
                if(!YAHOO.util.Connect.isCallInProgress(obj))
                    alert("Fail to get Data");
            }

        };

        YAHOO.util.Connect.asyncRequest('POST', cancelUrl, jsonCall, 'order_id='+orderId);
}

function addFunctionListener(imageDimension, elementId, oneTimeScroll, previewFlag, parentId)
{
    var parentObj   = $(parentId);
    var rightButton = parentObj.getElementsByClassName('rightNavButton')[0];
    var imgObj = '', count  = 0;

    var divObj = $(elementId);
    if(divObj!=null)
    {
        imgObj = divObj.getElementsByTagName('img');
        count  = imgObj.length;
        if(count>oneTimeScroll)
        {
            YAHOO.util.Event.addListener(rightButton, 'click', function(){moveLeft(imageDimension, elementId, oneTimeScroll, previewFlag, parentId);});
        }
    }
}

/*
 * To verify form's required fields are filled or not
 * parameter postUrl contain the url string on which form
 * is submit if all required fields are filled.
 *
 * parameter formId contain the forms id as string to know
 * which form is validate.
 *
 * This function is based on assumption that all required fields
 * contain the class name 'required' and the error message container
 * has id starts with 'required-message-'+form
 *
 * @param postUrl       String
 * @param formId        String
 * @param emailfieldId  String
 * @return boolean
 */
function verifyForm(postUrl, formId , emailfieldId)
{
    var form = $(formId);
    var fields = form.getElementsByClassName('required');
    var count = fields.length;
    var errors = 0;
    var messageObjId = 'required-message-'+formId;
    var emailPattern = /^([a-z0-9])(([._])?([-a-z0-9])*([a-z0-9]))*\@([a-z0-9])(([a-z0-9-])*([a-z0-9]))+(\.([a-z0-9])([-a-z0-9_-])?([a-z0-9])+)+$/i  ;
    var emailField = null;
    var passwordFields = '';

    if(emailfieldId!='')
    {
        emailField = $(emailfieldId);
    }

    for(var i=0; i<count; i++)
    {
        fields[i].style.borderColor = "#AAA9A9";

        if((fields[i].value==null || fields[i].value=='') && fields[i].name!=null)
        {
            errors++;
            fields[i].style.borderColor = "#C0012A";
        }

        if(fields[i].type=='password' && ((i+1)!=count && fields[(i+1)].type=='password'))
        {
            if(fields[i].value!=fields[(i+1)].value && fields[i].id!='current_password')
            {
                fields[i].style.borderColor = "#C0012A";
                errors++;
                passwordFields = 'Password do not match.';
            }
        }

        if(fields[i].id=='zip' || fields[i].id=='fax' || fields[i].id=='telephone')
        {
            if(isNaN(fields[i].value))
            {
                errors++;
                fields[i].style.borderColor = "#C0012A";
                $(messageObjId).innerHTML = 'Fields are empty and/or Non-numeric data entred in numeric fields.';
            }
        }
    }

    if(errors<2 && emailField!=null && !emailPattern.test(emailField.value))
    {
        emailField.style.borderColor = "#C0012A";
        $(messageObjId).style.display = "block";
        $(messageObjId).innerHTML = 'Fields are empty and/or e-mail address is not valid.';
        errors++;
    }

    if(formId == 'review-form')
    {
        var radioObj = $D.getElementsByClassName('radioButton');
        var count = radioObj.length;
        var radioSelected = 0;
        var tableObj = $('commentForm').getElementsByTagName('table')[0];

        for(i=0; i<count; i++)
        {
            radioSelected = (radioObj[i].checked==true)?radioSelected+1 :radioSelected ;
        }
        if(radioSelected<3)
        {
            errors++;
            tableObj.style.borderColor = "#C0012A";
        }
        else
        {
            tableObj.style.borderColor = "#AAA9A9";
        }
    }

    if(errors>0)
    {
        $(messageObjId).style.display = "block";
        if(passwordFields!='' && errors==1)
        {
            $(messageObjId).innerHTML = passwordFields;
            passwordFields = '';
        }
        fields[0].focus();
        return(false);
    }
    else if(errors==0)
    {
        $(messageObjId).style.display = "none";
        form.action = postUrl;
        return(true);
    }
}

function selectImage(elementObj, productId)
{
    var parent = elementObj.parentNode;
    var childDivs = $(parent).getElementsByClassName('colorDiv');
    var len = childDivs.length;
    var imgId = 'image'+elementObj.title+productId;
    var mainImageId = 'thumbimage'+productId;
    var mainImage = $(mainImageId);
    var showImage = $(imgId);

    if(showImage!=null)
    {
        mainImage.src = showImage.src;
    }

    for(var i=0; i<len; i++)
    {
        childDivs[i].style.borderColor = '#DDDDDD';
    }
    elementObj.style.borderColor = 'black';
}

/*
 * This function is used to get the top sales for a category.
 * this category belongs to currently visited product at
 * product description page.
 *
 * @return void
 *
 */
function getSales()
{
    var queryString = "id="+category;
    var element = $('salesCarousel');

    var jsonCall = {
        success : function(obj){
            var result = [];
            try{
                result = YAHOO.lang.JSON.parse(obj.responseText);
            }
            catch(ex){
                return;
            }

            var length = result.length;

            for(var i=0; i<length; i++)
            {
                res = result[i];
                element.innerHTML = getHtmlString(res.data);
                if(element.title="topSales")
                {
                    //check user agent: If IE6
                    var ieEle = element.parentNode.parentNode;
                    ieEle.style.marginTop = "-10px";
                }
            }

        },
        failure : function(obj){
            if(!YAHOO.util.Connect.isCallInProgress(obj))
                alert("Fail to get Data");
        }

    };

    element.innerHTML = '<img src="'+ajaxLoaderImage+'" alt="Loading Top Sales Products..." title="Loading Top Sales Products..." class="v-middle" />Loading Top Sales Products...';
    YAHOO.util.Connect.asyncRequest('POST', url, jsonCall, queryString);
    YAHOO.util.Event.removeListener($D.getElementsByClassName('tabs'), 'click');
}

/*
 * This function converts the response into HTML.
 * This response is get from getSales() function
 *
 * @param   dataObj   JSON response data object
 * @return  HTML String
 *
 */
function getHtmlString(dataObj)
{
    var data = YAHOO.lang.JSON.parse('[ '+dataObj+' ]');
    var len = data.length;
    var htmlString = '<ul>';
    var productName = '';

    for(var i=0; i<len; i++)
    {
        productName = data[i].product_name;
        htmlString += '<li class="tabDataColumn lftFloat">';
        htmlString += '<a href="'+data[i].product_url+'" title="'+productName+'" class="product-image"><img src="'+data[i].product_image+'" width="150" height="150" alt="'+productName+'" class="completeBorder" /></a>';
        if(data[i].product_sku!='')
        {
            htmlString += '<span style="display:inline-block;">Product Code - '+data[i].product_sku+'</span><br />';
        }
        htmlString += '<span class="blodSpan clearFloat"><a href="'+data[i].product_url+'" title="'+productName+'">'+productName+'</a></span>';
        htmlString += '<span>'+data[i].product_price+'</span></li>';
    }
    htmlString += '</ul>';
    return htmlString;
}

/*
 * This function is call when product description page
 * is loaded completely to get the products list for
 * the currently visited category
 *
 * @param    categoryIds   array which contain the current product cat list
 * @param    productUrl    String to store the current product add to cart url
 * @param    productId     to pass on the server
 * @return   void
 */
function loadOtherProducts(categoryIds, productUrl, productId)
{
    var jsonCall = {
        success : function(obj){
            var result = [];
            try{
                result = YAHOO.lang.JSON.parse(obj.responseText);
            }
            catch(ex){
                return;
            }

            var length = result.length;
            var resultStr = '';

            for(var i=0; i<length; i++)
            {
                res = result[i];
                var data = YAHOO.lang.JSON.parse('['+res.data+']');
                var count = data.length;
                for(var j=0; j<count; j++)
                {
                    resultStr += '<div class="hideData" id="product'+data[j].product_id+'">';
                    resultStr += '<div class="hideData productMedia">'+data[j].product_media+'</div>';
                    resultStr += '<div class="hideData formUrl">'+data[j].product_addtocart_url+'</div>';
                    resultStr += '<div class="hideData productDetail">';
                    resultStr += '<div class="singleProductDescription lftFloat"><div>';
                    resultStr += '<span class="lftFloat">Product Name: </span><span class="lftFloat productName highlightText">'+data[j].product_name+'</span>';
                    resultStr += '</div><div class="clearFloat"><span class="lftFloat">Price: </span><span class="highlightText lftFloat productName">';
                    resultStr += data[j].product_price + '</span></div><div class="clearFloat"><span class="lftFloat">Description: </span>';
                    resultStr += '<span class="spanNormal textForProduct lftFloat">'+data[j].product_description+'</span>';
                    resultStr += '</div><div class="selectionHeading clearFloat"><!--<span>Make Your Selection Below</span>-->';
                    resultStr += '</div><div class="clearFloat"><div id="product-options-wrapper" class="product-options">'+data[j].product_option.replace(/\|/g, ':')+'</div></div><div>';
                    resultStr += data[j].product_addtocart + '</div>';

                    resultStr += '<div class="nextpreviousComment clearFloat">';
            resultStr += '<a href="" id="previousButton" class="previousButton lftFloat">Previous</a><a href="" id="nextButton" class="nextButton lftFloat">Next</a><a class="commentButton rgtFloat" href="javascript:initWork();" id="postCommentLink">Comment</a></div></div>';

            resultStr += '</div>';
                    resultStr += '<div class="hideData productZoom">'+data[j].product_image+'</div>';
                    resultStr += '<div class="hideData nextProduct">';
                    if((j+1)!=count)
                    {
                        resultStr += data[(j+1)].product_id;
                    }
                    else
                    {
                        resultStr += 0;
                    }
                    resultStr += '</div>';
                    resultStr += '<div class="hideData previousProduct">';
                    if((j-1)!=-1)
                    {
                        resultStr += data[(j-1)].product_id;
                    }
                    else
                    {
                        resultStr += 0;
                    }
                    resultStr += '</div>';
                    resultStr += '</div>';
                }

                $('responseResult').innerHTML += resultStr;
                if(resultStr!='')
                {
                    var nextButton = $("nextButton");
                    YAHOO.util.Event.addListener(nextButton, "click", function(){
                        showProduct(data[0].product_id, '+');
                    });
                }
            }

            showProductCount = 0;
            initWork();
         },
         failure : function(obj){
         if(!YAHOO.util.Connect.isCallInProgress(obj))
            alert("Fail to get Data");
      }

   };

   var queryString = 'catlist='+categoryIds+'&id='+productId;
   YAHOO.util.Connect.asyncRequest('POST', productUrl, jsonCall, queryString);
}

/*
 * This function is used to reset the click event on the
 * color selection divs at product description
 * page. When page is load it sets by using the next previous
 * link on the page this will be removed.
 *
 * @param elementObj  HTMLDivElement
 * @return void
 *
 */
function resetColorSelection(elementObj)
{

    var divElement = elementObj.getElementsByClassName('colorSelect')[0];

    if(divElement!=null)
    {
        var selectElement = divElement.getElementsByTagName('select')[0];
        if(selectElement!=null)
        {
            var optionElements = selectElement.getElementsByTagName('option');
            var len = optionElements.length;
            var replaceStr = '';

            for(var i=0; i<len; i++)
            {
                if(trim(optionElements[i].innerHTML).toLowerCase()!='-- please select --')
                    replaceStr += '<div class="colorDiv lftFloat completeBorder" title="'+trim(optionElements[i].innerHTML)+'" style="background-color:'+trim(optionElements[i].innerHTML).toLowerCase()+'"></div>';
            }

            selectElement.style.display = 'none';
            selectElement.parentNode.innerHTML = replaceStr;
        }
    }

    YAHOO.util.Event.addListener(elementObj.getElementsByClassName('colorDiv'), 'click', function(){
        var imgElementId = imgElementId = 'colorImg'+(this.title).toLowerCase();
        var images = '';
        var imgElement = $(imgElementId);
        if(imgElement!=null)
        {
            $('zoom_image').src = imgElement.src;
        }

        var divs = $D.getElementsByClassName('colorDiv')
        var len = divs.length;
        for(var i=0; i<len; i++)
        {
            divs[i].style.borderColor = '#DDDDDD';
        }

        this.style.borderColor = 'black';
    });
}

/*
 * This function is used to reset the change event on the
 * quantity select drop-down box at product description
 * page. When page is load it sets by using the next previous
 * link on the page this will be removed.
 *
 * @param elementObj  HTMLInputElement
 * @return void
 *
 */
function resetQtySelect(elementObj)
{
    var qtySelectObj = elementObj.getElementsByClassName("qtySelect");
    YAHOO.util.Event.addListener(qtySelectObj,"change",function(){
        if(this.value=="more..")
        {
            var listElements = this.getElementsByTagName("option");
            var length = listElements.length;
            var newlength = length + 10;
            var options = '';
            var optElement = '';
            this.length = 0;

            for(var i=1; i<newlength; i++)
            {
                optElement = document.createElement('option');
                if(i==(newlength-1))
                {
                    optElement.setAttribute('selected', 'selected');
                }

                optElement.setAttribute('value', i);
                optElement.innerHTML = i;
                this.appendChild(optElement);
            }
            optElement = document.createElement('option');
            optElement.setAttribute('value', 'more..');
            optElement.innerHTML = 'more..';
            this.appendChild(optElement);
        }
    });
}

/*
 * This function show the product category list
 * based on passed value.
 *
 * @param    listIds   categories list id's
 * @param    url       request url from where category list html get
 * @return   void
 *
 */
function showLeftPanelCatList(url, listIds)
{
    var element = $D.getElementsByClassName('contents')[0];
    var jsonCall = {
            success : function(obj){
                var result = [];
                try{
                    result = YAHOO.lang.JSON.parse(obj.responseText);
                }
                catch(ex){
                    return;
                }

                var length = result.length;

                for(var i=0; i<length; i++)
                {
                    res = result[i];
                    element.innerHTML = res.data;
                }

            },
            failure : function(obj){
                return;
            }

        };

    var queryString = 'categories='+listIds;
    element.innerHTML = 'Loading...';
    YAHOO.util.Connect.asyncRequest('POST', url, jsonCall, queryString);
}